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

<main class="enterprise-shell enterprise-page">
  {{if index .ThemesExt "show_breadcrumb"}}
  {{if .Nav}}
  <div class="enterprise-section enterprise-breadcrumb-tight">
    <div class="enterprise-breadcrumb-trail enterprise-card-gap-compact">
      <a href="/" class="enterprise-text-primary enterprise-text-no-decoration">首页</a>
      {{range .Nav}}
      <span class="enterprise-muted">/</span>
      <a href="{{.URL}}" class="enterprise-text-no-decoration">{{.Name}}</a>
      {{end}}
      <span class="enterprise-muted">/</span>
      <span>{{.Content.Title}}</span>
    </div>
  </div>
  {{end}}
  {{end}}

  {{if .Content}}
  <article class="enterprise-section">
    <div class="enterprise-grid enterprise-grid-2 enterprise-align-start">
      <div class="enterprise-card">
        <img src="{{if .Content.Img}}{{.Content.Img}}{{else}}https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1400&q=80{{end}}" alt="{{.Content.Title}}" class="enterprise-min-h-560 enterprise-hero-cover">
      </div>
      <div>
        <div class="enterprise-kicker">Product detail</div>
        <h1 class="enterprise-title enterprise-spacing-top-sm">{{.Content.Title}}</h1>
        {{if .Content.Price}}<div class="enterprise-price-large">¥{{printf "%.2f" .Content.Price}}</div>{{end}}
        {{if .Content.Ext}}
        {{$spec := index .Content.Ext "spec"}}
        {{if $spec}}
        <div class="enterprise-spacing-bottom-md">
          <div class="enterprise-spec-title">规格参数</div>
          <div class="enterprise-muted enterprise-line-185">{{$spec}}</div>
        </div>
        {{end}}
        {{$model := index .Content.Ext "model"}}
        {{$version := index .Content.Ext "version"}}
        {{$delivery := index .Content.Ext "delivery"}}
        {{$warranty := index .Content.Ext "warranty"}}
        {{$support := index .Content.Ext "support"}}
        {{if or $model $version $delivery $warranty $support}}
        <div class="enterprise-card enterprise-padding-xl">
          <div class="enterprise-card-detail-grid">
            {{if $model}}<div class="enterprise-card-meta"><span class="enterprise-muted">型号</span><span>{{$model}}</span></div>{{end}}
            {{if $version}}<div class="enterprise-card-meta"><span class="enterprise-muted">版本</span><span>{{$version}}</span></div>{{end}}
            {{if $delivery}}<div class="enterprise-card-meta"><span class="enterprise-muted">交付周期</span><span>{{$delivery}}</span></div>{{end}}
            {{if $warranty}}<div class="enterprise-card-meta"><span class="enterprise-muted">质保</span><span>{{$warranty}}</span></div>{{end}}
            {{if $support}}<div class="enterprise-card-meta"><span class="enterprise-muted">技术支持</span><span>{{$support}}</span></div>{{end}}
          </div>
        </div>
        {{end}}
        {{end}}
        <p class="enterprise-muted enterprise-line-19 enterprise-section-desc">{{.Content.Description}}</p>
      </div>
    </div>

    <div class="enterprise-margin-top-xl">
      <div class="enterprise-kicker">Content</div>
      <h2 class="enterprise-font-xxl-tight enterprise-spacing-bottom-md enterprise-spacing-top-sm">产品详情</h2>
      <div class="prose prose-lg max-w-none">
        {{.Content.Content|Str2Html}}
      </div>
    </div>

    {{if .Content.Tags}}
    <div class="enterprise-related-section">
      <div class="enterprise-spec-title enterprise-spacing-bottom-md">标签</div>
      <div class="enterprise-flex-row enterprise-flex-wrap enterprise-card-gap">
        {{range .Content.Tags}}
        <a class="enterprise-pill enterprise-pill-soft enterprise-text-no-decoration" href="{{.URL}}">{{.Name}}</a>
        {{end}}
      </div>
    </div>
    {{end}}

    <div class="enterprise-related-section">
      <div class="enterprise-kicker">Related</div>
      <h2 class="enterprise-font-xxl-tight enterprise-spacing-bottom-md enterprise-spacing-top-sm">相关产品</h2>
      {{$related := Related .Content.Id 4}}
      {{if $related}}
      <div class="enterprise-grid enterprise-grid-4">
        {{range $related}}
        <article class="enterprise-card">
          <a href="{{.URL}}">
            <img src="{{if .Img}}{{.Img}}{{else}}https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80{{end}}" alt="{{.Title}}" class="enterprise-min-h-180 enterprise-hero-cover">
          </a>
          <div class="enterprise-card-body">
            <h3 class="enterprise-spacing-top-none"><a href="{{.URL}}" class="enterprise-text-no-decoration">{{.Title}}</a></h3>
          </div>
        </article>
        {{end}}
      </div>
      {{end}}
    </div>
  </article>
  {{end}}
</main>

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