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

<main class="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <article>
    <header class="mb-8">
      <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">{{.Content.Title}}</h1>
      <div class="mt-3 flex flex-wrap gap-4 text-sm text-[color:var(--muted)]">
        <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
        {{if .Content.Author}}<span>作者：{{.Content.Author}}</span>{{end}}
        {{if .Content.ColumnName}}<span>栏目：<a href="{{.Content.ColumnURL}}" class="section-link">{{.Content.ColumnName}}</a></span>{{end}}
      </div>
      {{if .Content.Description}}<p class="mt-4 text-[color:var(--muted)]">{{.Content.Description}}</p>{{end}}
    </header>
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="mb-8 aspect-[16/9] w-full rounded-3xl object-cover">{{end}}
    <div class="article-body">
      {{.Content.Content|Str2Html}}
    </div>
    {{if .Content.Tags}}
    <div class="mt-10 flex flex-wrap gap-2">
      {{range .Content.Tags}}<a href="{{.URL}}" class="chip chip-soft">{{.Name}}</a>{{end}}
    </div>
    {{end}}
    <div class="mt-10 grid gap-4 border-t border-[color:var(--border)] pt-8 md:grid-cols-2">
      {{if .Prev}}<a class="next-card" href="{{.Prev.URL}}"><span class="text-xs text-[color:var(--muted)]">上一篇</span><span class="mt-1 block font-medium">{{.Prev.Title}}</span></a>{{end}}
      {{if .Next}}<a class="next-card md:text-right" href="{{.Next.URL}}"><span class="text-xs text-[color:var(--muted)]">下一篇</span><span class="mt-1 block font-medium">{{.Next.Title}}</span></a>{{end}}
    </div>
  </article>
  {{end}}
</main>

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