{{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-8 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-start">
    <article class="space-y-8">
      <section class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
        <h1 class="text-3xl font-semibold">{{.Content.Title}}</h1>
        <div class="mt-2 flex flex-wrap items-center gap-2 text-sm text-slate-500">
          {{if .Content.Author}}<span>发布人：{{.Content.Author}}</span>{{end}}
          <span>·</span>
          <span>浏览：{{default .Content.Views 0}}</span>
          <span>·</span>
          <span>发布时间：{{ParseTime .Content.CreatedAt "2006-01-02 15:04:05"}}</span>
        </div>

        <div class="mt-4 border-t border-slate-200 pt-4 pb-6">
          <div class="prose prose-slate mt-6 max-w-none">
            {{.Content.Content|Str2Html}}
          </div>
        </div>
      </section>

      {{if .Content.Tags}}
      <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <div class="text-sm font-medium text-slate-500">相关标签</div>
        <div class="mt-3 flex flex-wrap gap-2">
          {{range .Content.Tags}}
          <a href="{{.URL}}" class="rounded-full bg-slate-50 px-3 py-1 text-sm text-slate-600 ring-1 ring-slate-200 hover:text-primary">{{.Name}}</a>
          {{end}}
        </div>
      </div>
      {{end}}

      {{if or .Prev .Next}}
      <div class="grid gap-4 rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200 md:grid-cols-2">
        <div class="space-y-2">
          <div class="text-sm font-medium text-slate-500">上一篇</div>
          {{if .Prev}}
          <a href="{{.Prev.URL}}" class="block text-base font-semibold leading-7 text-slate-900 hover:text-primary">{{.Prev.Title}}</a>
          {{if .Prev.Description}}<p class="text-sm leading-6 text-slate-500">{{StrLimit .Prev.Description 80 "…"}}</p>{{end}}
          {{else}}
          <div class="text-sm text-slate-400">没有更多内容了</div>
          {{end}}
        </div>
        <div class="space-y-2 md:text-right">
          <div class="text-sm font-medium text-slate-500">下一篇</div>
          {{if .Next}}
          <a href="{{.Next.URL}}" class="block text-base font-semibold leading-7 text-slate-900 hover:text-primary">{{.Next.Title}}</a>
          {{if .Next.Description}}<p class="text-sm leading-6 text-slate-500">{{StrLimit .Next.Description 80 "…"}}</p>{{end}}
          {{else}}
          <div class="text-sm text-slate-400">已经是最后一篇</div>
          {{end}}
        </div>
      </div>
      {{end}}

      {{if Related .Content.Id 6}}
      <section class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-slate-200">
        <h2 class="text-xl font-semibold">相关推荐</h2>
        <div class="mt-4 grid gap-4 md:grid-cols-2">
          {{range Related .Content.Id 6}}
          <a href="{{.URL}}" class="group flex gap-4 rounded-lg border border-slate-200 p-4 transition hover:border-primary hover:shadow-sm">
            <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-20 w-20 shrink-0 rounded-lg object-cover">
            <div class="min-w-0">
              <h3 class="truncate text-base font-semibold group-hover:text-primary">{{.Title}}</h3>
              {{if .Description}}<p class="mt-2 text-sm leading-6 text-slate-500">{{StrLimit .Description 70 "…"}}</p>{{end}}
            </div>
          </a>
          {{end}}
        </div>
      </section>
      {{end}}
    </article>

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

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