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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-red-100 bg-stone-100 py-4">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-center gap-2 text-sm text-stone-600">
      <a href="/" class="hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-stone-400">/</span>
      <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

<main class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
  {{if .Single}}
  <h1 class="text-3xl font-bold text-stone-900">{{.Single.Name}}</h1>
  {{if .Single.Description}}<p class="mt-3 max-w-3xl text-base leading-7 text-stone-600">{{.Single.Description}}</p>{{end}}
  {{else}}
  <h1 class="text-3xl font-bold text-stone-900">产品中心</h1>
  {{end}}

  {{if .List}}
  <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <article class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-52 w-full object-cover">{{end}}
      <div class="p-5">
        {{if .Ext}}
        {{$badge := index .Ext "badge"}}
        {{if $badge}}<span class="inline-flex rounded-full bg-primary px-3 py-1 text-xs font-semibold text-white">{{$badge}}</span>{{end}}
        {{end}}
        <h2 class="mt-3 text-lg font-semibold text-stone-900">
          <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
        </h2>
        <p class="mt-2 text-sm leading-6 text-stone-600">{{StrSub .Description 100}}</p>
        {{if .Price}}<div class="mt-4 text-2xl font-bold text-primary">¥{{printf "%.2f" .Price}}</div>{{end}}
        <a href="{{.URL}}" class="mt-4 inline-flex text-sm font-medium text-primary hover:underline">查看详情</a>
      </div>
    </article>
    {{end}}
  </div>
  {{else}}
  <div class="py-16 text-center text-stone-500">暂无产品</div>
  {{end}}
</main>

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