{% extends "base.html" %}
{% from "_macros.html" import headline_card, exec_badge, deploy_constituent_row %}
{% block title %}Paper book{% endblock %}
{% block body %}
{# ===== DEPLOY: the fund (Bybit) — the cockpit's only paper-book venue (the legacy venue toggle was
   removed in Task 7a). Headline = the SAME connected-backfill card the Overview leads with; below it the
   detail the Paper page uniquely provides — the LIVE per-symbol book + trades — then the individual
   constituent edges (consistent with the Overview's deploy constituents). PAPER-badged. ===== #}
<div class="section deploy">
  <h2>Bybit 4-edge book
    <span class="muted" style="font-size:13px">— the fund · deploy venue · live mark-to-market</span>
    {{ exec_badge('paper') }}
    <span style="font-size:11px; font-weight:600; background:#f7a60022; color:#f7a600; border:1px solid #f7a60066; border-radius:10px; padding:1px 9px; vertical-align:middle">BYBIT</span></h2>

  {{ headline_card(headline, headline_curve) }}

  {# Forward RECONCILIATION gate (the only true OOS check): PASS iff the ~2wk window is reached AND the
     forward reconciles with the backtest AND execution is clean. Each criterion shows ✓/✗ at a glance. #}
  {% if forward %}
  <div style="border:1px solid #21262d; border-radius:8px; padding:12px 16px; margin-bottom:14px">
    <div>
      <b>forward track</b>
      <span class="muted" style="font-size:12px">· {{ forward.venue }} · since {{ forward.t0 or '—' }}</span>
      <span class="{{ 'pos' if forward.gate_status == 'PASS' else 'neg' }}" style="font-size:12px; margin-left:6px">[{{ forward.gate_status }}]</span>
    </div>
    <div class="muted" style="font-size:12px">{{ forward.gate_reason }}</div>
    {% if forward.recon_gate %}
      <div style="display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; font-size:12px">
        <span class="{{ 'pos' if forward.days_ok else 'muted' }}">{{ '✓' if forward.days_ok else '·' }} ~2wk window
          <span class="muted">({{ forward.days }}/{{ forward.gate_min_days }} days)</span></span>
        <span class="{{ 'pos' if forward.reconciles_ok else 'neg' }}">{{ '✓' if forward.reconciles_ok else '✗' }} reconciles with backtest</span>
        <span class="{{ 'pos' if forward.clean_exec_ok else 'neg' }}">{{ '✓' if forward.clean_exec_ok else '✗' }} clean execution</span>
      </div>
    {% else %}
      <div class="muted" style="font-size:12px">{{ forward.days }} forward day{{ 's' if forward.days != 1 else '' }}</div>
    {% endif %}
    {% if forward.n_points > 1 %}
      <div style="margin-top:8px">{{ forward.curve|safe }}</div>
      <div class="muted" style="font-size:12px">forward return {{ '%+.2f'|format(forward.total_return_pct) }}% · Sharpe {{ '%.2f'|format(forward.sharpe) }}</div>
    {% endif %}
  </div>
  {% endif %}

  {# The detail /paper uniquely provides: the LIVE per-symbol book (positions + mark-to-market) + trades. #}
  <div hx-get="/paper/live" hx-trigger="every 45s" hx-swap="outerHTML">
    {% include "_paper_live.html" %}
  </div>

  <h3>recent trades <span class="muted" style="font-size:12px">({{ v.trades|length }})</span></h3>
  {# bounded scroll box so the trades don't stretch the page on mobile (each row stacks into a card) #}
  <div class="table-wrap" style="max-height:420px; overflow-y:auto"><table class="fleet">
    <thead><tr><th>ts</th><th>sleeve</th><th>symbol</th><th>side</th><th>qty</th><th>price</th><th>reason</th></tr></thead>
    <tbody>
    {% for t in v.trades %}
      <tr>
        <td data-label="ts" class="muted" style="font-size:12px">{{ t.ts }}</td>
        <td data-label="sleeve" class="muted">{{ t.sleeve }}</td>
        <td data-label="symbol">{{ t.symbol }}</td>
        <td data-label="side" class="{{ 'pos' if t.side == 'BUY' else 'neg' }}">{{ t.side }}</td>
        <td data-label="qty">{{ t.qty|qty }}</td>
        <td data-label="price">{{ t.price|qty }}</td>
        <td data-label="reason" class="muted">{{ t.reason }}</td>
      </tr>
    {% else %}
      <tr><td colspan="7" class="muted">no trades yet</td></tr>
    {% endfor %}
    </tbody>
  </table></div>
  <p class="muted" style="font-size:11px" title="paper deploy book — daily rebalance marked to live prices; no live broker order flow">live mark-to-market · paper</p>

  {# Individual edges — the per-sleeve breakdown, consistent with the Overview's deploy constituents. #}
  <h3 style="margin-top:18px">individual edges
    <span class="muted" style="font-size:12px">— each edge shown on its own</span></h3>
  <div class="table-wrap"><table class="fleet">
    <thead><tr><th>edge</th><th>metric</th><th>maxDD</th></tr></thead>
    <tbody>
    {% for e in individual_edges %}{{ deploy_constituent_row(e) }}{% else %}
      <tr><td colspan="3" class="muted">no bybit sleeve backtest data yet</td></tr>
    {% endfor %}
    </tbody>
  </table></div>
</div>
{% endblock %}