{% extends "base.html" %}
{% block title %}关键位监控 - 国内期货监控系统{% endblock %}
{% block content %}
<div class="split-grid">
    <div class="card">
        <h2>新增监控</h2>
        <div class="card-body">
            <form action="{{ url_for('add_key') }}" method="post" class="form-compact">
                <div class="form-line line-3">
                    <div class="symbol-wrap">
                        <input type="text" class="symbol-input" placeholder="主力合约" autocomplete="off" required>
                        <input type="hidden" name="symbol" required>
                        <input type="hidden" name="symbol_name">
                        <input type="hidden" name="market_code" required>
                        <input type="hidden" name="sina_code">
                        <div class="symbol-dropdown"></div>
                        <div class="symbol-selected"></div>
                    </div>
                    <select name="type" required>
                        <option value="箱体突破">箱体突破</option>
                        <option value="收敛突破">收敛突破</option>
                        <option value="关键阻力位">关键阻力位</option>
                        <option value="关键支撑位">关键支撑位</option>
                    </select>
                    <select name="direction" required>
                        <option value="">方向</option>
                        <option value="long">做多</option>
                        <option value="short">做空</option>
                    </select>
                </div>
                <div class="form-line line-3">
                    <input name="upper" type="number" step="0.0001" placeholder="上沿/阻力" required>
                    <input name="lower" type="number" step="0.0001" placeholder="下沿/支撑" required>
                    <button type="submit" class="btn-primary">添加</button>
                </div>
            </form>
            <h3 class="section-label">监控列表</h3>
            <div class="list card-scroll" id="key-monitor-list">
                {% for k in keys %}
                <div class="list-item key-item" data-key-id="{{ k.id }}" style="padding:.75rem;font-size:.85rem">
                    <div>
                        <strong>{{ k.symbol_name or k.symbol }}</strong> {{ k.monitor_type }}
                        <span class="badge dir">{{ '多' if k.direction == 'long' else '空' }}</span>
                    </div>
                    <div class="key-live">
                        <span class="live-price-line">现价：<span class="live-price">--</span></span>
                        <span class="live-dist">距上<span class="dist-up">--</span> 距下<span class="dist-down">--</span></span>
                    </div>
                    <div>上{{ k.upper }} 下{{ k.lower }}</div>
                    <a href="{{ url_for('del_key', pid=k.id) }}" class="btn-del" onclick="return confirm('移入历史？')">删</a>
                </div>
                {% else %}
                <div class="empty-hint">暂无监控</div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="card">
        <h2>监控历史</h2>
        <div class="card-body card-scroll">
            <table>
                <thead><tr><th>品种</th><th>类型</th><th>方向</th><th>上沿</th><th>下沿</th><th>归档</th></tr></thead>
                <tbody>
                    {% for k in history %}
                    <tr>
                        <td>{{ k.symbol_name or k.symbol }}</td>
                        <td>{{ k.monitor_type }}</td>
                        <td><span class="badge dir">{{ '多' if k.direction == 'long' else '空' }}</span></td>
                        <td>{{ k.upper }}</td>
                        <td>{{ k.lower }}</td>
                        <td>{{ k.archived_at[:16] if k.archived_at else '' }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="text-muted">暂无历史</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/keys.js') }}"></script>
{% endblock %}