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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white/90 backdrop-blur">
  <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">
  {{if eq .Type "search"}}
  <div class="rounded-3xl bg-slate-950 px-6 py-8 text-white shadow-xl">
    <p class="text-sm text-emerald-200">搜索结果</p>
    <h1 class="mt-2 text-3xl font-semibold">关键词：{{index .Request.Query "key"}}</h1>
    <p class="mt-3 max-w-3xl text-sm leading-7 text-slate-300">如果当前结果不够精确，可以继续用地铁、学区、户型、预算等关键词缩小范围。</p>
  </div>
  {{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}}
  <div class="rounded-3xl bg-slate-950 px-6 py-8 text-white shadow-xl">
    <p class="text-sm text-emerald-200">栏目页</p>
    <h1 class="mt-2 text-3xl font-semibold">{{.CurrentColumn.Title}}</h1>
    {{if .CurrentColumn.Description}}<p class="mt-3 max-w-3xl text-sm leading-7 text-slate-300">{{.CurrentColumn.Description}}</p>{{end}}
  </div>
  {{end}}

  {{$currentSlug := ""}}
  {{if .CurrentColumn}}{{$currentSlug = .CurrentColumn.Slug}}{{end}}
  {{$isNews := eq $currentSlug "news"}}
  <div class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_300px] lg:items-start">
    <section>
      {{if .List}}
      {{if or $isNews (eq $currentSlug "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-2xl 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">
            <div class="flex items-center justify-between text-xs text-slate-500">
              <span>{{.ColumnName}}</span>
              {{if .Ext}}{{if index .Ext "badge"}}<span class="rounded-full bg-emerald-50 px-2 py-1 text-emerald-700">{{index .Ext "badge"}}</span>{{end}}{{end}}
            </div>
            <h2 class="mt-2 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 flex items-center justify-between text-sm">
              <span class="text-slate-500">{{ParseTime .CreatedAt "2006-01-02"}}</span>
              <span class="font-medium text-primary">查看详情</span>
            </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-full 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-full bg-primary px-4 py-2 text-sm text-white">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="rounded-full 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-full 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}}
    </section>

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

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