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

<section class="max-w-[1280px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
  {{if eq .Type "search"}}
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">SEARCH RESULT</div>
    <h1 class="font-serif text-3xl md:text-4xl text-ink mb-8">关键词「{{if .Request}}{{index .Request.Query "key"}}{{end}}」</h1>
  {{else if eq .Type "tag"}}
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">TAG</div>
    <h1 class="font-serif text-3xl md:text-4xl text-ink mb-8">{{.Title}}</h1>
  {{else if .Single}}
    <div class="text-xs tracking-wider2 text-gray-500 mb-3">{{.Single.Name}}</div>
    <h1 class="font-serif text-3xl md:text-4xl text-ink mb-3">{{.Single.Name}}</h1>
    {{if .Single.Description}}<p class="text-gray-500 max-w-2xl mb-8">{{.Single.Description}}</p>{{end}}
  {{end}}

  {{if .List}}
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:gap-7">
    {{range .List}}
    <a href="{{.URL}}" class="group block">
      <div class="aspect-[9/16] overflow-hidden bg-sand mb-3">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
      </div>
      <div class="px-1">
        {{$badge := index .Ext "badge"}}
        {{if $badge}}<div class="text-[10px] tracking-wider2 text-accent mb-1">{{$badge}}</div>{{end}}
        <h3 class="font-serif text-base text-ink leading-snug group-hover:text-primary">{{.Title}}</h3>
        <div class="text-[11px] text-gray-400 mt-1">{{ParseTime .CreatedAt "2006.01.02"}}</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"}}