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

<section class="bg-slate-900 text-white py-14">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="text-xs text-slate-400 mb-4 flex gap-2 items-center">
      <a href="/" class="hover:text-accent">首页</a><span>/</span><span class="text-slate-200">{{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}产品中心{{end}}</span>
    </nav>
    <h1 class="text-3xl md:text-4xl font-bold mb-3">{{if .CurrentColumn}}{{.CurrentColumn.Name}}{{else}}产品中心{{end}}</h1>
    {{if .CurrentColumn}}{{if .CurrentColumn.Description}}<p class="text-slate-300 max-w-3xl">{{.CurrentColumn.Description}}</p>{{end}}{{end}}
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  {{/* 扩展字段筛选条（如栏目配置了 fields） */}}
  {{$filters := ColumnExtFilter .CurrentColumn .Request}}
  {{if $filters}}
  <div class="bg-white rounded-xl border border-slate-200 p-5 mb-8 space-y-4">
    {{range $filters}}
    <div class="flex flex-wrap items-center gap-3">
      <span class="text-sm font-medium text-slate-700 w-20 shrink-0">{{.Label}}：</span>
      <div class="flex flex-wrap gap-2">
        {{range .Options}}
        <a href="{{.URL}}" class="px-3 py-1.5 text-xs rounded-md border {{if .Selected}}bg-primary text-white border-primary{{else}}bg-slate-50 text-slate-600 border-slate-200 hover:border-primary hover:text-primary{{end}}">{{.Label}}</a>
        {{end}}
      </div>
    </div>
    {{end}}
  </div>
  {{end}}

  {{if .List}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {{range .List}}
      <a href="{{.URL}}" class="group bg-white rounded-xl overflow-hidden border border-slate-200 hover:border-primary hover:shadow-xl transition">
        <div class="relative aspect-[4/3] overflow-hidden bg-slate-100">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">{{end}}
          {{$badge := index .Ext "badge"}}{{if $badge}}<span class="absolute top-3 left-3 px-2.5 py-1 bg-accent text-white text-xs font-medium rounded">{{$badge}}</span>{{end}}
        </div>
        <div class="p-5">
          <h3 class="text-lg font-semibold text-slate-900 mb-2 group-hover:text-primary transition line-clamp-1">{{.Title}}</h3>
          <p class="text-sm text-slate-500 line-clamp-2 mb-4">{{StrSub .Description 90}}</p>
          <div class="space-y-1.5 text-xs text-slate-600 border-t border-slate-100 pt-3">
            {{$model := index .Ext "model"}}{{if $model}}<div class="flex"><span class="text-slate-400 w-16 shrink-0">版本</span><span class="font-medium">{{$model}}</span></div>{{end}}
            {{$scene := index .Ext "scene"}}{{if $scene}}<div class="flex"><span class="text-slate-400 w-16 shrink-0">场景</span><span class="line-clamp-1">{{$scene}}</span></div>{{end}}
            {{$deploy := index .Ext "deploy"}}{{if $deploy}}<div class="flex"><span class="text-slate-400 w-16 shrink-0">部署</span><span>{{$deploy}}</span></div>{{end}}
          </div>
          <div class="mt-4 flex items-center justify-between">
            <span class="text-xs text-accent font-medium">查看详情 →</span>
            <span class="text-xs text-slate-400">{{.Views}} 浏览</span>
          </div>
        </div>
      </a>
      {{end}}
    </div>

    {{if .Pager.Enabled}}
    <nav class="flex flex-wrap justify-center mt-12 gap-2">
      {{range .Pager.Items}}
        {{if eq .Kind "gap"}}<span class="px-3 py-2 text-slate-400">…</span>
        {{else if .Disabled}}<span class="px-3 py-2 text-slate-300">{{.Label}}</span>
        {{else if .Active}}<span class="px-3 py-2 bg-primary text-white rounded min-w-[40px] text-center">{{.Label}}</span>
        {{else}}<a href="{{.URL}}" class="px-3 py-2 text-slate-700 hover:text-primary border border-slate-200 hover:border-primary rounded min-w-[40px] text-center">{{.Label}}</a>
        {{end}}
      {{end}}
    </nav>
    {{end}}
  {{else}}
    <div class="text-center text-slate-400 py-20">
      <div class="text-6xl mb-4">📦</div>
      <p>暂无产品</p>
    </div>
  {{end}}
</section>
{{include "js.html"}}
{{include "footer.html"}}