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

  <div class="mod-back"><a href="/shop/orders">← 我的订单</a><span style="margin:0 10px;color:var(--muted)">/</span><a href="/shop">返回晴空小铺</a></div>

  {{if .Data.Ok}}<div class="shop-alert shop-alert-ok">{{.Data.Ok}}</div>{{end}}
  {{if .Data.Err}}<div class="shop-alert shop-alert-err">{{.Data.Err}}</div>{{end}}

  <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="shop-price-box" style="align-items:flex-start;">
          <span class="shop-price-now" style="font-size:30px;">¥{{.Data.Order.Amount}}</span>
          <span class="shop-save-tag" style="margin-top:8px;">{{.Data.Order.StatusLabel}}</span>
        </div>
        <div class="mod-list" style="margin-top:14px;">
          <div class="mod-row"><span class="mod-row-label">订单号</span><span class="mod-row-val"><span class="shop-code">{{.Data.Order.OrderNo}}</span></span></div>
          <div class="mod-row"><span class="mod-row-label">下单时间</span><span class="mod-row-val">{{.Data.Order.CreatedLabel}}</span></div>
          {{if .Data.Order.PayTime}}<div class="mod-row"><span class="mod-row-label">支付时间</span><span class="mod-row-val">{{.Data.Order.PayTimeLabel}}{{if .Data.Order.PayChannel}} · {{.Data.Order.PayChannel}}{{end}}</span></div>{{end}}
          {{if .Data.Order.VerifyTime}}<div class="mod-row"><span class="mod-row-label">核销时间</span><span class="mod-row-val">{{.Data.Order.VerifyTimeLabel}} · {{.Data.Order.VerifiedBy}}</span></div>{{end}}
        </div>

        {{if eq .Data.Order.Status "pending"}}
        <form method="post" action="/shop/orders/{{.Data.Order.OrderNo}}/pay" style="margin-top:18px;">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <div class="shop-coupon-line" style="margin-bottom:10px;">
            <span class="shop-coupon-chip">当前为<strong>模拟支付</strong>，不产生真实扣款</span>
          </div>
          <button class="btn btn-primary" type="submit" style="width:100%;">模拟支付</button>
        </form>
        <form method="post" action="/shop/orders/{{.Data.Order.OrderNo}}/cancel" style="margin-top:10px;"
              onsubmit="return confirm('确定取消这个订单吗？取消后不可恢复。');">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <button class="btn btn-ghost" type="submit" style="width:100%;">取消订单</button>
        </form>
        {{else if eq .Data.Order.Status "paid"}}
        <div class="shop-buy-tip" style="margin-top:16px;">
          <span>支付已完成，等待交付。交付时请向店主出示核销码：</span>
        </div>
        <div style="margin-top:10px;text-align:center;padding:16px;border:1px dashed var(--brand-line);border-radius:10px;">
          <span class="shop-code" style="font-size:26px;letter-spacing:3px;">{{.Data.Order.VerifyCode}}</span>
          <div class="cell-sub" style="margin-top:6px;">店主在后台「输入核销码核销」即可完成交付</div>
        </div>
        {{else if eq .Data.Order.Status "redeemed"}}
        <div class="shop-buy-tip" style="margin-top:16px;">
          <span>订单已核销，感谢惠顾，欢迎再来逛晴空小铺。</span>
        </div>
        {{else}}
        <div class="shop-buy-tip" style="margin-top:16px;">
          <span>订单已取消。如果还想买，去橱窗重新下单就好。</span>
        </div>
        {{end}}
      </div>
    </aside>

    <!-- 右：商品明细 -->
    <div class="mod-main">
      <article class="mod-detail-head">
        <h1 class="mod-detail-title">收银台</h1>
        <div class="mod-detail-meta">
          <span>{{ico "bag"}} 订单 {{.Data.Order.OrderNo}}</span>
          <span>{{ico "clock"}} {{.Data.Order.CreatedLabel}}</span>
        </div>
      </article>

      <div class="mod-panel" style="padding:24px 26px;">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
          <div>
            <h3 style="margin:0 0 4px;">{{.Data.Order.ProductTitle}}</h3>
            <div class="cell-sub">{{.Data.Order.UnitLabel}}{{if .Data.Order.CouponCode}} · 优惠码 {{.Data.Order.CouponCode}}{{end}}</div>
          </div>
          <b style="font-size:18px;">¥{{.Data.Order.Amount}}</b>
        </div>
        <div class="shop-guide" style="margin-top:20px;padding-top:18px;border-top:1px solid var(--line);">
          <div class="mod-row"><span class="mod-row-label">单价</span><span class="mod-row-val">¥{{.Data.Order.ProductPrice}}</span></div>
          <div class="mod-row"><span class="mod-row-label">数量</span><span class="mod-row-val">{{.Data.Order.Quantity}}</span></div>
          {{if .Data.Order.CouponCode}}
          <div class="mod-row"><span class="mod-row-label">优惠码</span><span class="mod-row-val">{{.Data.Order.CouponCode}} · 抵扣 ¥{{.Data.Order.Discount}}</span></div>
          {{end}}
          {{if .Data.Order.Contact}}
          <div class="mod-row"><span class="mod-row-label">联系方式</span><span class="mod-row-val">{{.Data.Order.Contact}}</span></div>
          {{end}}
          <div class="mod-row"><span class="mod-row-label">应付金额</span><span class="mod-row-val"><b style="font-size:16px;">¥{{.Data.Order.Amount}}</b></span></div>
        </div>
      </div>
    </div>
  </div>
{{end}}