<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trading Dashboard</title>
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
    <style>
        :root {
            --bg: #000000;
            --card: #1c1c1e;
            --elevated: #2c2c2e;
            --separator: #38383a;
            --label: #86868b;
            --text: #f5f5f7;
            --green: #30d158;
            --red: #ff453a;
            --blue: #0a84ff;
            --orange: #ff9f0a;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

        /* Navigation */
        .nav { display: flex; justify-content: center; gap: 0; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--separator); position: sticky; top: 0; z-index: 100; }
        .nav-btn { padding: 8px 24px; font-size: 13px; font-weight: 500; color: var(--label); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; letter-spacing: 0.3px; }
        .nav-btn:hover { color: var(--text); }
        .nav-btn.active { color: var(--text); border-bottom-color: var(--blue); }

        /* Panels */
        .panel { display: none; padding: 32px 24px; max-width: 960px; margin: 0 auto; }
        .panel.active { display: block; }

        /* Hero */
        .hero { text-align: center; padding: 48px 0 32px; }
        .hero-number { font-size: 56px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
        .hero-sub { font-size: 15px; color: var(--label); margin-top: 8px; font-weight: 400; }
        .hero-row { display: flex; justify-content: center; gap: 48px; margin-top: 24px; }
        .hero-stat { text-align: center; }
        .hero-stat .val { font-size: 17px; font-weight: 600; }
        .hero-stat .lbl { font-size: 11px; color: var(--label); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

        /* Signal table */
        .section-title { font-size: 11px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--separator); }
        .signal-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(56,56,58,0.4); }
        .signal-row:last-child { border-bottom: none; }
        .signal-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 12px; flex-shrink: 0; }
        .signal-name { flex: 0 0 160px; font-size: 14px; font-weight: 500; }
        .signal-bar-wrap { flex: 1; display: flex; align-items: center; gap: 8px; }
        .signal-bar { height: 6px; border-radius: 3px; background: var(--green); opacity: 0.8; transition: width 0.3s; }
        .signal-bar-bg { flex: 1; height: 6px; border-radius: 3px; background: var(--elevated); max-width: 120px; }
        .signal-pos { font-size: 13px; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; color: var(--label); width: 48px; text-align: right; }
        .signal-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(48,209,88,0.15); color: var(--green); margin-left: 8px; flex-shrink: 0; }
        .signal-pnl { font-size: 14px; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; width: 80px; text-align: right; font-weight: 500; }
        .signal-flat .signal-name { color: var(--label); font-weight: 400; }
        .signal-flat .signal-pos { color: rgba(134,134,139,0.5); }
        .flat-summary { padding: 10px 0; color: var(--label); font-size: 13px; padding-left: 20px; }

        /* Recent days */
        .recent-row { display: flex; align-items: center; padding: 8px 0; font-size: 13px; }
        .recent-date { width: 80px; color: var(--label); font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; }
        .recent-active { width: 90px; color: var(--label); }
        .recent-pnl { width: 80px; text-align: right; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-weight: 500; }
        .recent-spark { flex: 1; padding-left: 16px; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--label); letter-spacing: 1px; }

        /* Ledger */
        .ledger-date-header { padding: 10px 0 4px; font-size: 11px; font-weight: 600; color: var(--label); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--separator); margin-top: 16px; }
        .ledger-date-header:first-child { margin-top: 0; }
        .ledger-row { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(56,56,58,0.2); font-size: 13px; }
        .ledger-strat { width: 140px; font-weight: 500; }
        .ledger-action { width: 100px; font-size: 11px; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; }
        .ledger-action-long { color: var(--green); }
        .ledger-action-flat { color: var(--label); }
        .ledger-action-change { color: var(--orange); }
        .ledger-pos { width: 60px; text-align: right; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; color: var(--label); }
        .ledger-pnl { width: 80px; text-align: right; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-weight: 500; }
        .ledger-cum { width: 80px; text-align: right; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 12px; }
        .ledger-bar { flex: 1; padding-left: 12px; }
        .ledger-bar-inner { height: 4px; border-radius: 2px; min-width: 1px; }

        /* Section spacing */
        .section { margin-top: 40px; }

        /* Price badge */
        .price-row { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 16px; }
        .price-badge { font-size: 12px; color: var(--label); font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; }
        .price-badge .ticker { color: var(--text); font-weight: 500; }

        /* Portfolio table */
        table { width: 100%; border-collapse: collapse; }
        th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--separator); font-size: 10px; color: var(--label); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
        th.num { text-align: right; }
        td { padding: 10px 12px; border-bottom: 1px solid rgba(56,56,58,0.3); font-size: 14px; }
        td.num { text-align: right; font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 13px; }
        tr:hover td { background: var(--card); }
        tr { cursor: pointer; }
        .pos { color: var(--green); }
        .neg { color: var(--red); }
        .muted { color: var(--label); }

        /* Strategy detail */
        .strat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
        .strat-header h2 { font-size: 22px; font-weight: 600; }
        .strat-header .asset { color: var(--label); font-size: 15px; }
        .badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
        .badge-pass { background: rgba(48,209,88,0.12); color: var(--green); }
        .badge-fail { background: rgba(255,69,58,0.12); color: var(--red); }

        .metrics-bar { display: flex; gap: 32px; flex-wrap: wrap; padding: 16px 20px; background: var(--card); border-radius: 12px; margin-bottom: 16px; }
        .metric { text-align: center; }
        .metric .lbl { font-size: 10px; color: var(--label); text-transform: uppercase; letter-spacing: 0.5px; }
        .metric .val { font-size: 20px; font-weight: 600; margin-top: 2px; }

        .chart-box { background: var(--card); border-radius: 12px; padding: 16px; margin-top: 12px; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

        .yearly-table { margin-top: 12px; }
        .yearly-table td { padding: 6px 10px; font-size: 13px; }

        /* Validation */
        .val-triangle { display: flex; gap: 32px; margin-bottom: 16px; }
        .val-table td { font-family: 'SF Mono', SFMono-Regular, Menlo, monospace; font-size: 13px; }
        .val-failures { margin-top: 12px; padding: 8px 12px; background: rgba(255,69,58,0.06); border-radius: 8px; }
        .val-failures div { font-size: 13px; color: var(--red); font-family: monospace; }

        /* Strategy selector */
        .strat-select { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 24px; }
        .strat-btn { padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--label); background: var(--card); border: 1px solid var(--separator); cursor: pointer; transition: all 0.15s; }
        .strat-btn:hover { border-color: var(--label); color: var(--text); }
        .strat-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

        /* Live/BT health indicator */
        .health { letter-spacing: 2px; }
        .health-good { color: var(--green); }
        .health-warn { color: var(--orange); }
        .health-bad { color: var(--red); }

        /* Stale warning */
        .stale-warn { color: var(--orange); font-size: 12px; }

        .no-data { text-align: center; padding: 60px; color: var(--label); }

        /* Transitions */
        .panel { animation: fadeIn 0.15s ease-in; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="nav">
        <button class="nav-btn active" onclick="showPage('live')">Live</button>
        <button class="nav-btn" onclick="showPage('portfolio')">Portfolio</button>
        <button class="nav-btn" onclick="showPage('strategy')">Strategy</button>
    </nav>

    <!-- ═══════════════ PAGE 1: LIVE ═══════════════ -->
    <div id="page-live" class="panel active">
        <!-- Hero -->
        <div class="hero">
            <div class="hero-number {{ 'pos' if portfolio.mtd_pnl >= 0 else 'neg' }}">
                {{ "%+.2f"|format(portfolio.mtd_pnl * 100) }}%
            </div>
            <div class="hero-sub">Abel Portfolio · month to date</div>
            <div class="hero-row">
                <div class="hero-stat">
                    <div class="val {{ 'pos' if portfolio.today_pnl >= 0 else 'neg' }}">{{ "%+.2f"|format(portfolio.today_pnl * 100) }}%</div>
                    <div class="lbl">today</div>
                </div>
                <div class="hero-stat">
                    <div class="val {{ 'pos' if portfolio.total_pnl >= 0 else 'neg' }}">{{ "%+.2f"|format(portfolio.total_pnl * 100) }}%</div>
                    <div class="lbl">YTD</div>
                </div>
                <div class="hero-stat">
                    <div class="val">{{ portfolio.n_active }}/{{ portfolio.n_strats }}</div>
                    <div class="lbl">active</div>
                </div>
            </div>
        </div>

        <!-- Signals -->
        <div class="section">
            <div style="display:flex; justify-content:space-between; align-items:baseline;">
                <div class="section-title">Signals</div>
                <div>
                    {% for ticker, price in portfolio.prices.items() %}
                    <span class="price-badge"><span class="ticker">{{ ticker }}</span> ${{ "%.2f"|format(price) }}</span>&nbsp;&nbsp;
                    {% endfor %}
                </div>
            </div>
            <div class="signal-row" style="opacity:0.55; font-size:10px; text-transform:uppercase; letter-spacing:0.5px;">
                <div class="signal-dot" style="background:transparent;"></div>
                <div class="signal-name">strategy</div>
                <div class="signal-bar-wrap"></div>
                <div class="signal-pos">pos</div>
                <div class="signal-pnl" title="today">today</div>
                <div class="signal-pnl" title="MTD" style="min-width:56px;">mtd</div>
                <div class="signal-pnl" title="YTD" style="min-width:56px;">ytd</div>
            </div>
            {% for sig in portfolio.signals_active %}
            <div class="signal-row">
                <div class="signal-dot" style="background: {{ sig.color }};"></div>
                <div class="signal-name">{{ sig.name }}</div>
                <div class="signal-bar-wrap">
                    <div class="signal-bar-bg"><div class="signal-bar" style="width: {{ (sig.position * 100)|int }}%;"></div></div>
                </div>
                <div class="signal-pos">{{ "%.2f"|format(sig.position) }}</div>
                {% if sig.changed %}<div class="signal-badge">NEW</div>{% endif %}
                <div class="signal-pnl {{ 'pos' if sig.today_pnl > 0 else 'neg' if sig.today_pnl < 0 else 'muted' }}" title="today">{{ "%+.2f"|format(sig.today_pnl * 100) }}%</div>
                <div class="signal-pnl {{ 'pos' if sig.mtd_pnl > 0 else 'neg' if sig.mtd_pnl < 0 else 'muted' }}" title="MTD" style="min-width:56px;">{{ "%+.1f"|format(sig.mtd_pnl * 100) }}%</div>
                <div class="signal-pnl {{ 'pos' if sig.ytd_pnl > 0 else 'neg' if sig.ytd_pnl < 0 else 'muted' }}" title="YTD" style="min-width:56px;">{{ "%+.1f"|format(sig.ytd_pnl * 100) }}%</div>
            </div>
            {% endfor %}
            {% if portfolio.signals_flat %}
            <div class="flat-summary" style="margin-top:10px;">flat ({{ portfolio.n_flat }})</div>
            {% for sig in portfolio.signals_flat %}
            <div class="signal-row" style="opacity:0.55;">
                <div class="signal-dot" style="background: {{ sig.color }};"></div>
                <div class="signal-name">{{ sig.name }}</div>
                <div class="signal-bar-wrap"></div>
                <div class="signal-pos muted">—</div>
                <div class="signal-pnl muted" title="today">—</div>
                <div class="signal-pnl {{ 'pos' if sig.mtd_pnl > 0 else 'neg' if sig.mtd_pnl < 0 else 'muted' }}" title="MTD" style="min-width:56px;">{{ "%+.1f"|format(sig.mtd_pnl * 100) }}%</div>
                <div class="signal-pnl {{ 'pos' if sig.ytd_pnl > 0 else 'neg' if sig.ytd_pnl < 0 else 'muted' }}" title="YTD" style="min-width:56px;">{{ "%+.1f"|format(sig.ytd_pnl * 100) }}%</div>
            </div>
            {% endfor %}
            {% endif %}
        </div>

        <!-- Recent days -->
        <div class="section">
            <div style="display:flex; justify-content:space-between; align-items:baseline;">
                <div class="section-title">Recent</div>
                <span class="{{ 'stale-warn' if portfolio.stale_hours > 24 else 'muted' }}" style="font-size:11px;">
                    updated {{ portfolio.stale_label }}
                </span>
            </div>
            {% for day in portfolio.recent_days %}
            <div class="recent-row">
                <div class="recent-date">{{ day.date }}</div>
                <div class="recent-active">{{ day.n_active }} active</div>
                <div class="recent-pnl {{ 'pos' if day.pnl > 0 else 'neg' if day.pnl < 0 else 'muted' }}">{{ "%+.2f"|format(day.pnl * 100) }}%</div>
                <div class="recent-spark">{{ day.spark }}</div>
            </div>
            {% endfor %}
        </div>

        <!-- Live Performance Summary -->
        {% if portfolio.live_perf %}
        <div class="section">
            <div class="section-title">Live Performance (since March 2026)</div>
            <table style="font-size:13px;">
                <thead><tr>
                    <th>Strategy</th>
                    <th class="num">Days</th>
                    <th class="num">Active</th>
                    <th class="num">Sharpe</th>
                    <th class="num">PnL</th>
                    <th class="num">MaxDD</th>
                    <th class="num">Win</th>
                </tr></thead>
                <tbody>
                {% for p in portfolio.live_perf %}
                <tr onclick="showStrategy('{{ p.id }}')">
                    <td><span style="color:{{ p.color }};font-size:8px;">&#9679;</span>&nbsp; {{ p.name }}</td>
                    <td class="num">{{ p.days }}</td>
                    <td class="num muted">{{ p.active_days }}</td>
                    <td class="num {{ 'pos' if p.sharpe > 0 else 'neg' }}">{{ "%.2f"|format(p.sharpe) }}</td>
                    <td class="num {{ 'pos' if p.pnl > 0 else 'neg' }}">{{ "%+.2f"|format(p.pnl * 100) }}%</td>
                    <td class="num neg">{% if p.max_dd > 0 %}-{{ "%.1f"|format(p.max_dd * 100) }}%{% else %}0%{% endif %}</td>
                    <td class="num">{{ "%.0f"|format(p.win_rate * 100) }}%</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}

        <!-- Live Ledger: per-strategy daily detail -->
        <div class="section">
            <div class="section-title">Ledger</div>
            <div class="ledger-row" style="border-bottom:1px solid var(--separator);padding-bottom:8px;">
                <div class="ledger-strat" style="font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">Strategy</div>
                <div class="ledger-action" style="font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">Action</div>
                <div class="ledger-pos" style="font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">Size</div>
                <div class="ledger-pnl" style="font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">PnL</div>
                <div class="ledger-cum" style="font-size:10px;color:var(--label);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;">Cum</div>
                <div class="ledger-bar"></div>
            </div>
            {% for day in portfolio.ledger %}
            <div class="ledger-date-header">{{ day.date }}{% if day.total_pnl != 0 %} <span class="{{ 'pos' if day.total_pnl > 0 else 'neg' }}" style="float:right;font-size:12px;font-family:'SF Mono',monospace;">{{ "%+.2f"|format(day.total_pnl * 100) }}%</span>{% endif %}</div>
            {% for entry in day.entries %}
            <div class="ledger-row">
                <div class="ledger-strat" style="color: {{ entry.color }};">{{ entry.name }}</div>
                <div class="ledger-action {{ entry.action_class }}">{{ entry.action }}</div>
                <div class="ledger-pos">{{ "%.2f"|format(entry.position) if entry.position > 0.01 else "—" }}</div>
                <div class="ledger-pnl {{ 'pos' if entry.pnl > 0 else 'neg' if entry.pnl < 0 else 'muted' }}">{{ "%+.3f"|format(entry.pnl * 100) }}%</div>
                <div class="ledger-cum {{ 'pos' if entry.cum_pnl > 0 else 'neg' if entry.cum_pnl < 0 else 'muted' }}">{{ "%+.2f"|format(entry.cum_pnl * 100) }}%</div>
                <div class="ledger-bar">
                    {% if entry.pnl > 0 %}
                    <div class="ledger-bar-inner" style="background:var(--green);opacity:0.5;width:{{ (entry.pnl * 2000)|int }}px;max-width:100%;"></div>
                    {% elif entry.pnl < 0 %}
                    <div class="ledger-bar-inner" style="background:var(--red);opacity:0.5;width:{{ (entry.pnl * -2000)|int }}px;max-width:100%;"></div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
            {% endfor %}
        </div>
    </div>

    <!-- ═══════════════ PAGE 2: PORTFOLIO ═══════════════ -->
    <div id="page-portfolio" class="panel">
        <table>
            <thead><tr>
                <th>Strategy</th>
                <th>Asset</th>
                <th class="num">Sharpe</th>
                <th class="num">Lo</th>
                <th class="num">IC</th>
                <th class="num">Omega</th>
                <th class="num">MaxDD</th>
                <th class="num">PnL</th>
                <th>Health</th>
                <th>Score</th>
            </tr></thead>
            <tbody>
                {% for s in strategies %}
                <tr onclick="showStrategy('{{ s.id }}')">
                    <td><span style="color: {{ s.color }}; font-size: 8px;">&#9679;</span>&nbsp; {{ s.name }}</td>
                    <td class="muted">{{ s.asset }}</td>
                    {% if s.has_data %}
                    <td class="num {{ 'pos' if s.metrics.sharpe > 0 else 'neg' }}">{{ "%.2f"|format(s.metrics.sharpe) }}</td>
                    <td class="num">{% if s.validation and s.validation.metrics.lo_adjusted is defined %}{{ "%.2f"|format(s.validation.metrics.lo_adjusted) }}{% else %}—{% endif %}</td>
                    <td class="num">{% if s.validation and s.validation.metrics.ic is defined %}{{ "%.3f"|format(s.validation.metrics.ic) }}{% else %}—{% endif %}</td>
                    <td class="num">{% if s.validation and s.validation.metrics.omega is defined %}{{ "%.1f"|format(s.validation.metrics.omega) }}{% else %}—{% endif %}</td>
                    <td class="num neg">{{ "%.1f"|format(s.metrics.max_dd * -100) }}%</td>
                    <td class="num {{ 'pos' if s.metrics.cum_pnl > 0 else 'neg' }}">{{ fmt_pnl_pct(s.metrics.cum_pnl) }}</td>
                    <td><span class="health {{ s.health_class }}">{{ s.health_dots }}</span></td>
                    <td>{% if s.validation %}<span class="badge {{ 'badge-pass' if s.validation.verdict == 'PASS' else 'badge-fail' }}">{{ s.validation.score }}</span>{% endif %}</td>
                    {% else %}
                    <td colspan="8" class="muted">no data</td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- ═══════════════ PAGE 3: STRATEGY ═══════════════ -->
    <div id="page-strategy" class="panel">
        <div class="strat-select">
            {% for s in strategies %}
            <button class="strat-btn" onclick="showStrategyDetail('{{ s.id }}')" id="btn-{{ s.id }}" style="border-left: 3px solid {{ s.color }};">{{ s.name }}</button>
            {% endfor %}
        </div>

        {% for s in strategies %}
        <div id="detail-{{ s.id }}" class="strat-detail" style="display:none;">
            <div class="strat-header">
                <div class="signal-dot" style="background: {{ s.color }}; width: 12px; height: 12px;"></div>
                <h2>{{ s.name }}</h2>
                <span class="asset">{{ s.asset }}</span>
                {% if s.validation %}<span class="badge {{ 'badge-pass' if s.validation.verdict == 'PASS' else 'badge-fail' }}">{{ s.validation.score }} {{ s.validation.verdict }}</span>{% endif %}
            </div>

            {% if s.has_data %}
            <div class="metrics-bar">
                {% for lbl, key, fmt in [("Sharpe", "sharpe", "%.2f"), ("PnL", "cum_pnl", None), ("MaxDD", "max_dd", None), ("Calmar", "calmar", "%.1f"), ("Win Rate", "win_rate", None), ("Days", "n_days", "%d")] %}
                <div class="metric">
                    <div class="lbl">{{ lbl }}</div>
                    <div class="val {% if key == 'cum_pnl' %}{{ 'pos' if s.metrics[key] > 0 else 'neg' }}{% elif key == 'max_dd' %}neg{% endif %}">
                        {% if key == 'cum_pnl' %}{{ fmt_pnl_pct(s.metrics[key]) }}{% elif key == 'max_dd' %}-{{ "%.1f"|format(s.metrics[key] * 100) }}%{% elif key == 'win_rate' %}{{ "%.0f"|format(s.metrics[key] * 100) }}%{% elif fmt %}{{ fmt|format(s.metrics[key]) }}{% else %}{{ s.metrics[key] }}{% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            {% if s.validation %}
            <div class="metrics-bar" style="border-left: 3px solid var(--blue);">
                {% for lbl, val in [("Lo-adjusted", s.validation.metrics.get("lo_adjusted", 0)), ("IC", s.validation.metrics.get("ic", 0)), ("Omega", s.validation.metrics.get("omega", 0)), ("DSR", s.validation.metrics.get("dsr", 0)), ("PBO", s.validation.metrics.get("pbo", 0)), ("OOS/IS", s.validation.metrics.get("oos_is", 0))] %}
                <div class="metric">
                    <div class="lbl">{{ lbl }}</div>
                    <div class="val">{% if lbl in ('DSR', 'PBO') %}{{ "%.0f"|format(val * 100) }}%{% else %}{{ "%.3f"|format(val) }}{% endif %}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

            {% if s.live %}
            <div class="metrics-bar" style="border-left: 3px solid var(--green);">
                <div class="metric"><div class="lbl">Live</div><div class="val pos">{{ s.live.n_days }}d</div></div>
                <div class="metric"><div class="lbl">Live Sharpe</div><div class="val {{ 'pos' if s.live.sharpe > 0 else 'neg' }}">{{ "%.2f"|format(s.live.sharpe) }}</div></div>
                <div class="metric"><div class="lbl">Live PnL</div><div class="val {{ 'pos' if s.live.cum_pnl > 0 else 'neg' }}">{{ fmt_pnl_pct(s.live.cum_pnl) }}</div></div>
                <div class="metric"><div class="lbl">Period</div><div class="val" style="font-size:13px;">{{ s.live.start }} → {{ s.live.end }}</div></div>
            </div>
            {% endif %}

            <div class="chart-box"><div id="equity-{{ s.id }}"></div></div>
            <div class="grid-2">
                <div class="chart-box"><div id="drawdown-{{ s.id }}"></div></div>
                <div class="chart-box"><div id="rolling-{{ s.id }}"></div></div>
            </div>
            <div class="grid-2">
                <div class="chart-box"><div id="daily-{{ s.id }}"></div></div>
                <div class="chart-box"><div id="monthly-{{ s.id }}"></div></div>
            </div>

            {% if s.yearly %}
            <table class="yearly-table" style="margin-top:12px;">
                <thead><tr><th>Year</th><th class="num">Sharpe</th><th class="num">PnL</th><th class="num">Days</th></tr></thead>
                <tbody>
                {% for y in s.yearly %}
                <tr>
                    <td>{{ y.year }}</td>
                    <td class="num {{ 'pos' if y.sharpe > 0 else 'neg' }}">{{ "%.2f"|format(y.sharpe) }}</td>
                    <td class="num {{ 'pos' if y.pnl_pct > 0 else 'neg' }}">{{ "%+.1f"|format(y.pnl_pct) }}%</td>
                    <td class="num muted">{{ y.n_days }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% endif %}

            {% if s.live and s.live.ledger %}
            <div class="chart-box" style="margin-top:12px;">
                <div style="font-size:13px;font-weight:600;color:var(--green);margin-bottom:8px;">Live Ledger</div>
                <table style="font-size:13px;">
                    <thead><tr><th>Date</th><th>Position</th>{% if s.live.ledger[0].price is defined and s.live.ledger[0].price %}<th class="num">Price</th>{% endif %}<th class="num">PnL</th><th class="num">Cum</th></tr></thead>
                    <tbody>
                    {% for row in s.live.ledger[-20:] %}
                    <tr>
                        <td class="muted">{{ row.date }}</td>
                        <td>{% if row.position > 0.01 %}<span class="pos">{{ "%.2f"|format(row.position) }}</span>{% else %}<span class="muted">—</span>{% endif %}</td>
                        {% if row.price %}<td class="num">${{ "%.2f"|format(row.price) }}</td>{% endif %}
                        <td class="num {{ 'pos' if row.pnl_pct > 0 else 'neg' if row.pnl_pct < 0 else '' }}">{{ "%+.3f"|format(row.pnl_pct) }}%</td>
                        <td class="num {{ 'pos' if row.cum_pct > 0 else 'neg' }}">{{ "%+.2f"|format(row.cum_pct) }}%</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}

            {% else %}
            <div class="no-data">No data. Run <code>abel-edge run --strategy {{ s.id }}</code></div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <script>
        function showPage(id) {
            document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
            document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('page-' + id).classList.add('active');
            event.target.classList.add('active');
            if (id === 'strategy') initCharts();
        }
        function showStrategy(id) {
            showPage('strategy');
            showStrategyDetail(id);
            document.querySelectorAll('.nav-btn')[2].classList.add('active');
        }
        function showStrategyDetail(id) {
            document.querySelectorAll('.strat-detail').forEach(d => d.style.display = 'none');
            document.querySelectorAll('.strat-btn').forEach(b => b.classList.remove('active'));
            document.getElementById('detail-' + id).style.display = 'block';
            document.getElementById('btn-' + id).classList.add('active');
            initCharts();
        }
        var chartsLoaded = {};
        function initCharts() {
            {% for s in strategies %}
            {% if s.has_data %}
            if (!chartsLoaded['{{ s.id }}'] && document.getElementById('detail-{{ s.id }}').style.display !== 'none') {
                Plotly.newPlot('equity-{{ s.id }}', {{ s.equity_json }}.data, {{ s.equity_json }}.layout, {responsive:true,displayModeBar:false});
                Plotly.newPlot('drawdown-{{ s.id }}', {{ s.drawdown_json }}.data, {{ s.drawdown_json }}.layout, {responsive:true,displayModeBar:false});
                Plotly.newPlot('rolling-{{ s.id }}', {{ s.rolling_sharpe_json }}.data, {{ s.rolling_sharpe_json }}.layout, {responsive:true,displayModeBar:false});
                Plotly.newPlot('daily-{{ s.id }}', {{ s.daily_pnl_json }}.data, {{ s.daily_pnl_json }}.layout, {responsive:true,displayModeBar:false});
                Plotly.newPlot('monthly-{{ s.id }}', {{ s.monthly_json }}.data, {{ s.monthly_json }}.layout, {responsive:true,displayModeBar:false});
                chartsLoaded['{{ s.id }}'] = true;
            }
            {% endif %}
            {% endfor %}
        }
        // Show first strategy by default when switching to strategy page
        {% if strategies %}
        document.addEventListener('DOMContentLoaded', function() {
            showStrategyDetail('{{ strategies[0].id }}');
        });
        {% endif %}
    </script>
</body>
</html>
