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

  <!-- 白日市集 Hero：帆布棚顶 + 木摊架 + 价签 -->
  <header class="bazaar-hero">
    <div class="bazaar-hero-awning" aria-hidden="true">
      <span></span><span></span><span></span><span></span><span></span><span></span>
    </div>
    <p class="bazaar-hero-eyebrow">{{ico "sun"}} DAY MARKET · 白日市集</p>
    <h1 class="bazaar-hero-title">市集开张，明码标价，欢迎还价</h1>
    <ul class="bazaar-hero-tags">
      <li><b>{{len .Data.Products}}</b> 个摊位</li>
      <li><b>{{len .Data.Categories}}</b> 类货品</li>
      <li><b>不催单</b> 没有倒计时</li>
    </ul>
    <span class="bazaar-open-badge">{{ico "bag"}} 营业中</span>
  </header>

  <!-- 上架：摊主登记 -->
  {{if .Data.Err}}<div class="win-post-err">{{.Data.Err}}</div>{{end}}
  <section class="bazaar-booth">
    <h3 class="bazaar-booth-title">{{ico "tag"}} 支个摊，把好物摆上来</h3>
    {{if .Data.CurrentUser}}
    <form method="post" action="/shop/publish" class="shop-publish">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <input type="hidden" name="cover" value="" data-shop-cover-value>

      <section class="shop-card">
        <h4 class="shop-card-title">商品图（主图）</h4>
        <p class="shop-card-note">挑一张最像实物的图，上传时自动压缩；不传也行，会用商品名首字做占位图。</p>
        <input type="file" accept="image/*" hidden data-shop-cover-file>
        <div class="shop-cover-pick">
          <button type="button" class="shop-btn" data-shop-cover-pick>选择商品图</button>
          <span class="shop-cover-tip" data-shop-cover-tip>支持 JPG / PNG / GIF，单张不超过 25MB</span>
        </div>
        <div class="shop-cover-preview" data-shop-cover-preview hidden>
          <img alt="主图预览" data-shop-cover-img>
          <div class="shop-cover-ops">
            <button type="button" class="shop-btn shop-btn-ghost" data-shop-cover-change>更换</button>
            <button type="button" class="shop-btn shop-btn-ghost" data-shop-cover-remove>移除</button>
          </div>
        </div>
      </section>

      <section class="shop-card">
        <h4 class="shop-card-title">基本信息</h4>
        <div class="shop-grid">
          <label class="shop-field shop-field-wide">
            <span class="shop-label">商品名称<em>必填</em></span>
            <input type="text" name="title" placeholder="如「晴空手账本 · 2026 夏日限定」" maxlength="80" required>
          </label>
          <label class="shop-field">
            <span class="shop-label">分类<em>必填</em></span>
            <select name="category" required>
              <option value="">选分类…</option>
              {{range .Data.Categories}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
            </select>
          </label>
          <label class="shop-field">
            <span class="shop-label">原价（元）<em>必填</em></span>
            <input type="text" name="price" placeholder="如 39.00" maxlength="12" required>
          </label>
          <label class="shop-field">
            <span class="shop-label">优惠价（元）<em>可不填</em></span>
            <input type="text" name="sale_price" placeholder="打折才填，如 29.00" maxlength="12">
          </label>
          <label class="shop-field">
            <span class="shop-label">库存（件）<em>必填</em></span>
            <input type="number" name="stock" placeholder="还剩几件" min="0" max="999999" required>
          </label>
        </div>
      </section>

      <section class="shop-card">
        <h4 class="shop-card-title">详情</h4>
        <label class="shop-field">
          <span class="shop-label">一句话摘要<em>必填</em></span>
          <input type="text" name="summary" placeholder="把让人心动的那一点先说出来" maxlength="120" required>
        </label>
        <label class="shop-field">
          <span class="shop-label">商品正文<em>必填</em></span>
          <textarea name="content" data-zx-editor data-upload="/shop/upload" placeholder="卖点、参数、适合人群、注意事项……支持 Markdown" rows="6" maxlength="20000" required></textarea>
        </label>
      </section>

      <div class="win-post-foot">
        <span class="win-post-hint">{{ico "spark"}} 以 <b>{{.Data.CurrentUser}}</b> 的身份上架，发布后立即在摊位展示。</span>
        <button class="win-btn win-btn-primary shop-submit" type="submit">摆上货架</button>
      </div>
    </form>
    {{else}}
    <div class="win-post-login">
      <span>登录后就能把好物摆上货架，明码标价、库存透明。</span>
      <a class="win-btn win-btn-ghost" href="/admin/login">去登录</a>
    </div>
    {{end}}
  </section>

  <!-- 分类货架 -->
  <div class="win-cats bazaar-cats">
    <a class="win-cat {{if eq .Data.Category ""}}on{{end}}" href="/shop">全部<em>{{len .Data.Products}}</em></a>
    {{range .Data.Categories}}
    <a class="win-cat {{if eq $.Data.Category .Name}}on{{end}}" href="/shop?category={{.Name}}">{{.Name}}<em>{{.Count}}</em></a>
    {{end}}
    {{if .Data.CurrentUser}}<a class="win-cat win-orders" href="/shop/orders">{{ico "bag"}} 我的订单</a>{{end}}
  </div>

  <!-- 货摊陈列 -->
  {{if .Data.Products}}
  <div class="bazaar-grid">
    {{range .Data.Products}}
    <a class="bazaar-stall" href="/shop/{{.Slug}}">
      <div class="bazaar-stall-cover{{if .Cover}} shop-has-cover{{end}}">
        {{if .Cover}}<img class="shop-item-cover-img" src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{end}}
        <span class="bazaar-stall-char">{{.CoverChar}}</span>
        <span class="bazaar-stall-cat">{{.Category}}</span>
        <span class="bazaar-price-tag">¥{{.FinalPrice}}</span>
        {{if .Discounted}}<span class="bazaar-price-origin">原价 ¥{{.Price}}</span>{{end}}
      </div>
      <div class="bazaar-stall-body">
        {{if .Discounted}}<span class="shop-save-tag">{{.SaveLabel}}</span>{{end}}
        <h3 class="bazaar-stall-title">{{.Title}}</h3>
        <p class="bazaar-stall-summary">{{truncate .Summary 44}}</p>
        <div class="bazaar-stall-stock">
          <div class="shelf-bar" role="img" aria-label="库存剩余 {{.Stock}} 件（每格约 10 件，满格 100 件）">
            {{range .StockCells}}<i class="{{if eq . 1}}on{{end}}"></i>{{end}}
          </div>
          <span class="bazaar-stall-remain">剩 {{.Stock}} 件</span>
          {{if le .Stock 0}}<span class="shop-badge shop-badge-out">暂时缺货</span>
          {{else if le .Stock 5}}<span class="shop-badge shop-badge-low">库存紧张</span>
          {{else}}<span class="shop-badge shop-badge-ok">现货充足</span>{{end}}
        </div>
      </div>
    </a>
    {{end}}
  </div>
  {{else}}
  <div class="win-empty">
    <h3>市集暂时空着</h3>
    <p>{{if .Data.Category}}这个分类还没有上架商品，去别的摊逛逛吧。{{else}}还没有上架任何商品，摊主正在加紧备货，稍后再来看看吧。{{end}}</p>
  </div>
  {{end}}

  {{if .Data.CurrentUser}}
  <script>
    (function () {
      var form = document.querySelector('.shop-publish');
      if (!form) return;
      var fileInput = form.querySelector('[data-shop-cover-file]');
      var valueInput = form.querySelector('[data-shop-cover-value]');
      var pickBtn = form.querySelector('[data-shop-cover-pick]');
      var changeBtn = form.querySelector('[data-shop-cover-change]');
      var removeBtn = form.querySelector('[data-shop-cover-remove]');
      var preview = form.querySelector('[data-shop-cover-preview]');
      var previewImg = form.querySelector('[data-shop-cover-img]');
      var tip = form.querySelector('[data-shop-cover-tip]');
      var csrfInput = form.querySelector('input[name="csrf"]');

      function choose() { if (fileInput) fileInput.click(); }
      if (pickBtn) pickBtn.addEventListener('click', choose);
      if (changeBtn) changeBtn.addEventListener('click', choose);
      if (removeBtn) removeBtn.addEventListener('click', function () {
        valueInput.value = '';
        previewImg.removeAttribute('src');
        preview.hidden = true;
        tip.textContent = '已移除主图，将用商品名首字做占位图';
      });

      function compress(file, cb) {
        var reader = new FileReader();
        reader.onload = function () {
          var img = new Image();
          img.onload = function () {
            var max = 1600;
            var w = img.naturalWidth, h = img.naturalHeight;
            var scale = Math.min(1, max / Math.max(w, h));
            var cv = document.createElement('canvas');
            cv.width = Math.max(1, Math.round(w * scale));
            cv.height = Math.max(1, Math.round(h * scale));
            cv.getContext('2d').drawImage(img, 0, 0, cv.width, cv.height);
            cv.toBlob(function (blob) { cb(blob || file); }, 'image/jpeg', 0.88);
          };
          img.onerror = function () { cb(file); };
          img.src = reader.result;
        };
        reader.onerror = function () { cb(file); };
        reader.readAsDataURL(file);
      }

      function upload(blob, name) {
        var fd = new FormData();
        fd.append('file', blob, name);
        if (csrfInput && csrfInput.value) fd.append('csrf', csrfInput.value);
        tip.textContent = '正在上传…';
        fetch('/shop/upload', { method: 'POST', body: fd })
          .then(function (r) { return r.json(); })
          .then(function (res) {
            if (res && res.path) {
              valueInput.value = res.path;
              previewImg.src = res.path;
              preview.hidden = false;
              tip.textContent = '主图已就位，接着填下面的信息就好';
              return;
            }
            tip.textContent = (res && res.error) ? res.error : '上传失败，请重试';
          })
          .catch(function () { tip.textContent = '上传失败，请检查网络后重试'; });
      }

      if (fileInput) fileInput.addEventListener('change', function () {
        var f = fileInput.files && fileInput.files[0];
        fileInput.value = '';
        if (!f) return;
        tip.textContent = '正在压缩…';
        compress(f, function (blob) {
          upload(blob, f.name.replace(/\.[^.]+$/, '') + '.jpg');
        });
      });
    })();
  </script>
  {{end}}

  {{template "module_meta" .}}
{{end}}