{{define "shop_index"}}
  <!-- 夜色橱窗街景 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">
      <div class="win-post-row">
        <input type="text" name="title" placeholder="商品标题（必填），如「晴空手账本 · 2026 夏日限定」" maxlength="80" required>
        <select name="category" required>
          <option value="">选分类…</option>
          {{range .Data.Categories}}<option value="{{.Name}}">{{.Name}}</option>{{end}}
        </select>
      </div>
      <div class="win-post-row">
        <input type="text" name="price" placeholder="价格（元，必填），如 39.00" maxlength="12" required>
        <input type="number" name="stock" placeholder="库存（件，必填）" min="0" max="999999" required>
      </div>
      <input type="text" name="summary" placeholder="一句话摘要（必填）：把让人心动的那一点先说出来" maxlength="120" required>
      <textarea name="content" placeholder="商品正文（必填）：卖点、参数、适合人群、注意事项……支持 Markdown" rows="5" maxlength="20000" required></textarea>
      <div class="win-post-foot">
        <span class="win-post-hint">💡 以 <b>{{.Data.CurrentUser}}</b> 的身份上架，发布后立即在橱窗展示。</span>
        <button class="win-btn win-btn-primary" 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">
        <span class="win-item-char">{{.CoverChar}}</span>
        <span class="win-item-cat">{{.Category}}</span>
        <span class="win-tag-price">¥{{.Price}}</span>
      </div>
      <div class="win-item-body">
        <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}}

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