{% extends 'core/mobile/base_mobile.html' %}
{% load static %}

{% block content %}
<div class="glass-card p-3 text-center mb-3" style="background: linear-gradient(135deg, #161a1e 0%, #1e2329 100%);">
    <img src="{% static 'images/logo.png' %}" alt="Logo" style="height: 40px;" class="mb-2">
    <h4 class="fw-bold">全球领先的数字资产交易平台</h4>
    <p class="text-secondary small">安全、稳定、快捷的加密货币交易体验</p>
    {% if not user.is_authenticated %}
    <div class="d-grid gap-2">
        <a href="{% url 'core:register' %}" class="btn btn-warning fw-bold">立即注册</a>
        <a href="{% url 'core:login' %}" class="btn btn-outline-secondary btn-sm text-white">登录已有账户</a>
    </div>
    {% else %}
    <div class="d-flex justify-content-around mt-2">
        <div>
            <div class="text-secondary x-small">账户总资产 (USDT)</div>
            <div class="fs-5 fw-bold">{{ account.balance|add:account.frozen_balance }}</div>
        </div>
    </div>
    {% endif %}
</div>

<div class="row g-2 mb-3">
    <div class="col-4">
        <a href="{% url 'core:deposit' %}" class="glass-card p-2 d-block text-center text-decoration-none text-white">
            <i class="bi bi-wallet2 fs-4 text-warning"></i>
            <div class="x-small mt-1">充币</div>
        </a>
    </div>
    <div class="col-4">
        <a href="{% url 'core:withdraw' %}" class="glass-card p-2 d-block text-center text-decoration-none text-white">
            <i class="bi bi-cash-stack fs-4 text-info"></i>
            <div class="x-small mt-1">提币</div>
        </a>
    </div>
    <div class="col-4">
        <a href="{% url 'core:verify' %}" class="glass-card p-2 d-block text-center text-decoration-none text-white">
            <i class="bi bi-shield-check fs-4 text-success"></i>
            <div class="x-small mt-1">认证</div>
        </a>
    </div>
</div>

<div class="glass-card p-2">
    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
        <span class="fw-bold small">热门行情</span>
        <a href="{% url 'core:market_center' %}" class="text-warning x-small text-decoration-none">更多 <i class="bi bi-chevron-right"></i></a>
    </div>
    <div id="hot-list">
        <!-- JS populated -->
    </div>
</div>

<style>
    .hot-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px; border-bottom: 1px solid #2b3139; }
    .hot-item:last-child { border-bottom: 0; }
</style>
{% endblock %}

{% block scripts %}
<script>
    async function getHot() {
        try {
            const r = await fetch('/api/market_data/');
            const data = await r.json();
            const list = document.getElementById('hot-list');
            list.innerHTML = '';
            data.slice(0, 8).forEach(c => {
                const base = c.symbol.replace('USDT', '');
                list.innerHTML += `
                    <div class="hot-item" onclick="location.href='{% url 'core:trade' 'spot' %}?symbol=${c.symbol}'">
                        <div>
                            <div class="fw-bold">${base}<span class="text-secondary x-small">/USDT</span></div>
                            <div class="text-secondary x-small">Vol ${ (Math.random()*100).toFixed(2) }M</div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">${c.price}</div>
                            <div class="${c.change>=0?'text-success':'text-danger'} x-small">${c.change>=0?'+':''}${c.change}%</div>
                        </div>
                    </div>`;
            });
        } catch(e) {}
    }
    getHot();
    setInterval(getHot, 5000);
</script>
{% endblock %}