{% extends "base.html" %}
{% block title %}实例 · 期权中控{% endblock %}
{% block body %}
{% set open_add = (not instances) or ((request.args.get('add') or '') == '1') %}
<section class="page-head settings-head inst-page-head">
  <div>
    <p class="settings-eyebrow">Instances</p>
    <h1>客户端实例</h1>
    <p class="muted settings-lead">登记各交易机地址与 Bridge Token；远程更新请到系统设置。</p>
  </div>
  <div class="inst-page-head-actions">
    <a class="btn btn-secondary" href="/settings?tab=update">系统更新</a>
    <label for="inst-add-toggle" class="settings-primary inst-add-trigger">添加实例</label>
  </div>
</section>

<input type="checkbox" id="inst-add-toggle" class="inst-add-check"{% if open_add %} checked{% endif %}>

<section class="settings-shell panel inst-shell">
  <div class="inst-add-panel">
    <div class="settings-card-head">
      <span class="settings-badge">New</span>
      <h2>添加实例</h2>
      <p class="muted">Token 需与客户端 <code>HUB_BRIDGE_TOKEN</code> 一致；公网 URL 需可被中控访问。</p>
    </div>
    <form method="post" class="settings-form inst-form" autocomplete="off">
      <input type="hidden" name="action" value="create">
      <div class="settings-row-2">
        <label class="settings-field">名称
          <input name="name" required placeholder="ETH-主策略" autocomplete="off">
        </label>
        <label class="settings-field">标签
          <input name="tags" placeholder="eth,sim" autocomplete="off">
        </label>
      </div>
      <label class="settings-field">公网 URL
        <input name="base_url" required placeholder="https://okx-eth.example.com" autocomplete="off">
      </label>
      <div class="settings-row-2">
        <label class="settings-field">Bridge Token
          <span class="inst-token-wrap">
            <input type="password" name="bridge_token" required placeholder="与客户端 HUB_BRIDGE_TOKEN 一致" autocomplete="new-password" class="inst-token-input">
            <button type="button" class="btn btn-sm btn-secondary inst-token-toggle" aria-label="显示 Token">显示</button>
          </span>
        </label>
        <label class="settings-field">Embed 路径
          <input name="embed_path" value="/embed" autocomplete="off">
        </label>
      </div>
      <label class="settings-switch">
        <input type="checkbox" name="enabled" value="1" checked>
        <span class="settings-switch-ui" aria-hidden="true"></span>
        <span class="settings-switch-text">
          <strong>启用拉取</strong>
          <small>关闭后总览不再巡检此机</small>
        </span>
      </label>
      <div class="settings-actions">
        <button type="submit" class="settings-primary">添加</button>
        <label for="inst-add-toggle" class="btn btn-secondary">取消</label>
      </div>
    </form>
  </div>

  <div class="settings-card-head inst-list-head">
    <span class="settings-badge">Registry</span>
    <h2>已登记 · {{ instances|length }}</h2>
    <p class="muted">表格查看；点「编辑」展开修改。Token 默认隐藏。</p>
  </div>

  <div class="inst-table-wrap">
    {% if not instances %}
    <p class="muted inst-empty">暂无实例。先在客户端配置 <code>HUB_BRIDGE_TOKEN</code> 并保证公网可访问，再点右上角「添加实例」。</p>
    {% else %}
    <table class="inst-table">
      <thead>
        <tr>
          <th>名称</th>
          <th>URL</th>
          <th>状态</th>
          <th>版本</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for inst in instances %}
        <tr class="inst-row" data-id="{{ inst.id }}" data-name="{{ inst.name }}">
          <td class="inst-td-name"><strong>{{ inst.name }}</strong></td>
          <td class="inst-td-url muted" title="{{ inst.base_url }}">{{ inst.base_url }}</td>
          <td>
            {% if inst.enabled %}
            <span class="inst-pill inst-pill--on">启用</span>
            {% else %}
            <span class="inst-pill inst-pill--off">停用</span>
            {% endif %}
          </td>
          <td><span class="update-version muted" data-inst-version>—</span></td>
          <td class="inst-td-tags muted">{{ inst.tags or '—' }}</td>
          <td class="inst-td-ops">
            <label class="btn btn-sm" for="inst-edit-{{ inst.id }}">编辑</label>
            <a class="btn btn-sm" href="/desk?id={{ inst.id }}">内嵌</a>
            <button type="button" class="btn btn-sm btn-secondary" data-inst-refresh-ver>版本</button>
            <form method="post" class="inst-inline-del" onsubmit="return confirm('确认删除「{{ inst.name }}」？')">
              <input type="hidden" name="action" value="delete">
              <input type="hidden" name="id" value="{{ inst.id }}">
              <button type="submit" class="btn-danger btn-sm">删除</button>
            </form>
          </td>
        </tr>
        <tr class="inst-edit-row">
          <td colspan="6">
            <input type="checkbox" id="inst-edit-{{ inst.id }}" class="inst-edit-check">
            <div class="inst-edit-panel">
              <form method="post" class="settings-form inst-form" autocomplete="off">
                <input type="hidden" name="action" value="update">
                <input type="hidden" name="id" value="{{ inst.id }}">
                <div class="settings-row-2">
                  <label class="settings-field">名称
                    <input name="name" value="{{ inst.name }}" required autocomplete="off">
                  </label>
                  <label class="settings-field">标签
                    <input name="tags" value="{{ inst.tags or '' }}" autocomplete="off">
                  </label>
                </div>
                <label class="settings-field">公网 URL
                  <input name="base_url" value="{{ inst.base_url }}" required autocomplete="off">
                </label>
                <div class="settings-row-2">
                  <label class="settings-field">Bridge Token
                    <span class="inst-token-wrap">
                      <input type="password" name="bridge_token" value="{{ inst.bridge_token }}" required autocomplete="new-password" class="inst-token-input">
                      <button type="button" class="btn btn-sm btn-secondary inst-token-toggle" aria-label="显示 Token">显示</button>
                    </span>
                  </label>
                  <label class="settings-field">Embed 路径
                    <input name="embed_path" value="{{ inst.embed_path }}" autocomplete="off">
                  </label>
                </div>
                <label class="settings-switch">
                  <input type="checkbox" name="enabled" value="1" {% if inst.enabled %}checked{% endif %}>
                  <span class="settings-switch-ui" aria-hidden="true"></span>
                  <span class="settings-switch-text">
                    <strong>启用拉取</strong>
                    <small>关闭后总览不再巡检此机</small>
                  </span>
                </label>
                <div class="inst-card-actions">
                  <button type="submit" class="settings-primary">保存</button>
                  <label for="inst-edit-{{ inst.id }}" class="btn btn-secondary">收起</label>
                  <a class="btn btn-secondary" href="/settings?tab=update">系统更新</a>
                </div>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='instances_page.js') }}?v=2"></script>
{% endblock %}