<!doctype html>
<html lang="zh-cn">

<head>
  {{include "header.html"}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="md:col-span-2">
        <section class="bg-white rounded-2xl border border-creative-100 shadow-card p-8 mb-8 overflow-hidden">
          <div class="flex items-start justify-between gap-4">
            <div>
              {{if eq .Type "search"}}
                <h1 class="text-2xl font-bold text-creative-900">搜索结果</h1>
                <p class="mt-2 text-sm text-creative-600">关键词：{{if .Request}}{{.Request.Query.key}}{{end}}</p>
              {{else if eq .Type "tag"}}
                <h1 class="text-2xl font-bold text-creative-900">标签</h1>
                <p class="mt-2 text-sm text-creative-600">共 {{.Pager.TotalItems}} 条</p>
              {{else}}
                {{if .Single}}
                  <h1 class="text-2xl font-bold text-creative-900">{{.Single.Title}}</h1>
                  <p class="mt-2 text-sm text-creative-600">{{.Single.Description}}</p>
                {{else}}
                  <h1 class="text-2xl font-bold text-creative-900">{{.Title}}</h1>
                  <p class="mt-2 text-sm text-creative-600">{{.Description}}</p>
                {{end}}
              {{end}}

              <div class="mt-4 text-xs text-creative-500 inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-creative-50 border border-creative-100">
                <i class="fa-regular fa-file-lines"></i>
                <span>{{.Pager.TotalItems}} 个条目</span>
              </div>
            </div>
            <div class="hidden sm:block text-creative-100 text-5xl"><i class="fa-solid fa-folder-open"></i></div>
          </div>
        </section>

        <section class="space-y-6">
          {{range .List}}
          <article class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden hover:shadow-creative transition-shadow">
            <div class="flex flex-col sm:flex-row">
              {{if .Img}}
              <a href="{{.URL}}" class="sm:w-52 block overflow-hidden bg-creative-50">
                <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-48 sm:h-full object-cover" />
              </a>
              {{end}}

              <div class="flex-1 p-6">
                <h3 class="text-lg font-semibold leading-snug"><a href="{{.URL}}" class="hover:text-creative-600 transition-colors">{{.Title}}</a></h3>
                <p class="mt-2 text-sm text-creative-600 leading-relaxed line-clamp-2">{{.Description}}</p>

                <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-creative-500">
                  <span class="inline-flex items-center gap-1"><i class="fa-regular fa-calendar"></i>{{ParseTime .CreatedAt "2006-01-02"}}</span>
                  {{if .ColumnURL}}
                  <a href="{{.ColumnURL}}" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-creative-50 text-creative-700 hover:bg-creative-100"><i class="fa-regular fa-folder"></i>{{.ColumnName}}</a>
                  {{end}}
                </div>

                {{if .Tags}}
                <div class="mt-3 flex flex-wrap gap-2">
                  {{range .Tags}}
                  <a href="{{.URL}}" class="px-3 py-1 rounded-full text-xs bg-creative-50 text-creative-600 hover:bg-creative-100">#{{.Name}}</a>
                  {{end}}
                </div>
                {{end}}
              </div>
            </div>
          </article>
          {{end}}
        </section>

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

      <div class="md:col-span-1">
        {{include "sidebar.html"}}
      </div>
    </div>
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
