{{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-7xl px-4 py-12 sm:px-6 lg:px-8">
  <div class="grid gap-10 lg:grid-cols-3">
    <div class="lg:col-span-2">
      <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}}
          {{if .Content.Views}}<span>阅读：{{.Content.Views}}</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>
    </div>
    <div>
      {{if index .ThemesExt "show_sidebar"}}
      {{include "sidebar.html"}}
      {{end}}
    </div>
  </div>
</article>
{{end}}

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