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

  <!-- 夜色橱窗街景 hero：深空夜空 + 暖光橱窗 + 店铺灯带 + 星星点点 + 街灯 -->
  <header class="win-hero">
    <div class="win-hero-bg" aria-hidden="true">
      <!-- 星星点点：夜空里一明一灭 -->
      <svg class="win-hero-stars" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice">
        <circle cx="84" cy="46" r="1.6" class="win-star" />
        <circle cx="206" cy="92" r="1.2" class="win-star" />
        <circle cx="318" cy="32" r="1.9" class="win-star" />
        <circle cx="452" cy="100" r="1.2" class="win-star" />
        <circle cx="576" cy="54" r="1.5" class="win-star" />
        <circle cx="706" cy="112" r="1.2" class="win-star" />
        <circle cx="828" cy="36" r="1.7" class="win-star" />
        <circle cx="956" cy="90" r="1.2" class="win-star" />
        <circle cx="1076" cy="48" r="1.4" class="win-star" />
        <circle cx="1136" cy="124" r="1.1" class="win-star" />
        <circle cx="148" cy="152" r="1.1" class="win-star" />
        <circle cx="524" cy="158" r="1.2" class="win-star" />
        <circle cx="872" cy="168" r="1.1" class="win-star" />
        <circle cx="668" cy="30" r="1.3" class="win-star" />
      </svg>
      <!-- 店铺灯带：横贯整条街的暖光 -->
      <span class="win-hero-strip"></span>
      <!-- 三扇亮着暖光的橱窗 -->
      <span class="win-hero-window win-hero-window-1"></span>
      <span class="win-hero-window win-hero-window-2"></span>
      <span class="win-hero-window win-hero-window-3"></span>
      <!-- 两盏街灯 -->
      <span class="win-hero-lamp win-hero-lamp-l"></span>
      <span class="win-hero-lamp win-hero-lamp-r"></span>
      <span class="win-hero-note">✨ 橱窗灯亮到打烊，风铃还在响</span>
    </div>
    <span class="win-hero-kicker">🛍 晴空小铺 · 夜里亮灯的透明小铺</span>
    <h1 class="win-hero-title">夜里亮着灯的橱窗，<br>等你推门</h1>
    <p class="win-hero-note-copy">
      街灯把影子拉长，橱窗里的暖光还亮着。没有比价轰炸、没有催单倒计时——
      只有<b>明码标价的货、看得见的库存</b>，和一位等你说「就它了」的店主。
    </p>
    <div class="win-hero-stats">
      <span><b>{{len .Data.Products}}</b> 件在售</span>
      <span><b>{{len .Data.Categories}}</b> 个分类</span>
      <span>明码标价 · 童叟无欺</span>
    </div>
    <span class="win-open-badge">🛍 营业中</span>
  </header>

  <!-- 上架区：登录后前台发布，分「主图 / 基本信息 / 详情」三块玻璃卡片填写 -->
  {{if .Data.Err}}<div class="win-post-err">{{.Data.Err}}</div>{{end}}
  <div class="win-post">
    <h3 class="win-post-title">🏷 把好物摆上橱窗</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" placeholder="卖点、参数、适合人群、注意事项……支持 Markdown" rows="6" maxlength="20000" required></textarea>
        </label>
      </section>

      <div class="win-post-foot">
        <span class="win-post-hint">💡 以 <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}}
  </div>

  <!-- 分类筛选：按货架逛橱窗 -->
  <div class="win-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}}
  </div>

  <!-- 橱窗陈列：每件商品都是展品（价格吊牌 / 库存条 / 安心购徽标） -->
  {{if .Data.Products}}
  <div class="win-showcase">
    {{range .Data.Products}}
    <a class="win-item" href="/shop/{{.Slug}}">
      <span class="win-item-light" aria-hidden="true"></span>
      <div class="win-item-cover{{if .Cover}} shop-has-cover{{end}}">
        {{if .Cover}}<img class="shop-item-cover-img" src="{{.Cover}}" alt="{{.Title}}" loading="lazy">{{end}}
        <span class="win-item-char">{{.CoverChar}}</span>
        <span class="win-item-cat">{{.Category}}</span>
        <div class="shop-tag-wrap">
          <span class="win-tag-price">¥{{.FinalPrice}}</span>
          {{if .Discounted}}<span class="shop-tag-origin">原价 ¥{{.Price}}</span>{{end}}
        </div>
      </div>
      <div class="win-item-body">
        {{if .Discounted}}<span class="shop-save-tag">{{.SaveLabel}}</span>{{end}}
        <h3 class="win-item-title">{{.Title}}</h3>
        <p class="win-item-summary">{{truncate .Summary 44}}</p>
        <div class="win-item-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="win-item-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>
    // 商品主图：选图 → 前端压缩 → 上传 → 预览并写入隐藏字段 cover
    (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 = '已移除主图，将用商品名首字做占位图';
      });

      // 压缩：最长边压到 1600 像素、JPEG 质量 0.88，再上传
      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}}