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

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <header class="mb-8">
    <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">{{if .Single}}{{.Single.Column.Title}}{{else if .CurrentColumn}}{{.CurrentColumn.Title}}{{else}}{{.Title}}{{end}}</h1>
    {{if .Single}}{{if .Single.Column.Description}}<p class="mt-3 max-w-3xl text-[color:var(--muted)]">{{.Single.Column.Description}}</p>{{end}}{{else if .CurrentColumn}}{{if .CurrentColumn.Description}}<p class="mt-3 max-w-3xl text-[color:var(--muted)]">{{.CurrentColumn.Description}}</p>{{end}}{{end}}
  </header>

 

  {{if .List}}
  <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
    {{range .List}}
    <article class="content-card">
      {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="aspect-[4/3] w-full rounded-2xl object-cover">{{end}}
      <div class="p-6">
        <h2 class="text-xl font-semibold"><a href="{{.URL}}">{{.Title}}</a></h2>
        <p class="mt-3 text-sm leading-7 text-[color:var(--muted)]">{{StrSub .Description 110}}</p>
        <div class="mt-4 flex items-center justify-between text-xs text-[color:var(--muted)]">
          <span>{{ParseTime .CreatedAt "2006-01-02"}}</span>
          <a class="section-link" href="{{.URL}}">查看详情</a>
        </div>
      </div>
    </article>
    {{end}}
  </div>

  {{if .Pager.Enabled}}
  <div class="mt-10 flex justify-center">
    <div class="pager">
      {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}">上一页</a>{{end}}
      {{range .Pager.Items}}
      {{if .Active}}<span class="is-active">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}">{{.Label}}</a>{{end}}
      {{end}}
      {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}">下一页</a>{{end}}
    </div>
  </div>
  {{end}}
  {{else}}
  <div class="rounded-3xl border border-dashed border-[color:var(--border)] bg-white p-12 text-center text-[color:var(--muted)]">暂无内容</div>
  {{end}}
</main>

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