{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <div class="grid grid-cols-1 gap-8 lg:grid-cols-12">
    <article class="lg:col-span-8 rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
      {{if .Content.Img}}
      <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="h-[360px] w-full rounded-3xl object-cover">
      {{end}}
      <div class="mt-4 text-sm text-[var(--muted)]">{{ParseTime .Content.CreatedAt "2006-01-02"}}</div>
      <h1 class="mt-3 text-4xl font-semibold">{{.Content.Title}}</h1>
      <p class="mt-4 text-lg leading-8 text-[var(--muted)]">{{.Content.Description}}</p>
      <div class="mt-8 grid gap-4 md:grid-cols-2">
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">适用场景</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "scenario"}}</div></div>
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">核心功能</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "function"}}</div></div>
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">接入方式</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "access"}}</div></div>
        <div class="rounded-2xl bg-[var(--surface-soft)] p-5"><div class="text-sm text-[var(--muted)]">部署方式</div><div class="mt-1 text-lg font-medium">{{index .Content.Ext "deployment"}}</div></div>
      </div>
      {{if .Content.Albums}}
      <div class="mt-10">
        <h2 class="text-2xl font-semibold">产品相册</h2>
        <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {{range $index, $img := .Content.Albums}}
          <button type="button" class="js-album-open album-thumb block overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)]" data-album="{{$img}}" data-album-alt="{{$.Content.Title}} 图集 {{Add $index 1}}">
            <img src="{{$img}}" alt="{{$.Content.Title}}" class="h-56 w-full object-cover">
          </button>
          {{end}}
        </div>
      </div>
      {{end}}
      <div class="prose mt-8 max-w-none">{{.Content.Content|Str2Html}}</div>
      {{if or .Prev .Next}}
      <div class="mt-10 flex flex-col gap-4 border-t border-[var(--border)] pt-8 md:flex-row md:justify-between">
        {{if .Prev}}<a href="{{.Prev.URL}}" class="text-[var(--primary)]">上一篇：{{.Prev.Title}}</a>{{end}}
        {{if .Next}}<a href="{{.Next.URL}}" class="text-[var(--primary)] md:text-right">下一篇：{{.Next.Title}}</a>{{end}}
      </div>
      {{end}}
    </article>
    <div class="lg:col-span-4">
      {{include "sidebar.html"}}
    </div>
  </div>
  {{end}}
</main>
<div id="album-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/85 px-4 py-8 backdrop-blur-sm">
  <button type="button" id="album-modal-close" class="absolute right-4 top-4 rounded-full bg-white/10 px-4 py-2 text-sm font-medium text-white transition hover:bg-white/20">关闭</button>
  <div class="relative w-full max-w-6xl">
    <img id="album-modal-img" src="" alt="" class="mx-auto max-h-[88vh] w-auto max-w-full rounded-2xl object-contain shadow-2xl">
  </div>
</div>
{{include "footer.html"}}
{{include "js.html"}}