<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ selected_strategy.asset }} Tracking</title>
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #0f172a; color: #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
        .wrap { max-width: 1100px; margin: 0 auto; padding: 28px 24px 56px; }
        .header { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 24px; }
        .header h1 { font-size: 24px; }
        .meta { color: #94a3b8; font-size: 12px; }
        .hero, .card, .chart { background: linear-gradient(180deg, #111827 0%, #0f172a 100%); border: 1px solid #1e293b; border-radius: 20px; }
        .hero { padding: 28px; }
        .hero h2 { font-size: 42px; margin-top: 8px; }
        .hero p { margin-top: 14px; color: #cbd5e1; line-height: 1.7; }
        .eyebrow { color: #67e8f9; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; }
        .pill { display: inline-block; margin-top: 16px; padding: 10px 14px; border-radius: 999px; background: rgba(103, 232, 249, 0.12); color: #cffafe; font-weight: 600; }
        .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
        .card { padding: 18px; }
        .label { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
        .value { margin-top: 10px; font-size: 28px; font-weight: 700; }
        .subtext { margin-top: 6px; color: #94a3b8; font-size: 13px; }
        .grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
        .chart { padding: 18px; }
        .row-list { margin-top: 12px; }
        .row-head, .row-item { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 12px; padding: 10px 0; }
        .row-head { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
        .row-item { color: #e2e8f0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); }
        .row-item:last-child { border-bottom: none; }
        .empty { margin-top: 20px; padding: 34px; text-align: center; border-radius: 18px; background: #111827; color: #94a3b8; border: 1px dashed #334155; }
        code { color: #bfdbfe; }
        @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } .hero h2 { font-size: 34px; } .row-head, .row-item { grid-template-columns: repeat(2, 1fr); } }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            <h1>{{ selected_strategy.asset }} Tracking</h1>
            <div class="meta">Generated {{ generated_at }}</div>
        </div>

        <section class="hero">
            <div class="eyebrow">Tracking View</div>
            <h2>{{ selected_strategy.asset }}</h2>
            <div class="pill">Current Signal: {{ selected_strategy.signal_label }}</div>
            <p>{{ selected_strategy.thesis }}</p>
            {% if selected_strategy.has_tracking_data %}
            <p>Tracking window: {{ selected_strategy.tracking_start_date }} to {{ selected_strategy.tracking_latest_date }}</p>
            <p>Next position after latest close: {{ '%.2f'|format(selected_strategy.tracking_latest_signal_position) }}</p>
            {% if selected_strategy.has_tracking_preview_chart %}
            <p>This view preloads the final {{ selected_strategy.tracking_preload_days }} backtest days before live tracking begins.</p>
            {% endif %}
            {% else %}
            <p>No live tracking data yet. This page still preloads a small backtest window so the user can step into tracking with context.</p>
            {% endif %}
        </section>

        {% if selected_strategy.has_tracking_data %}
        <section class="cards">
            <div class="card"><div class="label">Tracking Return</div><div class="value">{{ fmt_pnl_pct(selected_strategy.tracking_metrics.cum_return) }}</div><div class="subtext">Since tracking started</div></div>
            <div class="card"><div class="label">Days Tracked</div><div class="value">{{ selected_strategy.tracking_metrics.n_days }}</div><div class="subtext">Live rows only</div></div>
            <div class="card"><div class="label">Next Position</div><div class="value">{{ '%.2f'|format(selected_strategy.tracking_latest_signal_position) }}</div><div class="subtext">After latest close</div></div>
        </section>

        <section class="grid">
            <div class="chart">
                <h3>Tracking Launch Context</h3>
                {% if selected_strategy.has_tracking_preview_chart %}
                <div id="tracking-preview"></div>
                {% else %}
                <div class="empty">Legacy logs do not include backtest asset returns for a launch-context chart.</div>
                {% endif %}
            </div>
            <div class="chart">
                <h3>Tracked Path Since Tracking Began</h3>
                {% if selected_strategy.has_tracking_asset_chart %}
                <div id="tracking-asset"></div>
                {% else %}
                <div class="empty">Legacy live rows do not include asset price returns, so this chart is hidden.</div>
                {% endif %}
            </div>
            <div class="chart">
                <h3>{{ selected_strategy.tracking_signal_chart_title }}</h3>
                <div id="tracking-position"></div>
            </div>
            <div class="chart">
                <h3>Latest 8 Live Rows</h3>
                <p class="subtext">These rows are shown newest first. They are not the start of the tracking window.</p>
                <div class="row-list">
                    <div class="row-head"><span>Date</span><span>Close / Level</span><span>Signal</span><span>Next</span><span>PnL</span></div>
                    {% for row in selected_strategy.tracking_rows %}
                    <div class="row-item"><span>{{ row.date }}</span><span>{{ row.close }}</span><span>{{ row.signal }}</span><span>{{ row.next_position }}</span><span>{{ row.pnl }}</span></div>
                    {% endfor %}
                </div>
            </div>
        </section>
        {% else %}
        <div class="empty">
            No tracked path is available yet. Run your live or follow-up pipeline so the trade log receives rows tagged with <code>source=live</code>, then regenerate this page.
        </div>
        {% if selected_strategy.has_tracking_preview %}
        <section class="grid">
            <div class="chart">
                <h3>Tracking Launch Context</h3>
                <div id="tracking-preview"></div>
            </div>
        </section>
        {% endif %}
        {% endif %}
    </div>

    <script>
        {% if selected_strategy.has_tracking_data %}
        {% if selected_strategy.has_tracking_preview_chart %}
        Plotly.newPlot('tracking-preview', {{ selected_strategy.tracking_preview_json }}.data, {{ selected_strategy.tracking_preview_json }}.layout, {responsive: true});
        {% endif %}
        {% if selected_strategy.has_tracking_asset_chart %}
        Plotly.newPlot('tracking-asset', {{ selected_strategy.tracking_asset_price_json }}.data, {{ selected_strategy.tracking_asset_price_json }}.layout, {responsive: true});
        {% endif %}
        Plotly.newPlot('tracking-position', {{ selected_strategy.tracking_position_json }}.data, {{ selected_strategy.tracking_position_json }}.layout, {responsive: true});
        {% elif selected_strategy.has_tracking_preview_chart %}
        Plotly.newPlot('tracking-preview', {{ selected_strategy.tracking_preview_json }}.data, {{ selected_strategy.tracking_preview_json }}.layout, {responsive: true});
        {% endif %}
    </script>
</body>
</html>
