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

<section class="bg-stone-50 py-12 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    <nav class="text-xs text-muted mb-3 tracking-wider">
      <a href="/" class="hover:text-primary">首页</a>
      {{if eq .Type "search"}}<span class="mx-2">/</span><span>搜索</span>
      {{else if eq .Type "tag"}}<span class="mx-2">/</span><span>标签</span>
      {{else if .Single}}<span class="mx-2">/</span><span>{{.Single.Name}}</span>{{end}}
    </nav>
    {{if eq .Type "search"}}
      <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink">搜索:{{.Request.Query.key}}</h1>
      <p class="text-sm text-muted mt-2">共找到 {{.Pager.TotalItems}} 条结果</p>
    {{else if eq .Type "tag"}}
      <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink">标签:{{.Title}}</h1>
    {{else if .Single}}
      <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-sm md:text-base text-muted mt-3 max-w-2xl">{{.Single.Description}}</p>{{end}}
    {{end}}
  </div>
</section>

<section class="py-16 bg-paper">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
    {{if .List}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-10">
      {{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}}
        </div>
        <div>
          <div class="text-xs text-muted mb-2 tracking-wider">{{ParseTime .CreatedAt "2006-01-02"}} · {{.ColumnName}}</div>
          <h3 class="text-lg font-serif font-medium text-ink group-hover:text-primary leading-snug mb-2">{{.Title}}</h3>
          <p class="text-sm text-ink/60 line-clamp-2 leading-relaxed">{{StrSub .Description 100}}</p>
        </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"}}