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

{{if .Content}}
<section class="bg-stone-50 py-12 border-b border-stone-200">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-10">
    <nav class="text-xs text-muted mb-4 tracking-wider">
      <a href="/" class="hover:text-primary">首页</a>
      {{if .Content.ColumnName}}<span class="mx-2">/</span><a href="{{.Content.ColumnURL}}" class="hover:text-primary">{{.Content.ColumnName}}</a>{{end}}
      <span class="mx-2">/</span><span>{{.Content.Title}}</span>
    </nav>
    <h1 class="text-3xl md:text-4xl font-serif font-semibold text-ink leading-tight mb-4">{{.Content.Title}}</h1>
    <div class="flex flex-wrap gap-x-5 gap-y-2 text-xs text-muted tracking-wider">
      <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
      {{if .Content.Author}}<span>{{.Content.Author}}</span>{{end}}
      {{if .Content.Views}}<span>阅读 {{.Content.Views}}</span>{{end}}
    </div>
  </div>
</section>

<article class="py-16 bg-paper">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-10">
    {{if .Content.Img}}
    <div class="aspect-[16/9] overflow-hidden bg-stone-100 mb-10">
      <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover">
    </div>
    {{end}}

    {{if .Content.Description}}
    <p class="text-base md:text-lg text-ink/70 leading-relaxed mb-8 pb-8 border-b border-stone-200 italic">{{.Content.Description}}</p>
    {{end}}

    <div class="prose prose-stone prose-lg max-w-none">{{.Content.Content|Str2Html}}</div>

    {{if .Content.Tags}}
    <div class="mt-10 pt-6 border-t border-stone-200 flex flex-wrap gap-2">
      <span class="text-xs text-muted tracking-wider mr-1">标签:</span>
      {{range .Content.Tags}}<a href="{{.URL}}" class="px-3 py-1 bg-stone-100 hover:bg-accent hover:text-white text-xs transition">{{.Name}}</a>{{end}}
    </div>
    {{end}}

    <div class="flex flex-col sm:flex-row justify-between gap-4 mt-12 pt-8 border-t border-stone-200 text-sm">
      {{if .Prev}}<a href="{{.Prev.URL}}" class="text-ink/70 hover:text-primary"><span class="text-xs text-muted block mb-1">上一篇</span>← {{.Prev.Title}}</a>{{else}}<span></span>{{end}}
      {{if .Next}}<a href="{{.Next.URL}}" class="text-ink/70 hover:text-primary sm:text-right"><span class="text-xs text-muted block mb-1">下一篇</span>{{.Next.Title}} →</a>{{else}}<span></span>{{end}}
    </div>

    {{$related := Related .Content.Id 4}}
    {{if $related}}
    <section class="mt-16 pt-12 border-t border-stone-200">
      <h3 class="text-2xl font-serif font-semibold text-ink mb-8">相关阅读</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-x-4 gap-y-6">
        {{range $related}}
        <a href="{{.URL}}" class="group block">
          <div class="aspect-[16/9] overflow-hidden bg-stone-100 mb-3">
            {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover transition group-hover:scale-105 duration-700">{{end}}
          </div>
          <h4 class="text-sm font-medium text-ink group-hover:text-primary leading-snug">{{.Title}}</h4>
        </a>
        {{end}}
      </div>
    </section>
    {{end}}
  </div>
</article>
{{end}}

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