{% extends "base.html" %}
{% block title %}条件单 · 期权中控{% endblock %}
{% block body %}
<section class="page-head cond-head">
  <div>
    <h1>条件单</h1>
    <p class="muted cond-lead">中控下发到实例；列表由中控后台缓存并推送到浏览器。盯盘与开平仓在客户端。有仓或已占用的机器不可选。</p>
    <p class="muted" id="cond-status">读取缓存…</p>
  </div>
  <div class="cond-head-actions">
    <button type="button" class="btn" id="btn-cond-refresh">刷新</button>
    <label for="cond-add-toggle" class="settings-primary inst-add-trigger">新建条件单</label>
  </div>
</section>

<input type="checkbox" id="cond-add-toggle" class="cond-add-check">

<div class="cond-layout">
  <section class="panel cond-card cond-add-panel">
    <div class="cond-card-head">
      <h2>新建条件单</h2>
      <span class="cond-chip">左侧单</span>
    </div>

    <div class="cond-create-split">
      <div class="cond-create-left">
        <div class="cond-col-title">策略</div>

        <div class="cond-block">
          <div class="cond-uly-side-row">
            <div class="cond-uly-side-item">
              <span class="cond-mini-label">标的</span>
              <div class="cond-seg" id="cf-uly-seg" role="group" aria-label="标的">
                <button type="button" class="cond-seg-btn on" data-uly="ETH">ETH</button>
                <button type="button" class="cond-seg-btn" data-uly="BTC">BTC</button>
              </div>
              <select id="cf-underlying" class="cond-native-select" hidden>
                <option value="ETH" selected>ETH</option>
                <option value="BTC">BTC</option>
              </select>
            </div>
            <div class="cond-uly-side-item">
              <span class="cond-mini-label">方向</span>
              <div class="cond-seg" id="cf-side-seg" role="group" aria-label="方向">
                <button type="button" class="cond-seg-btn on" data-side="P">看跌 Put</button>
                <button type="button" class="cond-seg-btn" data-side="C">看涨 Call</button>
              </div>
              <select id="cf-opt-type" class="cond-native-select" hidden>
                <option value="P" selected>看跌 Put</option>
                <option value="C">看涨 Call</option>
              </select>
            </div>
          </div>
        </div>

        <div class="cond-block">
          <div class="cond-param-row">
            <label class="cond-field">触发价
              <input id="cf-trigger-px" type="number" step="any" placeholder="如 3000" required>
            </label>
            <label class="cond-field">偏离 %
              <input id="cf-deviation" type="number" step="0.1" value="1" placeholder="1" required>
            </label>
            <label class="cond-field">最短到期 h
              <input id="cf-expiry-h" type="number" step="1" value="24" placeholder="24" required>
            </label>
          </div>
          <div class="cond-trigger-hint is-put" id="cf-trigger-hint"></div>
        </div>

        <div class="cond-block">
          <div class="cond-col-title">出场</div>
          <div class="cond-exit-row">
            <label class="cond-field">目标指数（可选）
              <input id="cf-target" type="number" step="any" placeholder="如 2800">
            </label>
            <label class="cond-switch">
              <input id="cf-pe" type="checkbox" checked>
              <span>翻倍出场</span>
            </label>
            <label class="cond-field cond-field-mult">倍数
              <input id="cf-pe-mult" type="number" step="0.1" value="1" placeholder="1">
            </label>
          </div>
        </div>
      </div>

      <div class="cond-create-right">
        <div class="cond-right-head">
          <div class="cond-col-title">下发到客户端</div>
          <div class="muted cond-right-meta" id="cf-inst-meta">按标的过滤</div>
        </div>
        <p class="muted cond-right-lead">按标的白名单过滤；余额旁可本页划转。</p>
        <div id="cf-instances"></div>
      </div>
    </div>

    <div class="cond-actions">
      <button type="button" class="btn" id="btn-cond-create">下发条件单</button>
      <label for="cond-add-toggle" class="btn btn-secondary">取消</label>
      <span class="muted" id="cf-status"></span>
    </div>
  </section>

  <section class="panel cond-card">
    <div class="cond-card-head">
      <h2>进行中</h2>
    </div>
    <div id="cond-list-active" class="muted">加载中…</div>
  </section>

  <section class="panel cond-card">
    <div class="cond-card-head">
      <h2>已结束</h2>
    </div>
    <div id="cond-list-done" class="muted">加载中…</div>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='cond_orders.js') }}?v=16"></script>
<script>HubCondOrders.boot();</script>
{% endblock %}