{% extends "base.html" %}
{% block title %}关键位监控 - 国内期货监控系统{% endblock %}
{% block content %}
<h1 class="page-title">关键位监控</h1>

<div class="split-grid">
    <div class="card">
        <h2>新增监控</h2>
        <div class="card-body">
            <form action="{{ url_for('add_key') }}" method="post" class="form-row">
                <div class="symbol-wrap" style="min-width:180px;flex:1">
                    <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>
                <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>
            </form>
            <h3 style="font-size:.95rem;color:#a9a9ff;margin:1rem 0 .75rem">监控列表</h3>
            <div class="list card-scroll">
                {% for k in keys %}
                <div class="list-item">
                    <div>
                        <strong>{{ k.symbol_name or k.symbol }}</strong> | {{ k.monitor_type }}
                        <span class="badge dir">{{ '做多' if k.direction == 'long' else '做空' }}</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 style="color:#888;padding:1rem">暂无监控</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" style="color:#888">暂无历史</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}