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

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

  <div class="mod-detail-head" style="margin-bottom:18px;">
    <h1 class="mod-detail-title">我的订单</h1>
    <div class="mod-detail-meta">
      <span>{{ico "bag"}} {{.Data.Current}} 的最近订单</span>
      <span>下单后可在收银页模拟支付，交付时出示核销码</span>
    </div>
  </div>

  {{if .Data.Orders}}
  <div style="display:grid;gap:14px;">
    {{range .Data.Orders}}
    <a class="mod-panel" href="/shop/orders/{{.OrderNo}}" style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 22px;text-decoration:none;color:inherit;">
      <div style="min-width:0;">
        <h3 style="margin:0 0 4px;font-size:16px;">{{.ProductTitle}}</h3>
        <div class="cell-sub" style="margin-top:2px;">{{.UnitLabel}}{{if .CouponCode}} · 优惠码 {{.CouponCode}}{{end}}</div>
        <div class="cell-sub" style="margin-top:2px;">{{.CreatedLabel}} · <span class="shop-code">{{.OrderNo}}</span></div>
      </div>
      <div style="text-align:right;flex-shrink:0;">
        <div style="font-size:18px;font-weight:700;">¥{{.Amount}}</div>
        <div style="margin-top:6px;">
          {{if eq .Status "pending"}}<span class="shop-state-off">待支付</span>
          {{else if eq .Status "paid"}}<span class="shop-state-on">已支付 · 待核销</span>
          {{else if eq .Status "redeemed"}}<span class="shop-state-on">已核销</span>
          {{else}}<span class="shop-state-off">已取消</span>{{end}}
        </div>
      </div>
    </a>
    {{end}}
  </div>
  <div style="text-align:center;margin-top:18px;color:var(--muted);">
    <span>更多历史订单请留意 —— 小店先展示最近 50 单。</span>
  </div>
  {{else}}
  <div class="win-empty">
    <h3>还没有订单</h3>
    <p>去橱窗挑一件喜欢的，明码标价、库存透明，下单即可生成待支付订单。</p>
    <a class="win-btn win-btn-primary" href="/shop">去逛逛</a>
  </div>
  {{end}}
{{end}}