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

<section class="bg-sand">
  <div class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">03 · COLLECTIONS</div>
    <h1 class="font-serif text-4xl md:text-5xl text-ink mb-3">
      {{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}设计系列{{end}}
    </h1>
    {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p class="text-gray-600 max-w-2xl">{{.CurrentColumn.Description}}</p>{{end}}{{end}}
    <p class="text-sm text-gray-500 mt-4">每季完整成衣系列 · 整盘订货享受优先排产 · 可按系列再开发</p>
  </div>
</section>

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
  {{if .List}}
  <div class="space-y-16 lg:space-y-20">
    {{range $i, $c := .List}}
    <a href="{{$c.URL}}" class="group block collection-row" data-index="{{$i}}">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
        <div class="lg:col-span-7 collection-img">
          <div class="aspect-[9/16] lg:aspect-[4/3] overflow-hidden bg-sand">
            {{if $c.Img}}<img src="{{$c.Img}}" alt="{{$c.Title}}" class="w-full h-full object-cover group-hover:scale-[1.02] transition duration-700">{{end}}
          </div>
        </div>
        <div class="lg:col-span-5 collection-info">
          <div class="text-xs tracking-wider2 text-accent mb-3">{{index $c.Ext "season"}}{{$pieces := index $c.Ext "pieces"}}{{if $pieces}} · {{$pieces}}{{end}}</div>
          <h2 class="font-serif text-3xl md:text-4xl text-ink leading-tight mb-4 group-hover:text-primary">{{$c.Title}}</h2>
          <p class="text-gray-600 leading-relaxed mb-6">{{$c.Description}}</p>
          <div class="space-y-3 text-sm border-t border-sand pt-5">
            {{$theme := index $c.Ext "theme"}}
            {{if $theme}}<div class="flex gap-4"><span class="w-24 text-gray-400 text-xs tracking-wider2">主题色调</span><span class="text-ink">{{$theme}}</span></div>{{end}}
            {{$audience := index $c.Ext "audience"}}
            {{if $audience}}<div class="flex gap-4"><span class="w-24 text-gray-400 text-xs tracking-wider2">目标客群</span><span class="text-ink">{{$audience}}</span></div>{{end}}
            {{$release := index $c.Ext "release"}}
            {{if $release}}<div class="flex gap-4"><span class="w-24 text-gray-400 text-xs tracking-wider2">发布日期</span><span class="text-ink">{{$release}}</span></div>{{end}}
          </div>
          <div class="mt-6 inline-block text-sm text-ink border-b border-ink pb-1 group-hover:text-accent group-hover:border-accent">查看系列详情 →</div>
        </div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center text-gray-400 py-20 border border-dashed border-sand">暂无系列内容</div>
  {{end}}

  {{if .Pager.Enabled}}
  <nav class="flex justify-center items-center gap-2 mt-14">
    {{range .Pager.Items}}
      {{if eq .Kind "gap"}}<span class="px-3 py-2 text-gray-400 text-sm">…</span>
      {{else if .Disabled}}<span class="px-3 py-2 text-gray-300 text-sm">{{.Label}}</span>
      {{else if .Active}}<span class="px-3 py-2 bg-ink text-mist text-sm">{{.Label}}</span>
      {{else}}<a href="{{.URL}}" class="px-3 py-2 text-ink text-sm border border-sand hover:border-ink">{{.Label}}</a>
      {{end}}
    {{end}}
  </nav>
  {{end}}
</section>

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