{# Sim result partial: the honest real-cost equity curve + metrics + timeline slider + state panel. The
   slider scrubs the per-day arrays embedded in #sim-data ENTIRELY client-side (no per-tick refetch); only a
   capital/period change re-fetches /paper/sim/run. There is NO cost/flat toggle — the cost is the MEASURED
   real per-coin spread (a fact, not a knob). When the measured artifact has not been precomputed yet we show
   a short 'precomputing' note (never a flat slider, never a 500). #}
<div id="sim-result">
{% if measured_pending %}
  <p class="muted" style="font-size:12px; margin-bottom:8px; color:#d29922">
    measured real-cost curve precomputing — check back after the nightly job (the per-coin measured-cost
    artifact is built out-of-band by <code>fxhnt compare-measured-precompute</code>).</p>
{% else %}
{# Measured cost caption. Each coin pays its real per-COIN cost (published taker fee + half its real measured
   spread) so the curve is the honest de-inflated number. The Bybit liquid book uses the REAL L1 quoted spread
   (forward-realistic); Binance stays on the Corwin–Schultz daily-high/low proxy. #}
{% if used_real_spread %}
<p class="muted" style="font-size:12px; color:#3fb950; margin-bottom:8px"
   data-cost-mode="measured" data-cost-drag="{{ '%.2f'|format(cost_drag_bps) }}"
   title="Each coin pays the published taker fee plus half its REAL L1 quoted spread (live top-of-book), not the daily-high/low Corwin–Schultz proxy (which over-states the true quoted spread ~104×). CAVEAT: a current snapshot applied across history — forward-realistic at today's liquidity; 2021-22 spreads were wider, so early-history cost is understated.">
  measured per-coin cost — taker fee + half the real L1 quoted spread (forward-realistic — current liquidity; 2021-22 spreads were wider, so early-history cost is understated) · avg drag {{ '%.1f'|format(cost_drag_bps) }}bp</p>
{% else %}
<p class="muted" style="font-size:12px; color:#3fb950; margin-bottom:8px"
   data-cost-mode="measured" data-cost-drag="{{ '%.2f'|format(cost_drag_bps) }}"
   title="Each coin pays its real measured cost: the published taker fee plus half its Corwin–Schultz measured spread (from real daily high/low); no assumed market impact. This is the honest de-inflated curve — there is no configurable-cost what-if.">
  measured per-coin cost — taker fee + half the Corwin–Schultz spread · avg drag {{ '%.1f'|format(cost_drag_bps) }}bp</p>
{% endif %}
{% endif %}

{% if not measured_pending %}
{% if n_points == 0 %}
  <p class="muted">no simulated days for this period — pick a date range that overlaps the curve's history.</p>
  <script type="application/json" id="sim-data">{{ sim_data|tojson }}</script>
{% else %}

  <div class="sim-metrics" style="display:flex; flex-wrap:wrap; gap:16px; margin:8px 0 14px">
    <div><div class="muted" style="font-size:12px">CAGR</div>
      <b class="{{ 'pos' if metrics.cagr >= 0 else 'neg' }}">{{ '%.1f'|format(100*metrics.cagr) }}%</b></div>
    <div><div class="muted" style="font-size:12px">Sharpe</div>
      <b>{{ '%.2f'|format(metrics.sharpe) }}</b></div>
    <div><div class="muted" style="font-size:12px">max DD</div>
      <b class="neg">{{ '%.1f'|format(100*metrics.max_dd) }}%</b></div>
    <div><div class="muted" style="font-size:12px">worst year</div>
      <b class="{{ 'pos' if metrics.worst_year >= 0 else 'neg' }}">{{ '%.1f'|format(100*metrics.worst_year) }}%</b></div>
    <div><div class="muted" style="font-size:12px">best year</div>
      <b class="{{ 'pos' if metrics.best_year >= 0 else 'neg' }}">{{ '%.1f'|format(100*metrics.best_year) }}%</b></div>
    <div><div class="muted" style="font-size:12px">final $</div>
      <b>${{ metrics.end_value|money }}</b></div>
  </div>

  {% if is_bybit %}
  <div style="font-weight:600; color:#58a6ff; margin-bottom:4px">Backtest (real measured cost)
    <span class="muted" style="font-weight:400; font-size:12px">— naive equal-weight 4-edge Bybit book over the precomputed measured-cost history; scale by capital / window by period</span>
  </div>
  {% endif %}
  <div>{{ curve|safe }}</div>

  <div style="display:flex; align-items:center; gap:12px; margin:12px 0; flex-wrap:wrap">
    <span class="muted" style="font-size:12px">scrub timeline →</span>
    <input id="sim-scrub" type="range" min="0" max="{{ n_points - 1 }}" value="{{ n_points - 1 }}"
           step="1" style="flex:1; min-width:200px"
           title="Drag to inspect the curve at any day — updates the state panel below. (Nothing to click; just drag.)">
  </div>

  <div id="sim-state" style="display:flex; flex-wrap:wrap; gap:18px; border:1px solid #21262d; border-radius:8px; padding:10px 14px">
    <div><div class="muted" style="font-size:12px">date</div><b id="sim-st-date">—</b></div>
    <div><div class="muted" style="font-size:12px">equity</div><b id="sim-st-equity">—</b></div>
    <div><div class="muted" style="font-size:12px">drawdown</div><b id="sim-st-dd">—</b></div>
    <div><div class="muted" style="font-size:12px">leverage</div><b id="sim-st-lev">—</b></div>
    <div><div class="muted" style="font-size:12px">killed</div><b id="sim-st-killed">—</b></div>
    <div><div class="muted" style="font-size:12px">active sleeves</div><b id="sim-st-active">—</b></div>
  </div>

  <script type="application/json" id="sim-data">{{ sim_data|tojson }}</script>

  <script>
    (function () {
      const dataEl = document.getElementById("sim-data");
      if (!dataEl) { return; }
      const D = JSON.parse(dataEl.textContent);
      const n = D.dates.length;
      if (!n) { return; }

      const scrub = document.getElementById("sim-scrub");
      const svg = document.getElementById("sim-curve");
      const line = document.getElementById("sim-cursor-line");
      const dot = document.getElementById("sim-cursor-dot");

      // Curve geometry republished by charts.equity_curve — used to place the cursor identically.
      const lo = parseFloat(svg.getAttribute("data-lo"));
      const span = parseFloat(svg.getAttribute("data-span"));
      const step = parseFloat(svg.getAttribute("data-step"));
      const pad = parseFloat(svg.getAttribute("data-pad"));
      const h = svg.viewBox.baseVal.height;

      function yOf(v) { return h - (v - lo) / span * (h - 2 * pad) - pad; }

      function money(x) { return "$" + Math.round(x).toLocaleString("en-US"); }
      function pct(x) { return (100 * x).toFixed(2) + "%"; }

      function render(i) {
        document.getElementById("sim-st-date").textContent = D.dates[i];
        document.getElementById("sim-st-equity").textContent = money(D.equity[i]);
        document.getElementById("sim-st-dd").textContent = pct(D.drawdown[i]);
        document.getElementById("sim-st-lev").textContent = D.leverage[i].toFixed(2) + "×";
        document.getElementById("sim-st-killed").textContent = D.killed[i] ? "yes" : "no";
        document.getElementById("sim-st-active").textContent = D.n_active[i];
        const x = i * step;
        line.setAttribute("x1", x); line.setAttribute("x2", x);
        dot.setAttribute("cx", x); dot.setAttribute("cy", yOf(D.equity[i]));
      }

      scrub.addEventListener("input", function () { render(parseInt(scrub.value, 10)); });

      render(n - 1);   // start at the latest day (drag the slider to inspect any earlier day)
    })();
  </script>
{% endif %}
{% endif %}

{% if is_bybit and forward %}
  <div style="margin-top:22px; border-top:1px solid #21262d; padding-top:14px">
    <div style="font-weight:600; color:#3fb950; margin-bottom:4px">Live forward — {{ forward.display_name }}
      <span class="muted" style="font-weight:400; font-size:12px">({{ forward.venue }})</span>
    </div>
    <div class="muted" style="font-size:12px; margin-bottom:8px">
      {% if forward.t0 %}T0 {{ forward.t0 }} — {% endif %}
      gate <b style="color:{% if forward.gate_status == 'GO' %}#3fb950{% elif forward.gate_status == 'NO_GO' %}#f85149{% else %}#d29922{% endif %}">{{ forward.gate_status }}</b>
      {% if forward.gate_reason %}({{ forward.gate_reason }}){% endif %}
      {% if forward.as_of %} · as of {{ forward.as_of }}{% endif %}
    </div>
    {% if forward.n_points %}
    <div class="sim-metrics" style="display:flex; flex-wrap:wrap; gap:16px; margin:6px 0 10px">
      <div><div class="muted" style="font-size:12px">forward days</div><b>{{ forward.days }}</b></div>
      <div><div class="muted" style="font-size:12px">forward return</div>
        <b class="{{ 'pos' if forward.total_return_pct >= 0 else 'neg' }}">{{ '%.2f'|format(forward.total_return_pct) }}%</b></div>
      <div><div class="muted" style="font-size:12px">forward Sharpe</div><b>{{ '%.2f'|format(forward.sharpe) }}</b></div>
    </div>
    <div>{{ forward.curve|safe }}</div>
    {% else %}
    <p class="muted">no live forward NAV recorded yet — the nightly track starts booking from T0 once the
      Bybit warehouse has data.</p>
    {% endif %}
  </div>
{% endif %}
</div>