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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-red-100 bg-stone-100 py-4">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-center gap-2 text-sm text-stone-600">
      <a href="/" class="hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-stone-400">/</span>
      <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

<main class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
  {{if eq .Type "search"}}
  <h1 class="text-3xl font-bold text-stone-900">搜索结果：{{.Request.Query.key}}</h1>
  {{else if eq .Type "tag"}}
  <h1 class="text-3xl font-bold text-stone-900">标签：{{.Request.Query.tag}}</h1>
  {{else if .Single}}
  <h1 class="text-3xl font-bold text-stone-900">{{.Single.Name}}</h1>
  {{if .Single.Description}}<p class="mt-3 max-w-3xl text-base leading-7 text-stone-600">{{.Single.Description}}</p>{{end}}
  {{else}}
  <h1 class="text-3xl font-bold text-stone-900">列表</h1>
  {{end}}

  {{if .List}}
  {{if index .ThemesExt "show_sidebar"}}
  <div class="mt-10 grid gap-10 lg:grid-cols-3">
    <div class="lg:col-span-2">
      <div class="grid gap-6 md:grid-cols-2">
        {{range .List}}
        <article class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-48 w-full object-cover">{{end}}
          <div class="p-5">
            <h2 class="text-lg font-semibold text-stone-900">
              <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
            </h2>
            <p class="mt-2 text-sm leading-6 text-stone-600">{{StrSub .Description 100}}</p>
            <div class="mt-4 flex items-center justify-between text-sm text-stone-500">
              <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
              <a href="{{.URL}}" class="text-primary hover:underline">查看</a>
            </div>
          </div>
        </article>
        {{end}}
      </div>
    </div>
    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
  {{else}}
  <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <article class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-48 w-full object-cover">{{end}}
      <div class="p-5">
        <h2 class="text-lg font-semibold text-stone-900">
          <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
        </h2>
        <p class="mt-2 text-sm leading-6 text-stone-600">{{StrSub .Description 100}}</p>
        <div class="mt-4 flex items-center justify-between text-sm text-stone-500">
          <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
          <a href="{{.URL}}" class="text-primary hover:underline">查看</a>
        </div>
      </div>
    </article>
    {{end}}
  </div>
  {{end}}

  {{if .Pager.Enabled}}
  <div class="mt-12 flex justify-center">
    <nav class="flex gap-2">
      {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}" class="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm hover:bg-stone-50">上一页</a>{{end}}
      {{range .Pager.Items}}
      {{if .Active}}
      <span class="rounded-lg bg-primary px-4 py-2 text-sm text-white">{{.Label}}</span>
      {{else if .URL}}
      <a href="{{.URL}}" class="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm hover:bg-stone-50">{{.Label}}</a>
      {{end}}
      {{end}}
      {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}" class="rounded-lg border border-stone-300 bg-white px-4 py-2 text-sm hover:bg-stone-50">下一页</a>{{end}}
    </nav>
  </div>
  {{end}}
  {{else}}
  <div class="py-16 text-center text-stone-500">暂无内容</div>
  {{end}}
</main>

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