{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-4xl px-4 py-10 lg:px-8">
  {{if .Content}}
  <article class="rounded-[2rem] border border-[var(--border)] bg-white p-6 shadow-sm md:p-10">
    <h1 class="text-3xl font-semibold leading-tight">{{.Content.Title}}</h1>
    <p class="mt-4 text-sm text-[var(--muted)]">{{.Content.Description}}</p>
    <div class="mt-4 flex flex-wrap gap-4 text-xs text-[var(--muted)]">
      <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
      {{if .Content.Author}}<span>{{.Content.Author}}</span>{{end}}
      {{if .Content.ColumnName}}<span>{{.Content.ColumnName}}</span>{{end}}
    </div>
    {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="mt-8 rounded-3xl border border-[var(--border)]">{{end}}
    {{if .Content.Ext}}
    <div class="mt-8 grid gap-3 sm:grid-cols-2">
      {{range $k, $v := .Content.Ext}}
      <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">{{ $k }}：</span>{{ $v }}</div>
      {{end}}
    </div>
    {{end}}
    <div class="prose prose-slate mt-8 max-w-none rounded-3xl bg-[var(--surface-soft)] p-6 leading-8">{{.Content.Content|Str2Html}}</div>
    {{if .Content.Tags}}
    <div class="mt-8 flex flex-wrap gap-2">
      {{range .Content.Tags}}<a href="{{.URL}}" class="rounded-full bg-[var(--surface-soft)] px-3 py-1 text-xs text-[var(--muted)]">{{.Name}}</a>{{end}}
    </div>
    {{end}}
    <div class="mt-10 flex justify-between gap-4 border-t border-[var(--border)] pt-6 text-sm">
      {{if .Prev}}<a href="{{.Prev.URL}}" class="text-[var(--primary)]">上一篇：{{.Prev.Title}}</a>{{end}}
      {{if .Next}}<a href="{{.Next.URL}}" class="text-[var(--primary)]">下一篇：{{.Next.Title}}</a>{{end}}
    </div>
  </article>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}