<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>全部店铺 - {{ site_branding.site_name }}</title>
  <style>
    * { box-sizing:border-box; }
    body { margin:0; font-family:Arial, "Microsoft YaHei", sans-serif; background:#f5f5f7; color:#222; }
    a { text-decoration:none; color:inherit; }

    .topbar { background:#111; color:#fff; padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
    .topbar-inner { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .top-links { display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:flex-end; }
    .top-links a, .top-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }
    .top-user { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:rgba(255,255,255,.08); border-radius:999px; }
    .top-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#eee; }

    .page { width:1200px; max-width:calc(100vw - 48px); margin:24px auto 40px; }
    .panel { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .title { margin:0 0 8px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }

    .shop-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
    .shop-card { display:block; background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05); overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
    .shop-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
    .shop-cover { width:100%; height:220px; object-fit:cover; background:#f3f3f3; display:block; }
    .shop-body { padding:16px; }
    .shop-name { font-size:19px; font-weight:800; margin:0 0 8px; line-height:1.4; }
    .shop-intro { min-height:44px; color:#666; font-size:14px; line-height:1.7; margin-bottom:12px; }
    .shop-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
    .shop-stat { background:#f7f7f8; border-radius:12px; padding:10px 8px; text-align:center; }
    .shop-stat strong { display:block; font-size:16px; margin-bottom:4px; }
    .shop-stat span { color:#777; font-size:12px; }
    .empty { text-align:center; color:#666; padding:30px 12px; background:#fff; border-radius:18px; box-shadow:0 2px 10px rgba(0,0,0,.05); }

    @media (max-width: 1100px) { .shop-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 700px) { .shop-grid { grid-template-columns:1fr; } }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="top-links">
        <a href="/">首页</a>
        <a href="/products">全部商品</a>
        <a href="/shops">全部店铺</a>
        <a href="/cart">购物车</a>
        <a href="/orders">我的订单</a>
        <a href="/wallet">我的钱包</a>
        <a href="/account">用户主页</a>
        {% if session.get("biz_is_merchant") %}
          <a href="/merchant/dashboard">商家后台主页</a>
        {% else %}
          <a href="/merchant/apply">商家入驻申请</a>
        {% endif %}
        {% if session.get("biz_is_admin") %}
          <a href="/admin/">管理员后台主页</a>
        {% endif %}
        {% if session.get("biz_user_id") %}
          <span class="top-user">
            <img class="top-avatar" src="{{ session.get('biz_avatar_url') or '/uploads/avatars/default-avatar.png' }}" alt="头像">
            <span>你好，{{ session.get("biz_display_name") }}</span>
          </span>
          <a href="/logout">退出</a>
        {% else %}
          <a href="/firebase-login">登录</a>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="page">
    <div class="panel">
      <h1 class="title">全部店铺</h1>
      <div class="muted">这里展示当前站内所有正常营业的店铺，按成交额优先排序。</div>
    </div>

    {% if shops %}
      <div class="shop-grid">
        {% for s in shops %}
          <a class="shop-card" href="/shop/{{ s.shop_slug }}">
            <img class="shop-cover" src="{{ s.logo_url or '/uploads/avatars/default-avatar.png' }}" alt="{{ s.shop_name }}">
            <div class="shop-body">
              <div class="shop-name">{{ s.shop_name }}</div>
              <div class="shop-intro">{{ s.intro }}</div>
              <div class="shop-stats">
                <div class="shop-stat">
                  <strong>{{ s.sold_count }}</strong>
                  <span>已售件数</span>
                </div>
                <div class="shop-stat">
                  <strong>{{ '%.2f'|format(s.gross_revenue) }}</strong>
                  <span>成交额</span>
                </div>
                <div class="shop-stat">
                  <strong>{{ s.settled_order_count }}</strong>
                  <span>成交订单</span>
                </div>
              </div>
            </div>
          </a>
        {% endfor %}
      </div>
    {% else %}
      <div class="empty">当前还没有可展示的店铺。</div>
    {% endif %}
  </div>
</body>
</html>
