<!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; font-size: 15px; }
        a { text-decoration: none; color: inherit; }
        .topbar {
            background: #111;
            color: #fff;
            padding: 14px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.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;
            letter-spacing: 0.2px;
            text-decoration: none;
            white-space: nowrap;
        }

        .topbar-links {
            display: flex;
            align-items: center;
            gap: 18px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .topbar-links a,
        .topbar-links span {
            color: #f3f3f3;
            font-size: 14px;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
        }

        .topbar-links a:hover {
            color: #ffffff;
        }

        .topbar-user {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px 6px 8px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }

        .topbar-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background: #eee;
            display: block;
        }

        .container { width: 1100px; margin: 24px auto; }
        .title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
        .title-row h1 { margin: 0; font-size: 30px; font-weight: 800; }

        .card, .summary {
            background: white;
            border-radius: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .card { padding: 18px; }

        .cart-item {
            display: grid;
            grid-template-columns: 120px 1fr 140px 180px 100px;
            gap: 16px;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .cart-item:last-child { border-bottom: none; }

        .cart-item img {
            width: 120px; height: 120px; object-fit: cover;
            border-radius: 12px; background: #eee;
        }

        .name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
        .muted { color: #666; font-size: 14px; line-height: 1.8; }
        .price { color: #d70018; font-size: 20px; font-weight: 800; }

        input[type="number"] {
            width: 80px; height: 38px; padding: 0 8px;
            border: 1px solid #ddd; border-radius: 8px;
            font-size: 14px;
        }

        button {
            height: 38px; padding: 0 14px; border: none;
            border-radius: 8px; cursor: pointer; font-size: 14px;
        }

        .btn-dark { background: #111; color: white; }
        .btn-danger { background: #d70018; color: white; }
        .btn-checkout {
            background: #111; color: white; height: 46px; padding: 0 22px;
            font-size: 15px; border-radius: 10px;
        }

        .inline-form { display: inline-block; margin-right: 8px; }

        .summary {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 22px;
        }

        .summary strong { font-size: 24px; color: #d70018; font-weight: 800; }

        .empty {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            font-size: 14px;
        }

        .checkout-box {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .hint {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
        }
    </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="/">首页</a>
                <a href="/products">全部商品</a>
                {% if session.get("biz_display_name") %}
                    <a href="/cart">购物车</a>
                    <a href="/orders">我的订单</a>
                    <a href="/wallet">我的钱包</a>
                    <a href="/addresses">地址管理</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 %}
                    <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>
                {% else %}
                    <a href="/login">登录</a>
                    <a href="/register">注册</a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container">
        <div class="title-row">
            <h1>我的购物车</h1>
            <a href="/products">继续购物</a>
        </div>

        {% if items %}
            <div class="card">
                {% for item in items %}
                <div class="cart-item">
                    <div>
                        <img src="{{ item.media_url }}" alt="{{ item.product_name }}">
                    </div>
                    <div>
                        <div class="name">{{ item.product_name }}</div>
                        <div class="muted">库存：{{ item.stock }}</div>
                        <div class="muted">商品 ID：{{ item.product_id }}</div>
                    </div>
                    <div>
                        <div class="price">¥ {{ "%.2f"|format(item.price) }}</div>
                    </div>
                    <div>
                        <form class="inline-form" method="post" action="/cart/update/{{ item.cart_item_id }}">
                            <input type="number" name="quantity" min="1" max="{{ item.stock }}" value="{{ item.quantity }}">
                            <button class="btn-dark" type="submit">更新</button>
                        </form>
                        <form class="inline-form" method="post" action="/cart/remove/{{ item.cart_item_id }}">
                            <button class="btn-danger" type="submit">删除</button>
                        </form>
                    </div>
                    <div>
                        <div class="muted">小计</div>
                        <div class="price">¥ {{ "%.2f"|format(item.subtotal) }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <div class="summary">
                <div>
                    <div>共 {{ total_quantity }} 件商品</div>
                    <div class="hint">当前先按整车结算，后续可以扩展优惠券、地址和支付。</div>
                </div>
                <div class="checkout-box">
                    <div>合计：<strong>¥ {{ "%.2f"|format(total_amount) }}</strong></div>
                    <form method="post" action="/checkout" style="margin:0;">
                        <button class="btn-checkout" type="submit">提交订单</button>
                    </form>
                </div>
            </div>
        {% else %}
            <div class="card empty">
                <h2>购物车还是空的</h2>
                <p>先去商品列表里挑一些商品吧。</p>
                <p><a href="/products">进入商品中心</a></p>
            </div>
        {% endif %}
    </div>
</body>
</html>
