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

{{if .Content}}
<section class="bg-slate-900 text-white py-10">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <nav class="text-xs text-slate-400 mb-4 flex flex-wrap gap-2 items-center">
      <a href="/" class="hover:text-accent">首页</a>
      <span>/</span>
      {{if .Content.ColumnName}}<a href="{{.Content.ColumnURL}}" class="hover:text-accent">{{.Content.ColumnName}}</a><span>/</span>{{end}}
      <span class="text-slate-200 truncate max-w-[280px]">{{.Content.Title}}</span>
    </nav>
    <h1 class="text-2xl md:text-4xl font-bold leading-tight mb-4">{{.Content.Title}}</h1>
    <div class="flex flex-wrap gap-4 text-xs text-slate-400">
      <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
      {{if .Content.Author}}<span>作者：<span class="text-slate-200">{{.Content.Author}}</span></span>{{end}}
      {{if .Content.Origin}}<span>来源：<span class="text-slate-200">{{.Content.Origin}}</span></span>{{end}}
      {{if .Content.Views}}<span>阅读 {{.Content.Views}}</span>{{end}}
    </div>
  </div>
</section>

<article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-xl shadow mb-8 max-h-[480px] object-cover">{{end}}

  <div class="prose prose-slate prose-lg max-w-none text-slate-700 leading-relaxed">{{.Content.Content | Str2Html}}</div>

  {{if .Content.Tags}}
  <div class="mt-10 flex flex-wrap gap-2">
    {{range .Content.Tags}}<a href="{{.URL}}" class="px-3 py-1 bg-slate-100 text-slate-600 text-sm rounded hover:bg-primary hover:text-white transition">#{{.Name}}</a>{{end}}
  </div>
  {{end}}

  <div class="flex justify-between mt-12 pt-8 border-t border-slate-200 text-sm">
    {{if .Prev}}<a href="{{.Prev.URL}}" class="text-slate-600 hover:text-primary max-w-[45%]"><div class="text-xs text-slate-400">上一篇</div>← {{.Prev.Title}}</a>{{else}}<span></span>{{end}}
    {{if .Next}}<a href="{{.Next.URL}}" class="text-slate-600 hover:text-primary max-w-[45%] text-right"><div class="text-xs text-slate-400">下一篇</div>{{.Next.Title}} →</a>{{else}}<span></span>{{end}}
  </div>

  {{$related := Related .Content.Id 4}}
  {{if $related}}
  <section class="mt-16">
    <h3 class="text-xl font-bold text-slate-900 mb-6">相关推荐</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      {{range $related}}
      <a href="{{.URL}}" class="block bg-white rounded-xl border border-slate-200 hover:shadow-md transition overflow-hidden group">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full aspect-video object-cover">{{end}}
        <div class="p-3 text-sm font-medium text-slate-800 group-hover:text-primary line-clamp-2">{{.Title}}</div>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}
</article>
{{end}}
{{include "js.html"}}
{{include "footer.html"}}