{{define "shop_detail"}}
  <link rel="stylesheet" href="/static/css/shop.css?v={{assetVer}}">

  <div class="mod-back"><a href="/shop">← 返回晴空小铺</a></div>

  <!-- 售后承诺条：买前就把售后说清楚 -->
  <div class="mod-trust">
    <b>晴空小铺 · 售后承诺</b>
    <span>7 天无理由退换</span>
    <span>售后 48 小时必响应</span>
    <span>物流单号全程可查</span>
    <span>描述不符，退换运费我们出</span>
  </div>

  <div class="mod-cols">
    <!-- 左：参数卡 -->
    <aside class="mod-sticky" style="grid-column:1;grid-row:1;">
      <div class="mod-panel">
        <h3 class="mod-panel-title">商品参数</h3>
        <div class="mod-card-top" style="margin-bottom:14px;">
          <span class="mod-chip">{{.Data.Product.Category}}</span>
          {{if le .Data.Product.Stock 0}}<span class="mod-chip hot">暂时缺货</span>
          {{else if le .Data.Product.Stock 5}}<span class="mod-chip warn">库存紧张</span>
          {{else}}<span class="mod-chip ok">现货充足</span>{{end}}
        </div>
        <div class="shop-price-box">
          <span class="shop-price-now">¥{{.Data.Product.FinalPrice}}</span>
          {{if .Data.Product.Discounted}}
          <span class="shop-price-origin">原价 ¥{{.Data.Product.Price}}</span>
          <span class="shop-save-tag">{{.Data.Product.SaveLabel}}</span>
          {{end}}
        </div>
        {{if .Data.Coupons}}
        <div class="shop-coupon-line">
          {{range .Data.Coupons}}<span class="shop-coupon-chip">可用优惠码：<b>{{.Code}}</b>（{{.Desc}}）</span>{{end}}
        </div>
        {{end}}
        <div class="mod-list">
          <div class="mod-row"><span class="mod-row-label">类别</span><span class="mod-row-val">{{.Data.Product.Category}}</span></div>
          <div class="mod-row">
            <span class="mod-row-label">库存</span>
            <span class="mod-row-val" style="display:flex;align-items:center;gap:8px;">
              <span class="shelf-bar" role="img" aria-label="库存剩余 {{.Data.Product.Stock}} 件（每格约 10 件，满格 100 件）">
                {{range .Data.Product.StockCells}}<i class="{{if eq . 1}}on{{end}}"></i>{{end}}
              </span>
              <b>剩 {{.Data.Product.Stock}} 件</b>
            </span>
          </div>
          <div class="mod-row"><span class="mod-row-label">到货时效</span><span class="mod-row-val">{{.Data.Product.Delivery}}</span></div>
          <div class="mod-row"><span class="mod-row-label">已售</span><span class="mod-row-val"><b>{{.Data.Product.Views}}</b> 件</span></div>
        </div>
        <button class="btn btn-primary" type="button" disabled style="width:100%;margin-top:18px;">本店暂为展示型，下单功能敬请期待</button>
      </div>
    </aside>

    <!-- 右：说明文 -->
    <div class="mod-main">
      {{if .Data.Product.Cover}}
      <div class="shop-detail-cover">
        <img src="{{.Data.Product.Cover}}" alt="{{.Data.Product.Title}}">
      </div>
      {{end}}
      <article class="mod-detail-head">
        <h1 class="mod-detail-title">{{.Data.Product.Title}}</h1>
        <div class="mod-detail-meta">
          <span>🕒 上架于 {{date .Data.Product.CreatedAt}}</span>
          <span>🛒 已售 {{.Data.Product.Views}} 件</span>
          {{template "fav_button" dict "VD" . "Type" "shop" "Key" .Data.Product.Slug "Title" .Data.Product.Title "URL" (printf "/shop/%s" .Data.Product.Slug)}}
        </div>
      </article>

      <div class="mod-panel" style="padding:28px 30px;">
        {{if .Data.Product.Summary}}
        <div class="alert" style="margin-bottom:24px;">{{.Data.Product.Summary}}</div>
        {{end}}
        <div class="article-body">{{.Data.Body}}</div>

        {{if .Data.BuyGuide}}
        <section class="shop-guide" style="margin-top:26px;">
          <h2>买前须知（写给第一次买的朋友）</h2>
          <div class="article-body">{{.Data.BuyGuide}}</div>
        </section>
        {{end}}
      </div>
    </div>
  </div>
{{end}}