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

{{if .Content}}
<article class="max-w-[1080px] mx-auto px-6 lg:px-10 py-14 lg:py-16">
  <div class="text-xs tracking-wider2 text-gray-500 mb-3">
    <a href="/">首页</a>
    {{if .Content.ColumnURL}} / <a href="{{.Content.ColumnURL}}" class="hover:text-ink">{{.Content.ColumnName}}</a>{{end}}
  </div>

  <header class="mb-10">
    <h1 class="font-serif text-3xl md:text-5xl text-ink leading-tight mb-5">{{.Content.Title}}</h1>
    <div class="flex flex-wrap gap-x-5 gap-y-2 text-xs text-gray-500">
      <span>{{ParseTime .Content.CreatedAt "2006.01.02"}}</span>
      {{if .Content.Author}}<span>· {{.Content.Author}}</span>{{end}}
      {{if .Content.Views}}<span>· 阅读 {{.Content.Views}}</span>{{end}}
    </div>
  </header>

  {{if .Content.Img}}
  <div class="mb-10 aspect-[3/2] overflow-hidden bg-sand">
    <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full h-full object-cover">
  </div>
  {{end}}

  <div class="prose prose-lg max-w-none prose-headings:font-serif prose-headings:text-ink prose-p:text-gray-700 prose-p:leading-relaxed">
    {{.Content.Content|Str2Html}}
  </div>

  {{if .Content.Tags}}
  <div class="mt-10 flex flex-wrap gap-2">
    {{range .Content.Tags}}<a href="{{.URL}}" class="text-xs tracking-wide text-gray-500 px-3 py-1 border border-sand hover:border-ink">#{{.Name}}</a>{{end}}
  </div>
  {{end}}

  <div class="flex flex-col md:flex-row justify-between gap-4 mt-12 pt-6 border-t border-sand">
    {{if .Prev}}<a href="{{.Prev.URL}}" class="text-sm text-gray-500 hover:text-ink">← 上一篇 · {{.Prev.Title}}</a>{{else}}<span></span>{{end}}
    {{if .Next}}<a href="{{.Next.URL}}" class="text-sm text-gray-500 hover:text-ink md:text-right">下一篇 · {{.Next.Title}} →</a>{{else}}<span></span>{{end}}
  </div>

  {{$related := Related .Content.Id 4}}
  {{if $related}}
  <section class="mt-16">
    <div class="text-xs tracking-wider2 text-gray-500 mb-4">RELATED</div>
    <h3 class="font-serif text-2xl text-ink mb-6">相关阅读</h3>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-5">
      {{range $related}}
      <a href="{{.URL}}" class="group block">
        <div class="aspect-[9/16] overflow-hidden bg-sand mb-3">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="w-full h-full object-cover group-hover:scale-[1.03] transition duration-500">{{end}}
        </div>
        <h4 class="text-sm text-ink leading-snug group-hover:text-primary">{{.Title}}</h4>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}

  <section class="mt-16 bg-ink text-mist p-10">
    <div class="text-xs tracking-wider2 text-accent mb-3">INQUIRY</div>
    <h3 class="font-serif text-2xl md:text-3xl mb-4">对这篇内容相关的产品感兴趣?</h3>
    <p class="text-gray-300 mb-6 max-w-xl">留下品牌、起订量与目标交期,我们将在 1 个工作日内回复。</p>
    <a href="/inquiry" class="inline-block px-8 py-3 bg-accent text-ink text-sm tracking-wider2 hover:bg-mist transition">提交询盘 →</a>
  </section>
</article>
{{end}}

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