{% extends "base.html" %}
{% from "_macros.html" import headline_card, exec_badge, deploy_constituent_row %}
{% block title %}Paper book{% endblock %}
{% block body %}
{# Venue switch — Bybit is the DEPLOY fund (default), Binance is research/secondary. Relative URLs only. #}
<div style="display:flex; gap:8px; margin-bottom:14px">
  <a href="/paper?venue=bybit"
     style="text-decoration:none; padding:6px 14px; border-radius:6px; border:1px solid #30363d;
            {% if venue == 'bybit' %}background:#1f6feb22; color:#58a6ff; border-color:#1f6feb{% else %}background:#161b22; color:#8b949e{% endif %}">Bybit
     <span class="muted" style="font-size:11px">· deploy</span></a>
  <a href="/paper?venue=binance"
     style="text-decoration:none; padding:6px 14px; border-radius:6px; border:1px solid #30363d;
            {% if venue == 'binance' %}background:#1f6feb22; color:#58a6ff; border-color:#1f6feb{% else %}background:#161b22; color:#8b949e{% endif %}">Binance
     <span class="muted" style="font-size:11px">· research</span></a>
</div>

{% if venue == 'binance' %}
{# ===== RESEARCH: the Binance paper book is NOT the fund — dimmed/secondary, same components, PAPER-badged. ===== #}
<div class="section research">
  <h2>Binance paper book
    <span class="muted" style="font-size:13px">— research, not the fund · live mark-to-market</span>
    {{ exec_badge('paper') }}
    <span style="font-size:11px; font-weight:600; background:#f0b90b22; color:#f0b90b; border:1px solid #f0b90b66; border-radius:10px; padding:1px 9px; vertical-align:middle">BINANCE</span></h2>
  <div>{{ spark|safe }}</div>

  <h3>sleeves</h3>
  <div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px">
  {% for sleeve, s in v.sleeves.items() %}
    <div style="border:1px solid #21262d; border-radius:8px; padding:10px 14px; min-width:170px">
      <div><b>{{ sleeve }}</b></div>
      <div class="muted" style="font-size:12px">alloc {{ '%.1f'|format(100*s.weight) }}% · {{ s.n }} position{{ 's' if s.n != 1 else '' }}</div>
      <div class="{{ 'pos' if s.pnl >= 0 else 'neg' }}">PnL {{ s.pnl|money_signed }}</div>
    </div>
  {% else %}
    <p class="muted">no sleeves yet</p>
  {% endfor %}
  </div>

  <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 research book — daily rebalance marked to live prices; no live broker order flow">research · paper</p>
</div>

{% else %}
{# ===== DEPLOY: the fund (Bybit). 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 paper 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?venue=bybit" 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">— standalone Bybit (vol-targeted @ 20%)</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>
{% endif %}
{% endblock %}