{{include "header.html"}}
{{include "nav.html"}}

<main class="mx-auto max-w-7xl px-4 py-10 lg:px-8">
  {{if .Single}}
  <div class="mb-8">
    <h1 class="text-3xl font-semibold">{{.Single.Name}}</h1>
    {{if .Single.Description}}
    <p class="mt-3 max-w-3xl text-sm leading-7 text-[var(--muted)]">{{.Single.Description}}</p>
    {{end}}
    {{if .Single.Content}}
    <div class="prose prose-slate mt-6 max-w-none rounded-3xl border border-[var(--border)] bg-white p-6 leading-8 shadow-sm">
      {{.Single.Content|Str2Html}}
    </div>
    {{end}}
  </div>
  {{else}}
  <div class="mb-8">
    <h1 class="text-3xl font-semibold">产品中心</h1>
    <p class="mt-3 text-sm leading-7 text-[var(--muted)]">面向浴足店和终端电商的脚部护理产品，支持门店装、零售装和组合装。</p>
  </div>
  {{end}}

  {{if .List}}
  <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <article class="overflow-hidden rounded-3xl border border-[var(--border)] bg-white shadow-sm">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-56 w-full object-cover">{{end}}
      <div class="p-6">
        <div class="flex items-center justify-between gap-3">
          <h2 class="text-lg font-semibold"><a href="{{.URL}}">{{.Title}}</a></h2>
          {{$badge := index .Ext "badge"}}{{if $badge}}<span class="rounded-full bg-[var(--accent-soft)] px-3 py-1 text-xs text-[var(--accent)]">{{$badge}}</span>{{end}}
        </div>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
        <div class="mt-4 grid gap-2 text-xs text-[var(--muted)] sm:grid-cols-2">
          <div class="rounded-2xl bg-[var(--surface-soft)] p-3">型号：{{index .Ext "model"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-3">规格：{{index .Ext "spec"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-3">交付：{{index .Ext "delivery"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-3">场景：{{index .Ext "scenario"}}</div>
        </div>
        <div class="mt-5 flex items-center justify-between">
          {{if .Price}}<span class="text-2xl font-semibold text-[var(--primary)]">¥{{printf "%.2f" .Price}}</span>{{else}}<span class="text-sm text-[var(--muted)]">询价合作</span>{{end}}
          <a href="{{.URL}}" class="rounded-full bg-[var(--primary)] px-4 py-2 text-sm font-semibold text-white">查看详情</a>
        </div>
      </div>
    </article>
    {{end}}
  </div>
  {{else}}
  <div class="rounded-3xl border border-dashed border-[var(--border)] bg-white p-12 text-center text-[var(--muted)]">暂无产品</div>
  {{end}}

  {{if .Pager.Enabled}}
  <div class="mt-10 flex flex-wrap justify-center gap-2">
    {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">上一页</a>{{end}}
    {{range .Pager.Items}}
    {{if .Active}}<span class="rounded-full bg-[var(--primary)] px-4 py-2 text-sm text-white">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">{{.Label}}</a>{{end}}
    {{end}}
    {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}" class="rounded-full border border-[var(--border)] bg-white px-4 py-2 text-sm">下一页</a>{{end}}
  </div>
  {{end}}
</main>

{{include "footer.html"}}
{{include "js.html"}}