<!doctype html>
<html lang="zh-cn">

<head>
  {{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}}
</head>

<body class="bg-creative-50 text-creative-900">
  {{include "nav.html"}}
  {{include "bread.html"}}

  <main class="container mx-auto px-4 py-12">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div class="md:col-span-2">
        <article class="bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
          {{if .Content.Img}}
          <div class="overflow-hidden">
            <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-64 sm:h-80 object-cover" />
          </div>
          {{end}}
          <div class="p-6 sm:p-8">
            <h1 class="text-2xl sm:text-3xl font-bold text-creative-900 leading-tight">{{.Content.Title}}</h1>
            <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-creative-500">
              <span class="inline-flex items-center gap-1"><i class="fa-regular fa-calendar"></i>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
              <span class="inline-flex items-center gap-1"><i class="fa-regular fa-eye"></i>{{.Content.Views}}</span>
              {{if .Content.ColumnURL}}
              <a href="{{.Content.ColumnURL}}" class="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-creative-50 text-creative-700 hover:bg-creative-100"><i class="fa-regular fa-folder"></i>{{.Content.ColumnName}}</a>
              {{end}}
              {{if .Content.Author}}
              <span class="inline-flex items-center gap-1"><i class="fa-regular fa-user"></i>{{default .Content.Author .Content.User.Nickname}}</span>
              {{end}}
            </div>

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

            {{if .Content.Tags}}
            <div class="mt-10 pt-8 border-t border-creative-100">
              <div class="text-sm font-semibold text-creative-900 mb-3">标签</div>
              <div class="flex flex-wrap gap-2">
                {{range .Content.Tags}}
                <a href="{{.URL}}" class="px-4 py-2 rounded-full text-sm bg-creative-50 text-creative-700 hover:bg-creative-100 transition-colors">#{{.Name}}</a>
                {{end}}
              </div>
            </div>
            {{end}}
          </div>
        </article>

        {{if or .Prev .Next}}
        <section class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="bg-white rounded-2xl border border-creative-100 p-5">
            {{if .Prev}}
            <div class="text-xs text-creative-500">上一篇</div>
            <a href="{{.Prev.URL}}" class="mt-2 block text-sm font-medium text-creative-900 hover:text-creative-600 line-clamp-2">{{.Prev.Title}}</a>
            {{else}}
            <div class="text-xs text-creative-500">上一篇</div>
            <div class="mt-2 text-sm text-creative-400">暂无</div>
            {{end}}
          </div>
          <div class="bg-white rounded-2xl border border-creative-100 p-5">
            {{if .Next}}
            <div class="text-xs text-creative-500">下一篇</div>
            <a href="{{.Next.URL}}" class="mt-2 block text-sm font-medium text-creative-900 hover:text-creative-600 line-clamp-2">{{.Next.Title}}</a>
            {{else}}
            <div class="text-xs text-creative-500">下一篇</div>
            <div class="mt-2 text-sm text-creative-400">暂无</div>
            {{end}}
          </div>
        </section>
        {{end}}

        {{$related := Related .Content.Id 6}}
        {{if $related}}
        <section class="mt-8 bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
          <div class="p-6 sm:p-8">
            <div class="flex items-center justify-between gap-3 mb-6">
              <div class="text-lg font-semibold text-creative-900">相关推荐</div>
              {{if .Content.ColumnURL}}
              <a href="{{.Content.ColumnURL}}" class="text-sm text-creative-600 hover:text-creative-900">返回列表</a>
              {{end}}
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
              {{range $related}}
              <a href="{{.URL}}" class="group block rounded-xl border border-creative-100 bg-white overflow-hidden hover:shadow-creative transition-shadow">
                <div class="relative overflow-hidden">
                  {{if .Img}}
                  <img src="{{.Img}}" alt="{{.Title}}" class="w-full h-40 object-cover group-hover:scale-105 transition-transform duration-300" />
                  {{else}}
                  <div class="w-full h-40 bg-creative-100"></div>
                  {{end}}
                  <div class="absolute inset-0 bg-gradient-to-t from-creative-900/60 to-transparent"></div>
                  <div class="absolute left-0 right-0 bottom-0 p-4">
                    <div class="text-white font-semibold line-clamp-1">{{.Title}}</div>
                    <div class="mt-1 text-white/80 text-xs">{{ParseTime .CreatedAt "2006-01-02"}}</div>
                  </div>
                </div>
              </a>
              {{end}}
            </div>
          </div>
        </section>
        {{end}}

        {{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
        <section class="mt-8 bg-white rounded-2xl border border-creative-100 shadow-card overflow-hidden">
          <div class="p-6 sm:p-8">
            <div class="text-lg font-semibold text-creative-900 mb-6">评论</div>
            <div class="space-y-4">
              {{range $k, $v := ContentComment .Content.Id}}
              {{if eq $v.Status 1}}
              <div class="p-4 rounded-xl border border-creative-100 bg-creative-50">
                <div class="flex items-start gap-3">
                  <div class="w-10 h-10 rounded-full bg-gradient-to-br from-creative-400 to-navy-400 flex items-center justify-center text-xs font-semibold text-white">{{$v.Nickname}}</div>
                  <div class="flex-1">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                      <div class="text-sm font-medium text-creative-900">{{$v.Nickname}}</div>
                      <div class="text-xs text-creative-500">{{ParseTime $v.CreatedAt "2006-01-02"}}</div>
                    </div>
                    <div class="mt-2 text-sm text-creative-700 whitespace-pre-wrap">{{$v.Content}}</div>
                  </div>
                </div>
              </div>
              {{end}}
              {{end}}
            </div>
          </div>
        </section>
        {{end}}
      </div>

      <div class="md:col-span-1">
        {{include "sidebar.html"}}
      </div>
    </div>
  </main>

  {{include "footer.html"}}
  {{include "js.html"}}
</body>

</html>
