<!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; gap:24px; }
    .topbar-brand a { color:#fff; font-size:20px; font-weight:800; }
    .topbar-links { display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .topbar-links a, .topbar-links span { color:#f3f3f3; font-size:14px; white-space:nowrap; }
    .topbar-user { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; background:rgba(255,255,255,.08); border-radius:999px; }
    .topbar-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#eee; }
    .page { width:1200px; max-width:calc(100vw - 48px); margin:24px auto; }
    .panel { background:#fff; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:18px; }
    .hero-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
    .hero h1 { margin:0 0 8px; 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; }
    .btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:10px; background:#111; color:#fff; border:none; font-size:14px; cursor:pointer; }
    .btn-light { background:#efefef; color:#222; }
    .btn-warn { background:#d97706; color:#fff; }
    .flash { padding:12px 14px; border-radius:12px; margin-bottom:14px; font-size:14px; line-height:1.8; }
    .flash.success { background:#ecfdf5; color:#166534; }
    .flash.error { background:#fef2f2; color:#991b1b; }
    table { width:100%; border-collapse:collapse; }
    th, td { padding:14px 10px; border-bottom:1px solid #eee; text-align:left; vertical-align:middle; }
    th { background:#fafafa; }
    .thumb { width:72px; height:72px; object-fit:cover; border-radius:12px; border:1px solid #ddd; background:#fafafa; display:block; }
    .tag { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#eee; }
    .tag-on { background:#dcfce7; color:#166534; }
    .tag-off { background:#fee2e2; color:#991b1b; }
    .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    form.inline { display:inline; margin:0; }
  </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="/merchant/dashboard">商家后台</a>
        <a href="/merchant/products">商品管理</a>
        <a href="/merchant/orders">订单管理</a>
        <a href="/account">用户主页</a>
        <span class="topbar-user">
          <img class="topbar-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>
      </div>
    </div>
  </div>

  <div class="page">
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="flash {{ category }}">{{ message }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <div class="panel hero">
      <div class="hero-row">
        <div>
          <h1>商品管理</h1>
          <div class="muted">店铺：{{ merchant_ctx.shop_name }}　merchant_id={{ merchant_ctx.merchant_id }}　shop_id={{ merchant_ctx.shop_id }}</div>
        </div>
        <div class="btn-row">
          <a class="btn" href="{{ url_for('merchant_product_create') }}">+ 添加商品</a>
          <a class="btn btn-light" href="{{ url_for('merchant_orders') }}">查看订单</a>
          <a class="btn btn-light" href="{{ url_for('merchant_dashboard') }}">返回商家后台</a>
        </div>
      </div>
    </div>

    <div class="panel">
      {% if products %}
      <table>
        <thead>
          <tr>
            <th>图片</th>
            <th>商品名</th>
            <th>分类</th>
            <th>价格</th>
            <th>库存</th>
            <th>状态</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for p in products %}
          <tr>
            <td><img class="thumb" src="{{ p.cover_url or '/uploads/products/default.png' }}" alt="商品图"></td>
            <td><div style="font-weight:700;">{{ p.product_name }}</div><div class="muted">ID：{{ p.product_id }}</div></td>
            <td>{{ p.category_name or '未分类' }}</td>
            <td>¥ {{ '%.2f'|format(p.price) }}</td>
            <td>{{ p.stock }}</td>
            <td>{% if p.status == 1 %}<span class="tag tag-on">上架中</span>{% else %}<span class="tag tag-off">已下架</span>{% endif %}</td>
            <td>{{ p.updated_at }}</td>
            <td>
              <div class="actions">
                <a class="btn btn-light" href="{{ url_for('merchant_product_edit', product_id=p.product_id) }}">编辑</a>
                <a class="btn btn-light" href="/products/{{ p.product_id }}" target="_blank">查看详情</a>
                <form class="inline" method="post" action="{{ url_for('merchant_product_toggle_status', product_id=p.product_id) }}">
                  <button class="btn btn-warn" type="submit">{% if p.status == 1 %}下架{% else %}上架{% endif %}</button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <div class="muted">当前还没有商品，先添加一个。</div>
      {% endif %}
    </div>
  </div>
</body>
</html>
