{% 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>
        <button type="button" class="btn-primary" id="btn-ctp-connect" style="padding:.4rem .9rem;font-size:.8rem">连接 CTP</button>
    </div>

    <div class="card trade-order-card">
        <div class="trade-tabs">
            <span class="active">期货下单</span>
            <a href="{{ url_for('recommend_page') }}">品种推荐</a>
            <a href="{{ url_for('strategy_page') }}">策略交易</a>
        </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" value="">
                <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>
                <span class="btn-sub" id="max-long">≤—</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>
                <span class="btn-sub" id="max-short">≤—</span>
            </button>
            <button type="button" class="trade-btn close" id="btn-close-long">
                <span class="btn-sub">平多</span>
                <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-sub">平空</span>
                <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">SimNow 模拟盘：请先连接 CTP。输入品种与手数后显示跳动价值与价格精度。</p>
            {% if ctp_status.last_error %}<p class="text-loss" style="font-size:.78rem">{{ ctp_status.last_error }}</p>{% endif %}
        </div>
    </div>

    {% if ctp_positions %}
    <div class="card">
        <h2>CTP 持仓（SimNow / 柜台）</h2>
        <ul class="list">
            {% for p in ctp_positions %}
            <li class="list-item">
                <span>{{ p.symbol }} {{ '多' if p.direction=='long' else '空' }} {{ p.lots }}手 @ {{ p.avg_price }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
</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 %}