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

<main class="mx-auto max-w-5xl px-4 py-10 lg:px-8">
  {{if .Content}}
  <article class="rounded-[2rem] border border-[var(--border)] bg-white p-6 shadow-sm md:p-10">
    <div class="grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
      <div>
        <h1 class="text-3xl font-semibold leading-tight">{{.Content.Title}}</h1>
        <p class="mt-4 text-sm leading-7 text-[var(--muted)]">{{.Content.Description}}</p>

        <div class="mt-6 grid gap-3 sm:grid-cols-2">
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">型号：</span>{{index .Content.Ext "model"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">规格：</span>{{index .Content.Ext "spec"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">材质/剂型：</span>{{index .Content.Ext "material"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">交付周期：</span>{{index .Content.Ext "delivery"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">适用场景：</span>{{index .Content.Ext "scenario"}}</div>
          <div class="rounded-2xl bg-[var(--surface-soft)] p-4 text-sm"><span class="font-medium">资质：</span>{{index .Content.Ext "certification"}}</div>
        </div>
      </div>

      <div>
        {{if .Content.Img}}
        <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-3xl border border-[var(--border)] object-cover">
        {{end}}
        {{if .Content.Price}}
        <div class="mt-5 rounded-3xl bg-[var(--surface-blue)] p-5">
          <div class="text-sm text-[var(--muted)]">参考零售价</div>
          <div class="mt-1 text-3xl font-semibold text-[var(--primary)]">¥{{printf "%.2f" .Content.Price}}</div>
        </div>
        {{end}}
      </div>
    </div>

    <section class="mt-10">
      <h2 class="text-2xl font-semibold">产品详情</h2>
      <div class="prose prose-slate mt-6 max-w-none rounded-3xl bg-[var(--surface-soft)] p-6 leading-8">
        {{.Content.Content|Str2Html}}
      </div>
    </section>

    {{if .Content.Tags}}
    <section class="mt-8">
      <h3 class="text-lg font-semibold">标签</h3>
      <div class="mt-3 flex flex-wrap gap-2">
        {{range .Content.Tags}}
        <a href="{{.URL}}" class="rounded-full bg-[var(--surface-soft)] px-3 py-1 text-xs text-[var(--muted)]">{{.Name}}</a>
        {{end}}
      </div>
    </section>
    {{end}}

    <section class="mt-10">
      <h3 class="text-2xl font-semibold">相关产品</h3>
      {{$related := Related .Content.Id 4}}
      {{if $related}}
      <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {{range $related}}
        <article class="overflow-hidden rounded-3xl border border-[var(--border)] bg-white shadow-sm">
          {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-36 w-full object-cover">{{end}}
          <div class="p-4">
            <h4 class="text-sm font-semibold leading-6"><a href="{{.URL}}">{{.Title}}</a></h4>
            <p class="mt-2 text-xs leading-6 text-[var(--muted)]">{{.Description}}</p>
          </div>
        </article>
        {{end}}
      </div>
      {{end}}
    </section>
  </article>
  {{end}}
</main>

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