{% extends "base.html" %}
{% from "_macros.html" import exec_badge %}
{% block title %}Backtest{% endblock %}
{% block body %}
{# ===== BACKTEST: the HONEST real-cost curve over the deploy/research books — 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 Binance combined book is research-only. PAPER-badged. ===== #}
<div class="section">
  <h2>Backtest
    <span class="muted" style="font-size:13px">— honest real-cost curve (read-only)</span>
    {{ exec_badge('paper') }}</h2>
  <p class="muted" style="font-size:12px"
     title="The precomputed real-cost curve for the chosen book: each coin pays its real measured cost (taker fee + half the real L1 spread). Choose capital + period to scale/window it. This is a what-if on capital/period, not the live record; for the actual recorded forward track (real positions & trades) see Replay.">
    book / capital / period · real measured cost (not a knob) · what-if, not the live record ·
    <a href="/paper/replay">recorded track → Replay</a></p>

{# Book switch — Bybit 4-edge (deploy, default) · Binance combined (research) · Compare A/B. Relative URLs. #}
<div style="display:flex; gap:8px; margin-bottom:14px">
  {% 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 <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>{% elif b == 'compare' %}Compare A/B{% else %}Binance combined <span class="muted" style="font-size:11px">· research</span>{% 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 %}