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

<main class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .Content}}
  <article>
    <header class="mb-8">
      <h1 class="text-3xl font-semibold tracking-tight md:text-4xl">{{.Content.Title}}</h1>
      {{if .Content.Description}}<p class="mt-3 max-w-3xl text-[color:var(--muted)]">{{.Content.Description}}</p>{{end}}
      <div class="mt-4 flex flex-wrap gap-2">
        {{if .Content.Ext}}{{if index .Content.Ext "badge"}}<span class="chip">{{index .Content.Ext "badge"}}</span>{{end}}{{end}}
        {{if .Content.Ext}}{{if index .Content.Ext "deploy"}}<span class="chip chip-soft">{{index .Content.Ext "deploy"}}</span>{{end}}{{end}}
      </div>
    </header>
    <div class="grid gap-8 lg:grid-cols-[1fr_1fr]">
      <div>
        {{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="aspect-[4/3] w-full rounded-3xl object-cover">{{end}}
      </div>
      <div class="panel space-y-4">
        <div class="detail-item"><span>部署方式</span><strong>{{index .Content.Ext "deploy"}}</strong></div>
        <div class="detail-item"><span>交付周期</span><strong>{{index .Content.Ext "cycle"}}</strong></div>
        <div class="detail-item"><span>适用行业</span><strong>{{index .Content.Ext "industry"}}</strong></div>
        <div class="detail-item"><span>集成能力</span><strong>{{index .Content.Ext "integration"}}</strong></div>
        <div class="detail-item"><span>服务方式</span><strong>{{index .Content.Ext "support"}}</strong></div>
        <a href="/contact" class="btn-primary w-full justify-center">咨询该产品</a>
      </div>
    </div>
    <section class="mt-8 panel article-body">{{.Content.Content|Str2Html}}</section>
  </article>
  {{end}}
</main>
{{include "footer.html"}}
{{include "js.html"}}