{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-white mb-0">行情中心</h2>
        <div class="input-group w-auto">
            <span class="input-group-text bg-dark border-secondary"><i class="bi bi-search text-secondary"></i></span>
            <input type="text" id="market-search" class="form-control bg-dark text-white border-secondary" placeholder="搜索币种" onkeyup="filterMarket()">
        </div>
    </div>

    <div class="glass-card overflow-hidden" style="border-radius: 12px; border: 1px solid #2b3139; background: #161a1e;">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0 align-middle">
                <thead>
                    <tr class="text-secondary border-bottom border-secondary">
                        <th class="ps-4 py-3">币种</th>
                        <th class="py-3">最新价</th>
                        <th class="py-3">24h 涨跌</th>
                        <th class="py-3">24h 最高</th>
                        <th class="py-3">24h 最低</th>
                        <th class="py-3">24h 成交额</th>
                        <th class="pe-4 py-3 text-end">操作</th>
                    </tr>
                </thead>
                <tbody id="market-table-body">
                    {% for crypto in cryptos %}
                    <tr class="market-row" data-symbol="{{ crypto.symbol }}">
                        <td class="ps-4 py-3">
                            <div class="d-flex align-items-center">
                                <img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/{{ crypto.symbol|lower }}.png" 
                                     class="rounded-circle me-3" width="32" height="32" 
                                     onerror="this.src='https://static.okx.com/cdn/oksupport/asset/currency/icon/generic.png'">
                                <div>
                                    <div class="fw-bold text-white">{{ crypto.symbol }}</div>
                                    <div class="text-secondary small">{{ crypto.name }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="py-3 fw-bold price-val">--</td>
                        <td class="py-3 change-val">--</td>
                        <td class="py-3 high-val text-secondary">--</td>
                        <td class="py-3 low-val text-secondary">--</td>
                        <td class="py-3 vol-val text-secondary">--</td>
                        <td class="pe-4 py-3 text-end">
                            <a href="{% url 'core:trade' 'spot' %}?symbol={{ crypto.symbol }}USDT" class="btn btn-outline-warning btn-sm px-3 me-2">现货</a>
                            <a href="{% url 'core:trade' 'contract' %}?symbol={{ crypto.symbol }}USDT" class="btn btn-warning btn-sm px-3 text-dark">合约</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .glass-card { background: rgba(22, 26, 30, 0.8); backdrop-filter: blur(10px); }
    .table-dark { --bs-table-bg: transparent; }
    .table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
</style>
{% endblock %}

{% block scripts %}
<script>
    async function updateMarket() {
        try {
            const r = await fetch('https://api.binance.com/api/v3/ticker/24hr');
            const data = await r.json();
            const tickers = {};
            data.forEach(t => {
                if (t.symbol.endsWith('USDT')) {
                    tickers[t.symbol.replace('USDT', '')] = t;
                }
            });

            document.querySelectorAll('.market-row').forEach(row => {
                const sym = row.getAttribute('data-symbol');
                const t = tickers[sym];
                if (t) {
                    const chg = parseFloat(t.priceChangePercent);
                    row.querySelector('.price-val').textContent = parseFloat(t.lastPrice).toLocaleString();
                    row.querySelector('.price-val').className = 'py-3 fw-bold price-val ' + (chg >= 0 ? 'text-success' : 'text-danger');
                    row.querySelector('.change-val').textContent = (chg >= 0 ? '+' : '') + chg.toFixed(2) + '%';
                    row.querySelector('.change-val').className = 'py-3 change-val ' + (chg >= 0 ? 'text-success' : 'text-danger');
                    row.querySelector('.high-val').textContent = parseFloat(t.highPrice).toLocaleString();
                    row.querySelector('.low-val').textContent = parseFloat(t.lowPrice).toLocaleString();
                    row.querySelector('.vol-val').textContent = (parseFloat(t.quoteVolume) / 1000000).toFixed(2) + 'M';
                }
            });
        } catch(e) {}
    }

    function filterMarket() {
        const query = document.getElementById('market-search').value.toLowerCase();
        document.querySelectorAll('.market-row').forEach(row => {
            const sym = row.getAttribute('data-symbol').toLowerCase();
            row.style.display = sym.includes(query) ? '' : 'none';
        });
    }

    updateMarket();
    setInterval(updateMarket, 3000);
</script>
{% endblock %}
