{% 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-section">
      <div class="cond-section-title">入场</div>
      <div class="cond-grid">
        <label>标的
          <select id="cf-underlying">
            <option value="ETH">ETH</option>
            <option value="BTC">BTC</option>
          </select>
        </label>
        <label>方向
          <select id="cf-opt-type">
            <option value="P">看跌 Put</option>
            <option value="C">看涨 Call</option>
          </select>
        </label>
        <label>触发价
          <input id="cf-trigger-px" type="number" step="any" placeholder="如 3000" required>
        </label>
        <label>偏离 %
          <input id="cf-deviation" type="number" step="0.1" value="1" placeholder="1" required>
        </label>
        <label>最短到期(小时)
          <input id="cf-expiry-h" type="number" step="1" value="24" placeholder="24" required>
        </label>
        <div class="cond-trigger-hint" id="cf-trigger-hint"></div>
      </div>
    </div>

    <div class="cond-section">
      <div class="cond-section-title">出场</div>
      <div class="cond-grid">
        <label>目标指数(可选)
          <input id="cf-target" type="number" step="any" placeholder="如 2800">
        </label>
        <label>翻倍倍数
          <input id="cf-pe-mult" type="number" step="0.1" value="1" placeholder="1">
        </label>
        <label class="cond-switch">
          <input id="cf-pe" type="checkbox" checked>
          <span>翻倍出场</span>
        </label>
      </div>
    </div>

    <div class="cond-section">
      <div class="cond-section-title">客户端</div>
      <p class="muted" style="margin:0 0 8px;font-size:.76rem">展示交易账户可用；右侧「打开」新标签进期权实例划转，划完后回此页刷新即可。</p>
      <div id="cf-instances"></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=8"></script>
<script>HubCondOrders.boot();</script>
{% endblock %}