{{include "header.html"}}
{{if .Content}}<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"{{.Content.Title}}","description":"{{.Content.Description}}","image":"{{.Content.Img}}","author":{"@type":"Person","name":"{{default .Content.Author .Content.User.Nickname}}"},"publisher":{"@type":"Organization","name":"{{if .Site}}{{.Site.Title}}{{else}}VVCMS{{end}}"},"datePublished":"{{ParseTime .Content.CreatedAt "2006-01-02T15:04:05Z07:00"}}","dateModified":"{{ParseTime .Content.UpdateAt "2006-01-02T15:04:05Z07:00"}}"}</script>{{end}}
{{include "nav.html"}}
{{include "bread.html"}}

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <article class="lg:col-span-2">
      <div class="rounded-3xl border border-steel-200 bg-white p-6 md:p-10 shadow-soft">
        <h1 class="text-2xl md:text-3xl font-semibold">{{.Content.Title}}</h1>
        <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-steel-500">
          <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
          <span>{{.Content.Views}} 浏览</span>
          <span>{{default .Content.Author .Content.User.Nickname}}</span>
          {{if .Content.ColumnURL}}<a class="hover:text-amber2-700" href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a>{{end}}
        </div>

        {{if .Content.Img}}
          <div class="mt-6 rounded-3xl overflow-hidden border border-steel-200 bg-steel-50">
            <img class="w-full h-72 object-cover" src="{{.Content.Img}}" alt="{{.Content.Title}}" />
          </div>
        {{end}}

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

        {{if .Content.Tags}}
          <div class="mt-8 flex flex-wrap gap-2">
            {{range .Content.Tags}}
              <a href="{{.URL}}" class="px-3 py-1.5 rounded-full text-xs bg-steel-50 border border-steel-200 text-steel-700 hover:bg-amber2-50 hover:border-amber2-200">#{{.Name}}</a>
            {{end}}
          </div>
        {{end}}
      </div>

      {{if or .Prev .Next}}
        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
          {{if .Prev}}
            <a href="{{.Prev.URL}}" class="rounded-3xl border border-steel-200 bg-white p-5 shadow-soft hover:border-amber2-200">
              <div class="text-xs text-steel-500">上一篇</div>
              <div class="mt-1 text-sm font-semibold line-clamp-2">{{.Prev.Title}}</div>
            </a>
          {{end}}
          {{if .Next}}
            <a href="{{.Next.URL}}" class="rounded-3xl border border-steel-200 bg-white p-5 shadow-soft hover:border-amber2-200">
              <div class="text-xs text-steel-500">下一篇</div>
              <div class="mt-1 text-sm font-semibold line-clamp-2">{{.Next.Title}}</div>
            </a>
          {{end}}
        </div>
      {{end}}

      {{$related := Related .Content.Id 6}}
      {{if $related}}
      <section class="mt-6 rounded-3xl border border-steel-200 bg-white p-6 shadow-soft">
        <div class="text-sm font-semibold">相关推荐</div>
        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
          {{range $related}}
            <a href="{{.URL}}" class="rounded-2xl border border-steel-200 bg-steel-50 p-4 hover:bg-amber2-50 hover:border-amber2-200">
              <div class="text-sm font-medium line-clamp-2">{{.Title}}</div>
              <div class="mt-2 text-xs text-steel-500">{{ParseTime .CreatedAt "2006-01-02"}}{{if .Views}} · {{.Views}} 阅读{{end}}</div>
            </a>
          {{end}}
        </div>
      </section>
      {{end}}
    </article>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

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