<!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; }
        .card {
            background: white;
            border-radius: 18px;
            padding: 20px 22px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 18px;
        }

        .balance {
            font-size: 40px;
            font-weight: 800;
            color: #d70018;
            margin-top: 8px;
        }

        .muted {
            color: #666;
            font-size: 14px;
            line-height: 1.8;
        }

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

        .tx-type {
            font-weight: 700;
        }

        .amount {
            color: #d70018;
            font-weight: 800;
            font-size: 18px;
        }

        .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; }

        .empty {
            text-align: center;
            color: #666;
            padding: 40px 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="/">首页</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="/orders">查看订单</a>
        </div>

        <div class="card">
            <div class="muted">当前余额</div>
            <div class="balance">¥ {{ "%.2f"|format(wallet.balance) }}</div>
            <div class="muted">最后更新时间：{{ wallet.updated_at }}</div>
        </div>

        <div class="card">
            <h2 style="margin-top:0; font-size:24px; font-weight:800;">钱包流水</h2>
            {% if txs %}
                {% for tx in txs %}
                <div class="tx">
                    <div>{{ tx.transaction_id }}</div>
                    <div class="tx-type">{{ tx.tx_type }}</div>
                    <div class="amount">¥ {{ "%.2f"|format(tx.amount) }}</div>
                    <div>{{ tx.remark or '无备注' }}</div>
                    <div class="muted">
                        余额：{{ "%.2f"|format(tx.balance_after) }}<br>
                        时间：{{ tx.created_at }}
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="empty">暂无钱包流水</div>
            {% endif %}
        </div>
    </div>
</body>
</html>
