{% extends "base.html" %}
{% block title %}持仓监控 - 国内期货监控系统{% endblock %}
{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/trade.css') }}">
{% endblock %}
{% block content %}
<div class="trade-page">
    <div class="trade-top-bar">
        <span class="badge dir">{{ trading_mode_label }}</span>
        <span class="badge {% if ctp_status.connected %}profit{% else %}planned{% endif %}" id="ctp-badge">
            {% if ctp_status.connected %}CTP 已连接{% else %}CTP 未连接{% endif %}
        </span>
        <span class="badge {% if risk_status.can_trade %}profit{% else %}loss{% endif %}" id="risk-badge">{{ risk_status.status_label }}</span>
        <span class="text-muted">权益 <strong id="cap-display">{{ '%.2f'|format(capital) }}</strong> 元</span>
        {% if ctp_account.available is defined and ctp_status.connected %}
        <span class="text-muted">可用 <strong id="avail-display">{{ '%.2f'|format(ctp_account.available) }}</strong> 元</span>
        {% endif %}
        <button type="button" class="btn-primary" id="btn-ctp-connect" style="padding:.4rem .9rem;font-size:.8rem">连接 CTP</button>
    </div>

    <div class="trade-dashboard">
        <div class="trade-row-split">
            <div class="card trade-card" id="order">
                <h2>期货下单</h2>
                <div class="card-body">
                    <div class="trade-order-status trade-order-status-compact">
                        <div class="status-row">
                            <span class="text-muted">计仓</span>
                            <strong>{{ sizing_mode_label }}</strong>
                            {% if sizing_mode == 'risk' %}<span class="text-muted">· {{ risk_percent }}%</span>{% endif %}
                            <span class="text-muted">· 监控 {{ monitor_count }} 笔</span>
                        </div>
                    </div>

                    <div class="trade-input-row">
                        <div class="symbol-wrap trade-field">
                            <label class="text-label">品种</label>
                            <input type="text" id="trade-symbol" class="symbol-input" placeholder="主力合约 rb2610" autocomplete="off">
                            <div class="symbol-dropdown"></div>
                            <div class="symbol-selected" id="sym-selected"></div>
                        </div>
                        <div class="trade-field">
                            <label class="text-label">手数</label>
                            <input type="number" id="trade-lots" min="1" step="1" value="1">
                        </div>
                        <div class="trade-field">
                            <label class="text-label">价格</label>
                            <input type="number" id="trade-price" step="any" placeholder="限价">
                        </div>
                    </div>

                    <div id="risk-fields" class="trade-risk-row" {% if sizing_mode != 'risk' %}hidden{% endif %}>
                        <div class="trade-field"><label class="text-label">止损</label><input type="number" id="trade-sl" step="any"></div>
                        <div class="trade-field"><label class="text-label">止盈</label><input type="number" id="trade-tp" step="any"></div>
                    </div>

                    <div class="trade-btn-row">
                        <button type="button" class="trade-btn long" id="btn-open-long">
                            <span class="btn-price" id="px-long">—</span>
                            <span class="btn-label">加多</span>
                        </button>
                        <button type="button" class="trade-btn lock" id="btn-open-short">
                            <span class="btn-price" id="px-short">—</span>
                            <span class="btn-label">加空</span>
                        </button>
                        <button type="button" class="trade-btn close" id="btn-close-long">
                            <span class="btn-label">平多</span>
                            <span class="btn-sub" id="pos-long">≤0</span>
                        </button>
                        <button type="button" class="trade-btn close" id="btn-close-short">
                            <span class="btn-label">平空</span>
                            <span class="btn-sub" id="pos-short">≤0</span>
                        </button>
                    </div>

                    <div class="trade-footer" id="trade-footer">
                        <p class="hint">程序报单经 CTP 进入柜台；策略自动化请用 <a href="{{ url_for('strategy_page') }}">策略交易</a>。</p>
                        {% if ctp_status.last_error %}<p class="text-loss" style="font-size:.78rem;margin-top:.35rem">{{ ctp_status.last_error }}</p>{% endif %}
                    </div>
                </div>
            </div>

            <div class="card trade-card" id="positions">
                <h2>持仓监控</h2>
                <div class="card-body card-scroll" id="position-live-list">
                    <div class="empty-hint">加载中…</div>
                </div>
            </div>
        </div>

        <div class="card trade-card trade-card-full" id="recommend">
            <h2>品种推荐</h2>
            <div class="card-body">
                <p class="hint">按权益 <strong class="text-accent" id="rec-capital">{{ '%.2f'|format(capital) }}</strong> 元筛选，仅显示可开 1 手的品种。
                    {% if recommend_updated_at %}<span class="text-muted">更新 {{ recommend_updated_at }}</span>{% else %}<span class="text-muted" id="rec-updated">后台刷新中…</span>{% endif %}
                </p>
                <div class="trade-table-wrap">
                    <table class="trade-table">
                        <thead>
                            <tr>
                                <th>品种</th><th>交易所</th><th>参考价</th><th>1手保证金</th><th>建议最低资金</th><th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="recommend-list">
                            {% if recommend_rows %}
                            {% for r in recommend_rows %}
                            <tr class="rec-{{ r.status }}">
                                <td><strong>{{ r.name }}</strong> <span class="text-muted">{{ r.ths }}</span></td>
                                <td>{{ r.exchange }}</td>
                                <td class="rec-price" data-ths="{{ r.ths }}">{% if r.price %}{{ r.price }}{% else %}—{% endif %}</td>
                                <td>{% if r.margin_one_lot %}{{ r.margin_one_lot }}{% else %}—{% endif %}</td>
                                <td>{% if r.min_capital_one_lot %}{{ r.min_capital_one_lot }}{% else %}—{% endif %}</td>
                                <td><span class="badge {% if r.status=='ok' %}profit{% else %}planned{% endif %}">{{ r.status_label }}</span></td>
                            </tr>
                            {% endfor %}
                            {% else %}
                            <tr><td colspan="6" class="empty-hint">等待后台推送推荐…</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
window.TRADE_SIZING_MODE = {{ sizing_mode|tojson }};
window.TRADE_RISK_PERCENT = {{ risk_percent }};
</script>
<script src="{{ url_for('static', filename='js/trade.js') }}"></script>
{% endblock %}