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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-red-100 bg-stone-100 py-4">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-center gap-2 text-sm text-stone-600">
      <a href="/" class="hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-stone-400">/</span>
      <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>
      {{end}}
      <span class="text-stone-400">/</span>
      <span class="text-stone-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<article class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
  <header class="mb-8">
    <h1 class="text-4xl font-bold text-stone-900">{{.Content.Title}}</h1>
    <div class="mt-4 flex flex-wrap gap-4 text-sm text-stone-500">
      <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="text-primary hover:underline">{{.Content.ColumnName}}</a></span>{{end}}
    </div>
  </header>

  {{if .Content.Img}}
  <div class="mb-8 overflow-hidden rounded-2xl">
    <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full object-cover">
  </div>
  {{end}}

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

  {{if .Content.Tags}}
  <div class="mt-8 border-t border-stone-200 pt-8">
    <h3 class="text-lg font-semibold text-stone-900">标签</h3>
    <div class="mt-3 flex flex-wrap gap-2">
      {{range .Content.Tags}}
      <a href="{{.URL}}" class="rounded-full bg-stone-100 px-3 py-1 text-sm text-stone-700 hover:bg-stone-200">{{.Name}}</a>
      {{end}}
    </div>
  </div>
  {{end}}

  <div class="mt-8 flex items-center justify-between border-t border-stone-200 pt-8">
    {{if .Prev}}
    <a href="{{.Prev.URL}}" class="max-w-[48%] text-sm text-stone-600 hover:text-primary">
      <div class="mb-1 text-xs text-stone-400">上一篇</div>
      <div class="font-medium text-stone-900">{{.Prev.Title}}</div>
    </a>
    {{end}}
    {{if .Next}}
    <a href="{{.Next.URL}}" class="max-w-[48%] text-right text-sm text-stone-600 hover:text-primary">
      <div class="mb-1 text-xs text-stone-400">下一篇</div>
      <div class="font-medium text-stone-900">{{.Next.Title}}</div>
    </a>
    {{end}}
  </div>
</article>
{{end}}

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