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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-4 text-sm text-slate-500 sm:px-6 lg:px-8">
    <a href="/" class="hover:text-primary">首页</a>
    {{range .Nav}} <span class="px-2">/</span> <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>{{end}}
  </div>
</nav>
{{end}}
{{end}}

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-start">
    <section>
      <div class="pb-6">
      {{if eq .Type "search"}}
      <h1 class="text-3xl font-semibold">搜索结果：{{index .Request.Query "key"}}</h1>
      {{else if eq .Type "tag"}}
      <h1 class="text-3xl font-semibold">标签：{{index .Request.Query "tag"}}</h1>
      {{else if .Single}}
      <h1 class="text-3xl font-semibold">{{.Single.Name}}</h1>
      {{if .Single.Description}}<p class="mt-3 max-w-3xl text-slate-600">{{.Single.Description}}</p>{{end}}
      {{else if .CurrentColumn}}
      <h1 class="text-3xl font-semibold">{{.CurrentColumn.Title}}</h1>
      {{if .CurrentColumn.Description}}<p class="mt-3 max-w-3xl text-slate-600">{{.CurrentColumn.Description}}</p>{{end}}
      {{end}}
      </div>

      <div class="pt-2">
      {{if .List}}
      {{if or (eq .CurrentColumn.Slug "news") (eq .CurrentColumn.Slug "notice")}}
      <div class="space-y-3">
        {{range .List}}
        <a href="{{.URL}}" class="flex items-start gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
          <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-24 w-24 shrink-0 rounded-xl object-cover">
          <div class="min-w-0 flex-1">
            <div class="flex items-start justify-between gap-4">
              <h2 class="min-w-0 flex-1 text-lg font-semibold leading-7">{{.Title}}</h2>
              <span class="shrink-0 text-xs text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</span>
            </div>
            {{if .Description}}<p class="mt-2 text-sm leading-7 text-slate-600">{{StrLimit .Description 120 "…"}}</p>{{end}}
          </div>
        </a>
        {{end}}
      </div>
      {{else}}
      <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        {{range .List}}
        <a href="{{.URL}}" class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
          <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-48 w-full object-cover">
          <div class="p-5">
            <h2 class="text-lg font-semibold">{{.Title}}</h2>
            <p class="mt-2 text-sm leading-7 text-slate-600">{{StrLimit .Description 88 "…"}}</p>
            <div class="mt-4 text-sm text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</div>
          </div>
        </a>
        {{end}}
      </div>
      {{end}}

      {{if .Pager.Enabled}}
      <div class="mt-10 flex justify-center">
        <nav class="flex flex-wrap gap-2">
          {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">上一页</a>{{end}}
          {{range .Pager.Items}}
          {{if .Active}}<span class="rounded bg-primary px-4 py-2 text-sm text-white">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">{{.Label}}</a>{{end}}
          {{end}}
          {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">下一页</a>{{end}}
        </nav>
      </div>
      {{else if not .List}}
      <div class="rounded-xl bg-white p-10 text-center text-slate-500 shadow-sm ring-1 ring-slate-200">暂无内容</div>
      {{end}}
      {{end}}
      </div>
    </section>

    {{if index .ThemesExt "show_sidebar"}}
    {{include "sidebar.html"}}
    {{end}}
  </div>
</main>

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