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

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2">
      <section class="rounded-3xl border border-steel-200 bg-white p-6 md:p-8 shadow-soft">
        {{if .Single}}
          <h1 class="text-2xl font-semibold">{{.Single.Title}}</h1>
          <p class="mt-2 text-sm text-steel-600">{{.Single.Description}}</p>
        {{else if eq .Type "search"}}
          <h1 class="text-2xl font-semibold">搜索结果</h1>
          {{if and .Request .Request.Query.key}}
            <p class="mt-2 text-sm text-steel-600">关键词：{{.Request.Query.key}}</p>
          {{else}}
            <p class="mt-2 text-sm text-steel-600">{{.Description}}</p>
          {{end}}
        {{else}}
          <h1 class="text-2xl font-semibold">{{.Title}}</h1>
          <p class="mt-2 text-sm text-steel-600">{{.Description}}</p>
        {{end}}
        <div class="mt-4 text-xs text-steel-500">共 {{.Pager.TotalItems}} 条</div>
      </section>

      <section class="mt-6 space-y-4">
        {{range .List}}
          <article class="rounded-3xl border border-steel-200 bg-white p-6 shadow-soft hover:border-amber2-200">
            <div class="flex flex-col sm:flex-row gap-4">
              {{if .Img}}
                <a class="sm:w-44 rounded-2xl overflow-hidden border border-steel-200 bg-steel-50" href="{{.URL}}">
                  <img class="w-full h-32 sm:h-28 object-cover" src="{{.Img}}" alt="{{.Title}}" />
                </a>
              {{end}}
              <div class="flex-1">
                <h2 class="text-lg font-semibold"><a class="hover:text-amber2-700" href="{{.URL}}">{{.Title}}</a></h2>
                <p class="mt-2 text-sm text-steel-600 line-clamp-2">{{.Description}}</p>
                <div class="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-steel-500">
                  <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
                  <span>{{.Views}} 浏览</span>
                  {{if .ColumnURL}}<a class="hover:text-amber2-700" href="{{.ColumnURL}}">{{.ColumnName}}</a>{{end}}
                </div>
              </div>
            </div>
          </article>
        {{end}}
      </section>

      {{if .Pager.Enabled}}
      <nav class="mt-8" aria-label="Page navigation">
        <ul class="flex flex-wrap justify-center gap-2">
          {{range .Pager.Items}}
            {{if eq .Kind "gap"}}
              <li class="px-3 py-2 text-steel-400">{{.Label}}</li>
            {{else}}
              <li>
                <a href="{{.URL}}" class="px-3 py-2 rounded-xl border border-steel-200 bg-white text-sm text-steel-700 hover:bg-steel-50 {{if .Active}}bg-steel-900 text-white border-steel-900 hover:bg-steel-900{{end}}">{{.Label}}</a>
              </li>
            {{end}}
          {{end}}
        </ul>
      </nav>
      {{end}}
    </div>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

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