{% extends "base.html" %}
{% from "_macros.html" import exec_badge %}
{% block title %}Backtest{% endblock %}
{% block body %}
{# ===== BACKTEST: the HONEST real-cost curve over the Bybit books (the cockpit's only venue since Task 7a
   removed the legacy venue toggle + the legacy-vs-bybit "compare" view) — same header/section/badge skin
   as Overview + Paper. book + capital + period -> the precomputed MEASURED (real per-coin L1 spread) curve.
   There is NO configurable cost: the cost is a measured FACT, not a slider (a draggable cost is a fund
   foot-gun — drag it to 0 and you resurrect the +7097% mirage). The Bybit 4-edge DEPLOY book is the default
   (the honest deployable curve; the fund's crypto allocation targets this risk-parity book again, reverted
   2026-07-16 — plan `2026-07-16-book-representation-and-venue-cap.md` Task A). PAPER-badged. ===== #}
<div class="section">
{# ── TRADER HEADER: h1 + a one-line subtitle. No orientation blurb — the form + curve below carry the page. #}
  <h1 style="margin:0 0 2px">Backtest {{ exec_badge('paper') }}</h1>
  <div class="muted" style="font-size:12.5px; margin-bottom:16px">a what-if on capital &amp; period at real trading cost, read-only — for the actual traded track see <a href="/paper/replay">Replay</a></div>

{# Book switch — Bybit 4-edge (deploy, default) · Bybit 4-edge levered (shadow) · the IBKR paper books
   (Task 1/D1), each labeled in PLAIN LANGUAGE via book_labels — never the raw registry id. Relative URLs. #}
<div style="display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap">
  {% for b in books %}
  <a href="/paper/sim?book={{ b }}"
     style="text-decoration:none; padding:6px 14px; border-radius:6px; border:1px solid #30363d;
            {% if b == cfg.book %}background:#1f6feb22; color:#58a6ff; border-color:#1f6feb{% else %}background:#161b22; color:#8b949e{% endif %}">
    {% if b == 'bybit_4edge' %}Bybit 4-edge book <span class="muted" style="font-size:11px">· deploy</span>
    {%- elif b == 'bybit_4edge_levered' %}Bybit 4-edge levered <span class="muted" style="font-size:11px">· shadow</span>
    {%- else %}{{ book_labels.get(b, b) }}{% endif %}</a>
  {% endfor %}
</div>

{# Wired with HTMX ATTRIBUTES (not an inline <script>): on any field change htmx GETs /paper/sim/run with the
   form's values (incl. the hidden book) and swaps the result. htmx processes hx-* on load reliably — an inline
   IIFE in this template's content path did NOT execute, so the change-listener never attached (the live bug). #}
<form id="sim-form" data-book="{{ cfg.book }}"
      hx-get="/paper/sim/run" hx-trigger="submit, change, keyup changed delay:500ms from:input[name='capital']"
      hx-target="#sim-result-wrap" hx-swap="innerHTML" hx-include="this"
      style="display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-bottom:16px; border:1px solid #21262d; border-radius:8px; padding:12px 14px">
  <input type="hidden" name="book" value="{{ cfg.book }}">
  <label style="display:flex; flex-direction:column; gap:4px; font-size:12px" class="muted">capital ($)
    {# step="any" (NOT a fixed step) so the browser doesn't reject round numbers: with min=1 step=1000 the
       HTML5 step rule made 100000 "invalid" (not 1+n·1000) and blocked submit with "enter a valid number". #}
    <input type="number" name="capital" min="0" step="any" value="{{ cfg.capital|int }}"
           style="background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; padding:4px 8px; width:120px"></label>

  <label style="display:flex; flex-direction:column; gap:4px; font-size:12px" class="muted">start
    <input type="date" name="start" value="{{ cfg.start }}" min="{{ cfg.range_min }}" max="{{ cfg.range_max }}"
           style="background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; padding:4px 8px"></label>
  <label style="display:flex; flex-direction:column; gap:4px; font-size:12px" class="muted">end
    <input type="date" name="end" value="{{ cfg.end }}" min="{{ cfg.range_min }}" max="{{ cfg.range_max }}"
           style="background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; padding:4px 8px"></label>

  <span class="muted" style="font-size:12px; align-self:center">↻ updates live as you change capital / period</span>
</form>

{# The result is lazy-loaded: the form above paints INSTANTLY; HTMX fetches the precomputed measured curve from
   /paper/sim/run on load and swaps it in here. Using htmx (not fetch+innerHTML) means the result fragment's
   inline scripts — the timeline scrubber — actually run on every swap. #}
<div id="sim-result-wrap" hx-get="{{ result_url }}" hx-trigger="load" hx-swap="innerHTML">
  <p class="muted">loading curve…</p>
</div>
</div>
{% endblock %}