<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="{{ site_branding.favicon_url }}">
  <title>商家后台 - {{ site_branding.browser_title }}</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; }
    .topbar-inner { width:1200px; max-width:calc(100vw - 48px); margin:0 auto; display:flex; justify-content:space-between; align-items:center; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .topbar-links { display:flex; gap:16px; flex-wrap:wrap; }
    .topbar-links a { color:#f3f3f3; font-size:14px; }
    .container { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .hero, .card { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,0.05); margin-bottom:18px; }
    .hero h1 { margin:0 0 10px; font-size:30px; font-weight:800; }
    .muted { color:#666; font-size:14px; line-height:1.8; }
    .btn-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; background:#111; color:#fff; border-radius:10px; font-size:14px; }
    .btn-light { background:#efefef; color:#222; }
    .grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
    .stat { background:#fafafa; border-radius:14px; padding:20px; text-align:center; }
    .num { font-size:30px; font-weight:800; margin-bottom:8px; }
    .label { color:#666; font-size:14px; }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="topbar-inner">
      <div class="topbar-brand"><a href="/">{{ site_branding.site_name }}</a></div>
      <div class="topbar-links">
        <a href="/account">用户主页</a>
        <a href="/merchant/dashboard">商家后台</a>
        <a href="/merchant/products">商品管理</a>
        <a href="/merchant/orders">订单管理</a>
        <a href="/logout">退出</a>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="hero">
      <h1>商家后台</h1>
      <div class="muted">
        店铺：{{ merchant.shop_name or '未命名店铺' }}<br>
        商家编号：{{ merchant.merchant_id }}　店铺编号：{{ merchant.shop_id or '暂无' }}　店铺标识：{{ merchant.shop_slug or '暂无' }}
      </div>
      <div class="btn-row">
        <a class="btn" href="/merchant/products">商品管理</a>
        <a class="btn" href="/merchant/orders">订单管理</a>
        <a class="btn-light btn" href="/merchant/products/new">新增商品</a>
        <a class="btn-light btn" href="/account">返回用户主页</a>
      </div>
        <div class="actions">
            {% if merchant.shop_slug %}
                <a class="btn" href="/shop/{{ merchant.shop_slug }}" target="_blank">店铺主页</a>
            {% endif %}
            <a class="btn btn-light" href="/merchant/shop/edit">编辑主页</a>
        </div>
    </div>

    <div class="grid">
      <div class="card stat">
        <div class="num">{{ product_count }}</div>
        <div class="label">商品数量</div>
      </div>
      <div class="card stat">
        <div class="num">{{ order_count }}</div>
        <div class="label">关联订单数</div>
      </div>
      <div class="card stat">
        <div class="num">{{ paid_order_count }}</div>
        <div class="label">已支付订单数</div>
      </div>
    </div>
  </div>
</body>
</html>
