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

{{$banner := ""}}
{{if .Single}}{{$banner = index .Single.Ext "banner_img"}}{{end}}

{{if $banner}}
<section class="relative aspect-[16/9] max-h-[55vh] overflow-hidden">
  <img src="{{$banner}}" alt="{{if .Single}}{{.Single.Name}}{{end}}" class="w-full h-full object-cover">
  <div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/30 to-black/10 flex items-end pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 w-full text-white">
      <nav class="text-xs text-white/80 mb-3 tracking-wider">
        <a href="/" class="hover:text-accent">首页</a><span class="mx-2">/</span><span>箱包系列</span>
      </nav>
      <h1 class="text-3xl md:text-5xl font-serif font-semibold mb-3">{{if .Single}}{{.Single.Name}}{{end}}</h1>
      {{if .Single}}{{if .Single.Description}}<p class="text-sm md:text-lg opacity-90 max-w-2xl">{{.Single.Description}}</p>{{end}}{{end}}
    </div>
  </div>
</section>
{{else}}
<section class="bg-stone-50 py-16 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink">箱包系列</h1>
  </div>
</section>
{{end}}

<section class="py-16 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <div class="flex justify-between items-end mb-8 flex-wrap gap-3">
      <p class="text-sm text-muted">{{if .Pager.Enabled}}共 {{.Pager.TotalItems}} 款 · 第 {{.Pager.Current}} / {{.Pager.TotalPages}} 页{{else}}共 {{len .List}} 款{{end}}</p>
      <div class="flex gap-1 text-xs">
        <span class="px-3 py-1.5 bg-ink text-white tracking-wider">全部</span>
        <a href="/tag/都市通勤" class="px-3 py-1.5 border border-stone-300 text-ink/70 hover:border-primary hover:text-primary tracking-wider">通勤</a>
        <a href="/tag/旅行" class="px-3 py-1.5 border border-stone-300 text-ink/70 hover:border-primary hover:text-primary tracking-wider">旅行</a>
        <a href="/tag/新品" class="px-3 py-1.5 border border-stone-300 text-ink/70 hover:border-primary hover:text-primary tracking-wider">新品</a>
      </div>
    </div>

    {{if .List}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-12">
      {{range .List}}
      <a href="{{.URL}}" class="group block">
        <div class="relative aspect-[16/9] overflow-hidden bg-stone-100 mb-4">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">{{end}}
          {{$badge := index .Ext "badge"}}
          {{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-white/95 text-xs tracking-wider text-ink">{{$badge}}</span>{{end}}
        </div>
        <div class="flex items-start justify-between gap-3 mb-2">
          <h3 class="text-lg font-serif font-medium text-ink group-hover:text-primary transition">{{.Title}}</h3>
          {{if .Price}}<div class="text-sm font-medium text-ink whitespace-nowrap">¥{{.Price}}</div>{{end}}
        </div>
        <p class="text-sm text-ink/60 line-clamp-2 leading-relaxed mb-3">{{StrSub .Description 70}}</p>
        <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
          {{$cap := index .Ext "capacity"}}{{if $cap}}<span>容量 · {{$cap}}</span>{{end}}
          {{$dim := index .Ext "dimension"}}{{if $dim}}<span>尺寸 · {{$dim}}</span>{{end}}
        </div>
      </a>
      {{end}}
    </div>
    {{else}}
    <div class="text-center text-muted py-20">暂无包款</div>
    {{end}}

    {{if .Pager.Enabled}}
    <nav class="flex justify-center mt-16 gap-1.5 flex-wrap">
      {{range .Pager.Items}}
        {{if eq .Kind "gap"}}<span class="px-3 py-2 text-muted">…</span>
        {{else if .Disabled}}<span class="px-3 py-2 text-stone-300 text-sm">{{.Label}}</span>
        {{else if .Active}}<span class="px-3 py-2 bg-ink text-white text-sm">{{.Label}}</span>
        {{else}}<a href="{{.URL}}" class="px-3 py-2 text-ink/70 hover:text-primary border border-stone-300 hover:border-primary text-sm">{{.Label}}</a>
        {{end}}
      {{end}}
    </nav>
    {{end}}
  </div>
</section>

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