{# Copyright (c) 2025-2026 马建军. All rights reserved. 专有软件，详见 LICENSE.zh-CN.txt #}
{% extends "base.html" %}
{% block title %}数据看板 - 国内期货 · 交易复盘系统{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}?v={{ asset_v }}">
{% endblock %}
{% block content %}

<div class="dashboard-page">
    <div class="dashboard-top">
        <div class="dashboard-top-left">
            <span class="badge planned" id="dash-mode-badge">—</span>
            <span class="badge planned" id="dash-ctp-badge">CTP 检测中…</span>
            <span class="text-muted dash-updated" id="dash-updated">正在加载…</span>
        </div>
    </div>

    <div class="card dashboard-account-card">
        <div class="stat-grid stat-grid-summary dashboard-account-grid">
            <div class="stat-item">
                <div class="label">账户权益</div>
                <div class="value" id="dash-equity">—</div>
            </div>
            <div class="stat-item">
                <div class="label">占用保证金</div>
                <div class="value" id="dash-margin">—</div>
            </div>
            <div class="stat-item">
                <div class="label">可用权益</div>
                <div class="value" id="dash-available">—</div>
            </div>
        </div>
    </div>

    <div class="card dashboard-section dashboard-risk-card" id="dash-risk-card">
        <h2 class="dashboard-risk-heading dash-section-toggle" id="dash-risk-toggle" role="button" tabindex="0" aria-expanded="false" aria-controls="dash-risk-body">
            <span class="dash-section-toggle-label">风控说明</span>
            {% if nav_items.risk_guide %}
            <a class="dash-risk-doc-link" href="{{ url_for('risk_guide') }}" onclick="event.stopPropagation()">完整说明</a>
            {% else %}
            <span class="text-muted dash-risk-doc-ref">· 详见 <code>docs/风控说明.md</code></span>
            {% endif %}
            <span class="dash-toggle-icon" aria-hidden="true">▼</span>
        </h2>
        <div class="dash-risk-body" id="dash-risk-body">
            <p class="dashboard-risk-reason" id="dash-risk-reason">加载中…</p>
            <div class="stat-grid stat-grid-summary dashboard-risk-grid" id="dash-risk-grid"></div>
        </div>
    </div>

    <div class="card dashboard-section">
        <h2>持仓信息</h2>
        <div class="dash-mobile-list" id="dash-pos-mobile-list"></div>
        <div class="dash-pos-table-wrap card-scroll">
            <table class="dashboard-table" id="dash-positions-table">
                <thead>
                    <tr>
                        <th>品种</th>
                        <th>方向</th>
                        <th>手数</th>
                        <th>均价</th>
                        <th>现价</th>
                        <th>浮盈亏</th>
                        <th>保证金</th>
                        <th>止损</th>
                        <th>止盈</th>
                    </tr>
                </thead>
                <tbody id="dash-positions-body">
                    <tr><td colspan="9" class="text-muted">加载中…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card dashboard-section">
        <h2>关键位监控</h2>
        <div class="dash-mobile-list" id="dash-keys-mobile-list"></div>
        <div class="dash-keys-table-wrap card-scroll">
            <table class="dashboard-table" id="dash-keys-table">
                <thead>
                    <tr>
                        <th>品种</th>
                        <th>类型</th>
                        <th>周期</th>
                        <th>上沿</th>
                        <th>下沿</th>
                        <th>现价</th>
                        <th>距上沿</th>
                        <th>距下沿</th>
                    </tr>
                </thead>
                <tbody id="dash-keys-body">
                    <tr><td colspan="8" class="text-muted">加载中…</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="card dashboard-section">
        <h2>平仓记录</h2>
        <div class="dash-mobile-list" id="dash-closes-mobile-list"></div>
        <div class="card-scroll dash-closes-table-wrap">
            <table class="dashboard-table" id="dash-closes-table">
                <thead>
                    <tr>
                        <th>品种</th>
                        <th>方向</th>
                        <th>手数</th>
                        <th>开仓</th>
                        <th>平仓</th>
                        <th>盈亏</th>
                        <th>净盈亏</th>
                        <th>平仓时间</th>
                    </tr>
                </thead>
                <tbody id="dash-closes-body">
                    <tr><td colspan="8" class="text-muted">加载中…</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal-mask" id="dash-detail-modal" hidden>
    <div class="modal-box dash-detail-modal">
        <h3 id="dash-detail-title">详情</h3>
        <div class="modal-grid" id="dash-detail-grid"></div>
        <div class="modal-actions">
            <button type="button" class="btn-primary" id="dash-detail-close">关闭</button>
        </div>
    </div>
</div>

{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/dashboard.js') }}?v={{ asset_v }}"></script>
{% endblock %}