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

<section class="bg-stone-100 border-b border-stone-200">
  <div class="max-w-7xl mx-auto px-4 lg:px-8 py-10">
    {{if eq .Type "search"}}
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-2">Search Results</div>
      <h1 class="font-serif text-3xl md:text-4xl text-ink">Results for "{{.Title}}"</h1>
    {{else if eq .Type "tag"}}
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-2">Tag</div>
      <h1 class="font-serif text-3xl md:text-4xl text-ink">{{.Title}}</h1>
    {{else if .Single}}
      <div class="text-xs tracking-[0.3em] text-accent uppercase mb-2">Category</div>
      <h1 class="font-serif text-3xl md:text-4xl text-ink">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="text-stone-600 mt-3 max-w-3xl">{{.Single.Description}}</p>{{end}}
    {{end}}
  </div>
</section>

<section class="max-w-7xl mx-auto px-4 lg:px-8 py-14">
  {{if .List}}
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {{range .List}}
    <a href="{{.URL}}" class="group block bg-white border border-stone-200 hover:border-accent hover:shadow-md transition rounded-sm overflow-hidden">
      {{if .Img}}<div class="aspect-[4/3] overflow-hidden bg-stone-100"><img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500"></div>{{end}}
      <div class="p-6">
        <div class="text-xs text-stone-500 mb-3">{{ParseTime .CreatedAt "Jan 02, 2006"}}</div>
        <h3 class="font-serif text-xl text-ink group-hover:text-primary transition mb-2 leading-snug">{{.Title}}</h3>
        <p class="text-sm text-stone-600 leading-relaxed">{{StrSub .Description 110}}</p>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="text-center py-16 text-stone-400">No content yet.</div>
  {{end}}

  {{if .Pager.Enabled}}
  <nav class="flex justify-center items-center gap-2 mt-14 flex-wrap">
    {{range .Pager.Items}}
      {{if eq .Kind "gap"}}<span class="px-3 py-2 text-stone-400">…</span>
      {{else if .Disabled}}<span class="px-3 py-2 text-stone-300 border border-stone-200">{{.Label}}</span>
      {{else if .Active}}<span class="px-3 py-2 bg-primary text-white border border-primary">{{.Label}}</span>
      {{else}}<a href="{{.URL}}" class="px-3 py-2 text-stone-600 hover:text-accent border border-stone-200 hover:border-accent transition">{{.Label}}</a>
      {{end}}
    {{end}}
  </nav>
  {{end}}
</section>

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