{{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-8">
    <div class="lg:col-span-2">
      <div class="rounded-2xl border border-ink-200 bg-white p-8 shadow-soft">
        {{if .Single}}
          <div class="text-xs uppercase tracking-widest text-brand-700/80">{{.Single.Name}}</div>
          <h1 class="mt-2 text-3xl font-semibold tracking-tight">{{.Single.Title}}</h1>
          <div class="mt-3 text-sm text-ink-600">{{.Single.Description}}</div>
        {{else if eq .Type "search"}}
          <div class="text-xs uppercase tracking-widest text-brand-700/80">Search</div>
          <h1 class="mt-2 text-3xl font-semibold tracking-tight">搜索结果</h1>
          <div class="mt-3 text-sm text-ink-600">关键词：{{.Request.Query.key}}</div>
        {{else if eq .Type "tag"}}
          <div class="text-xs uppercase tracking-widest text-brand-700/80">Tag</div>
          <h1 class="mt-2 text-3xl font-semibold tracking-tight">{{.Title}}</h1>
          <div class="mt-3 text-sm text-ink-600">{{.Description}}</div>
        {{else if eq .Type "user"}}
          <div class="text-xs uppercase tracking-widest text-brand-700/80">Author</div>
          <h1 class="mt-2 text-3xl font-semibold tracking-tight">作者专栏</h1>
          <div class="mt-3 text-sm text-ink-600">{{.Title}}</div>
        {{else}}
          <div class="text-xs uppercase tracking-widest text-brand-700/80">List</div>
          <h1 class="mt-2 text-3xl font-semibold tracking-tight">{{.Title}}</h1>
          <div class="mt-3 text-sm text-ink-600">{{.Description}}</div>
        {{end}}
      </div>

      <div class="mt-6 space-y-4">
        {{range .List}}
          <a href="{{.URL}}" class="block rounded-2xl border border-ink-200 bg-white p-6 shadow-soft hover:border-brand-500/30">
            <div class="flex items-center justify-between gap-4">
              <div>
                <div class="text-lg font-semibold">{{.Title}}</div>
                <div class="mt-2 text-sm text-ink-600">{{.Description}}</div>
                <div class="mt-4 flex flex-wrap items-center gap-3 text-xs text-ink-500">
                  <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
                  <span>{{.Views}} 浏览</span>
                  {{if .ColumnName}}<span class="px-2 py-1 rounded-full bg-brand-50 text-brand-700 border border-brand-500/20">{{.ColumnName}}</span>{{end}}
                </div>
              </div>
              <div class="hidden sm:block w-24 h-16 rounded-xl overflow-hidden border border-ink-200 bg-ink-100">
                <img class="w-full h-full object-cover" src="{{default .Img "https://picsum.photos/seed/portal-card/360/240"}}" alt="{{.Title}}" />
              </div>
            </div>
          </a>
        {{end}}
      </div>

      {{if .Pager}}
      <div class="mt-8 flex flex-wrap items-center justify-between gap-3">
        <div class="text-sm text-ink-600">共 {{.Pager.TotalItems}} 条 / {{.Pager.TotalPages}} 页</div>
        <div class="flex gap-2">
          {{if .Pager.HasPrev}}
            <a class="px-4 py-2 rounded-full bg-white border border-ink-200 hover:border-brand-500/30 hover:bg-brand-50" href="{{.Pager.PrevPageUrl}}">上一页</a>
          {{end}}
          {{if .Pager.HasNext}}
            <a class="px-4 py-2 rounded-full bg-white border border-ink-200 hover:border-brand-500/30 hover:bg-brand-50" href="{{.Pager.NextPageUrl}}">下一页</a>
          {{end}}
        </div>
      </div>
      {{end}}

    </div>

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

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