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

<main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <article class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="text-sm text-[var(--muted)]">{{ParseTime .Content.CreatedAt "2006-01-02"}} · {{.Content.Author}}</div>
    <h1 class="mt-3 text-4xl font-semibold leading-tight">{{.Content.Title}}</h1>
    {{if .Content.Description}}<p class="mt-4 text-lg leading-8 text-[var(--muted)]">{{.Content.Description}}</p>{{end}}

    {{if .Content.Img}}
    <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="mt-8 h-[360px] w-full rounded-3xl object-cover">
    {{end}}

    {{if .Content.Albums}}
    <div class="mt-8">
      <h2 class="text-2xl font-semibold">图集</h2>
      <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {{range $index, $img := .Content.Albums}}
        <button type="button" class="js-album-open album-thumb block overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)]" data-album="{{$img}}" data-album-alt="{{$.Content.Title}} 图集 {{Add $index 1}}">
          <img src="{{$img}}" alt="{{$.Content.Title}}" class="h-52 w-full object-cover">
        </button>
        {{end}}
      </div>
    </div>
    {{end}}

    {{if .Content.Ext}}
    <div class="mt-8 grid gap-4 md:grid-cols-2">
      {{range $k, $v := .Content.Ext}}
      <div class="rounded-2xl bg-[var(--surface-soft)] p-4">
        <div class="text-sm text-[var(--muted)]">{{$k}}</div>
        <div class="mt-1 font-medium">{{$v}}</div>
      </div>
      {{end}}
    </div>
    {{end}}

    <div class="prose mt-8 max-w-none prose-p:leading-8 prose-headings:font-semibold">
      {{.Content.Content|Str2Html}}
    </div>

    {{if .Content.Tags}}
    <div class="mt-8 flex flex-wrap gap-2">
      {{range .Content.Tags}}
      <a href="{{.URL}}" class="badge">{{.Name}}</a>
      {{end}}
    </div>
    {{end}}

    <div class="mt-10 flex flex-col gap-4 border-t border-[var(--border)] pt-8 md:flex-row md:justify-between">
      {{if .Prev}}<a href="{{.Prev.URL}}" class="text-[var(--primary)]">上一篇：{{.Prev.Title}}</a>{{end}}
      {{if .Next}}<a href="{{.Next.URL}}" class="text-[var(--primary)] md:text-right">下一篇：{{.Next.Title}}</a>{{end}}
    </div>
  </article>
  {{end}}
</main>
<div id="album-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/85 px-4 py-8 backdrop-blur-sm">
  <button type="button" id="album-modal-close" class="absolute right-4 top-4 rounded-full bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:bg-white/20">关闭</button>
  <div class="relative w-full max-w-6xl">
    <img id="album-modal-img" src="" alt="" class="mx-auto max-h-[88vh] w-auto max-w-full rounded-2xl object-contain shadow-2xl">
  </div>
</div>

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