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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-4 text-sm text-slate-500 sm:px-6 lg:px-8">
    <a href="/" class="hover:text-primary">首页</a>
    {{range .Nav}} <span class="px-2">/</span> <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>{{end}}
    <span class="px-2">/</span>
    <span class="text-slate-900">{{.Content.Title}}</span>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_300px] lg:items-start">
    <article>
      <header class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <div class="text-sm text-slate-500">{{.Content.ColumnName}} · {{ParseTime .Content.CreatedAt "2006-01-02"}}</div>
        <h1 class="mt-3 text-3xl font-semibold">{{.Content.Title}}</h1>
        {{if .Content.Description}}<p class="mt-4 text-base leading-8 text-slate-600">{{.Content.Description}}</p>{{end}}
      </header>
      {{if .Content.Img}}
      <div class="mt-6 overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200">
        <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full object-cover">
      </div>
      {{end}}
      <div class="prose prose-slate mt-8 max-w-none rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        {{.Content.Content|Str2Html}}
      </div>
      {{if .Content.Tags}}
      <div class="mt-8 flex flex-wrap gap-2">
        {{range .Content.Tags}}
        <a href="{{.URL}}" class="rounded-full bg-white px-3 py-1 text-sm text-slate-600 shadow-sm ring-1 ring-slate-200 hover:text-primary">{{.Name}}</a>
        {{end}}
      </div>
      {{end}}

      {{if or .Prev .Next}}
      <div class="mt-8 grid gap-4 md:grid-cols-2">
        {{if .Prev}}
        <a href="{{.Prev.URL}}" class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
          <div class="text-sm text-slate-500">上一篇</div>
          <div class="mt-2 text-base font-semibold text-slate-900">{{.Prev.Title}}</div>
          {{if .Prev.Description}}<p class="mt-2 text-sm leading-6 text-slate-600">{{StrLimit .Prev.Description 80 "…"}}</p>{{end}}
        </a>
        {{end}}
        {{if .Next}}
        <a href="{{.Next.URL}}" class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md md:text-right">
          <div class="text-sm text-slate-500">下一篇</div>
          <div class="mt-2 text-base font-semibold text-slate-900">{{.Next.Title}}</div>
          {{if .Next.Description}}<p class="mt-2 text-sm leading-6 text-slate-600">{{StrLimit .Next.Description 80 "…"}}</p>{{end}}
        </a>
        {{end}}
      </div>
      {{end}}
    </article>

    {{if index .ThemesExt "show_sidebar"}}
    {{include "sidebar.html"}}
    {{end}}
  </div>
</main>
{{end}}

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