{% extends 'core/mobile/base_mobile.html' %}
{% block content %}
<div class="glass-card p-3 mb-3 d-flex align-items-center">
    <div class="bg-warning rounded-circle d-flex align-items-center justify-content-center text-dark fw-bold me-3" style="width: 50px; height: 50px; font-size: 20px;">
        {{ user.username|first|upper }}
    </div>
    <div>
        <div class="fw-bold">{{ user.username }}</div>
        <div class="text-secondary x-small">UID: {{ account.uid }} | {{ account.get_account_type_display }}</div>
    </div>
    <div class="ms-auto">
        <span class="badge {% if account.kyc_status == 'VERIFIED' %}bg-success{% else %}bg-secondary{% endif %} x-small">
            {{ account.get_kyc_status_display }}
        </span>
    </div>
</div>

<div class="glass-card p-3 mb-3">
    <div class="text-secondary x-small mb-1">总资产估值 (USDT)</div>
    <div class="fs-3 fw-bold mb-3">{{ account.balance|add:account.frozen_balance }}</div>
    
    <div class="row g-2">
        <div class="col-6">
            <div class="bg-dark p-2 rounded">
                <div class="text-secondary x-small">可用</div>
                <div class="fw-bold small">{{ account.balance }}</div>
            </div>
        </div>
        <div class="col-6">
            <div class="bg-dark p-2 rounded">
                <div class="text-secondary x-small">冻结</div>
                <div class="fw-bold small">{{ account.frozen_balance }}</div>
            </div>
        </div>
    </div>
</div>

<div class="glass-card mb-3">
    <div class="list-group list-group-flush">
        <a href="{% url 'core:deposit' %}" class="list-group-item list-group-item-action bg-transparent text-white border-secondary py-3 d-flex justify-content-between align-items-center">
            <span><i class="bi bi-wallet2 me-3 text-warning"></i>充币</span>
            <i class="bi bi-chevron-right text-secondary"></i>
        </a>
        <a href="{% url 'core:withdraw' %}" class="list-group-item list-group-item-action bg-transparent text-white border-secondary py-3 d-flex justify-content-between align-items-center">
            <span><i class="bi bi-cash-stack me-3 text-info"></i>提币</span>
            <i class="bi bi-chevron-right text-secondary"></i>
        </a>
        <a href="{% url 'core:verify' %}" class="list-group-item list-group-item-action bg-transparent text-white border-secondary py-3 d-flex justify-content-between align-items-center">
            <span><i class="bi bi-shield-check me-3 text-success"></i>实名认证</span>
            <i class="bi bi-chevron-right text-secondary"></i>
        </a>
    </div>
</div>

<div class="glass-card p-3">
    <div class="fw-bold small mb-2">资产明细</div>
    <table class="table table-dark table-sm x-small mb-0">
        <thead>
            <tr class="text-secondary">
                <th>币种</th>
                <th class="text-end">可用</th>
                <th class="text-end">冻结</th>
            </tr>
        </thead>
        <tbody>
            {% for asset in account.assets.all %}
            <tr>
                <td>{{ asset.currency }}</td>
                <td class="text-end">{{ asset.balance }}</td>
                <td class="text-end">{{ asset.frozen }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="mt-4 p-2">
    <form action="{% url 'logout' %}" method="post">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-danger w-100 btn-sm">退出登录</button>
    </form>
</div>
{% endblock %}