{{include "header.html"}}
{{include "nav.html"}}
{{if .Content}}
{{$brand := index .Content.Ext "brand"}}
{{$category := index .Content.Ext "category"}}
{{$sku := index .Content.Ext "sku"}}
{{$material := index .Content.Ext "material"}}
{{$spec := index .Content.Ext "spec"}}
{{$color := index .Content.Ext "color"}}
{{$status := index .Content.Ext "stock_status"}}
{{$badge := index .Content.Ext "badge"}}

<section class="detail-top">
  <div class="wrap breadcrumb"><a href="/">首页</a><span>/</span><a href="{{.Content.ColumnURL}}">{{.Content.ColumnName}}</a><span>/</span><b>{{.Content.Title}}</b></div>
  <div class="wrap detail-grid">
    <div>
      <div class="main-photo" id="mainPhoto">{{if .Content.Img}}<img src="{{.Content.Img}}" alt="{{.Content.Title}}">{{end}}</div>
      <div class="thumb-list">
        {{if .Content.Img}}<button class="thumb active" data-src="{{.Content.Img}}"><img src="{{.Content.Img}}" alt=""></button>{{end}}
        {{range .Content.Albums}}<button class="thumb" data-src="{{.}}"><img src="{{.}}" alt=""></button>{{end}}
      </div>
    </div>
    <aside class="detail-summary">
      {{if $badge}}<span class="badge">{{$badge}}</span>{{end}}
      <p class="eyebrow">{{$brand}} · {{$category}}</p>
      <h1>{{.Content.Title}}</h1>
      <p>{{.Content.Description}}</p>
      <div class="detail-price">{{if .Content.Price}}参考价 ¥{{.Content.Price}}{{else}}价格面议{{end}}</div>
      <dl class="spec-table">
        {{if $sku}}<div><dt>货号</dt><dd>{{$sku}}</dd></div>{{end}}
        {{if $material}}<div><dt>材质</dt><dd>{{$material}}</dd></div>{{end}}
        {{if $spec}}<div><dt>规格</dt><dd>{{$spec}}</dd></div>{{end}}
        {{if $color}}<div><dt>颜色</dt><dd>{{$color}}</dd></div>{{end}}
        {{if $status}}<div><dt>展示状态</dt><dd>{{$status}}</dd></div>{{end}}
        {{if .Content.Origin}}<div><dt>来源场景</dt><dd>{{.Content.Origin}}</dd></div>{{end}}
      </dl>
      <div class="detail-actions">
        <a class="btn primary" href="/message">咨询该商品</a>
        <a class="btn secondary" href="/contact">联系顾问</a>
      </div>
      <p class="note">本模板不提供购物车、在线支付或订单提交，参考价仅用于商品展示。</p>
    </aside>
  </div>
</section>

<section class="section soft">
  <div class="wrap prose">
    <h2>商品详情</h2>
    <div>{{.Content.Content|Str2Html}}</div>
    {{if .Content.Tags}}<div class="tag-list">{{range .Content.Tags}}<a href="{{.URL}}">{{.Name}}</a>{{end}}</div>{{end}}
  </div>
</section>

{{$related := Related .Content.Id 4}}
{{if $related}}
<section class="section">
  <div class="wrap section-head row"><div><p class="eyebrow">相关推荐</p><h2>继续查看同类商品</h2></div><a class="text-link" href="{{.Content.ColumnURL}}">返回商品中心</a></div>
  <div class="wrap article-grid four">
    {{range $related}}<a class="article-card" href="{{.URL}}">{{if .Img}}<img src="{{.Img}}" alt="{{.Title}}">{{end}}<strong>{{.Title}}</strong><p>{{.Description}}</p></a>{{end}}
  </div>
</section>
{{end}}

<div class="wrap prev-next">
  {{if .Prev}}<a href="{{.Prev.URL}}"><span>上一件</span>{{.Prev.Title}}</a>{{else}}<span></span>{{end}}
  {{if .Next}}<a href="{{.Next.URL}}" class="right"><span>下一件</span>{{.Next.Title}}</a>{{else}}<span></span>{{end}}
</div>
{{end}}
{{include "footer.html"}}
{{include "js.html"}}