{% extends "dashboard/base.html" %}
{% block title %}Results — Run #{{ run.id }} — {{ sim.name }}{% endblock %}

{% block content %}

<div style="position: absolute; top: 0.9rem; left: 19rem; z-index: 1000;">
    <h2 style="color: #ffffff; font-weight: 100; font-size: 1.1rem; line-height:1.4;">
        <a href="{% url 'dashboard-simulations' %}" style="color: #ffffff; text-decoration: none;">Simulation</a>&ensp;&gt;&ensp;
        <a href="{% url 'dashboard-simulation-detail' sim_id=sim.id %}" style="color: #ffffff; text-decoration: none;">{{ sim.name }}</a>&ensp;&gt;&ensp;
        Run #{{ run.id }} Results
    </h2>
</div>

<style>
/* ── Page layout ── */
.results-page { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Header card ── */
.results-header-card {
    background: linear-gradient(135deg, #136b75 0%, #22a6b3 100%);
    border-radius: 10px;
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: 0 4px 16px rgba(34,166,179,0.25);
}
.results-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}
.results-note-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 0.5rem;
}
.results-meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.results-meta-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
                      letter-spacing: 0.1em; color: #d0f0f3; }
.results-meta-value { font-size: 0.9rem; font-weight: 500; color: #ffffff; }

.results-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    width: 100%;
    box-sizing: border-box;
    line-height: 1;
}
.results-back-btn:hover { background: rgba(255,255,255,0.28); color: #fff; }
.results-back-btn .material-symbols-outlined { font-size: 1rem; padding: 0 !important; }

/* ── Right-pinned action group inside header ── */
.results-action-group {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 9rem;
    flex-shrink: 0;
}

/* ── Chart cards ── */
.chart-card {
    background: #fff;
    border: 1.5px solid #b2e0e4;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(34,166,179,0.08);
    overflow: hidden;
}
.chart-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    background: #e8f8f9;
    border-bottom: 1.5px solid #b2e0e4;
    font-size: 0.88rem;
    font-weight: 600;
    color: #136b75;
}
.chart-card-header .material-symbols-outlined { font-size: 1.05rem; padding: 0 !important; }
.chart-body { padding: 0.5rem 0.25rem; }

/* ── Charts grid ── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

/* ── Summary stats row ── */
.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.summary-stat {
    flex: 1;
    min-width: 150px;
    background: #fff;
    border: 1.5px solid #b2e0e4;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(34,166,179,0.07);
}
.summary-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: #136b75;
    line-height: 1.2;
}
.summary-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7ab8be;
    margin-top: 0.2rem;
}

/* ── No-data notice ── */
.no-data-notice {
    text-align: center;
    padding: 1.5rem;
    color: #9acdd2;
    font-size: 0.82rem;
}

/* ── Settings cog button ── */
.chart-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-left: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    justify-content: center;
    line-height: 1;
}
.chart-settings-btn:hover { background: rgba(255,255,255,0.28); }
.chart-settings-btn .material-symbols-outlined { font-size: 1rem; padding: 0 !important; }

/* ── Chart settings modal ── */
#chart-settings-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.35); z-index: 9000;
    align-items: center; justify-content: center;
}
#chart-settings-overlay.open { display: flex; }
#chart-settings-modal {
    background: #fff; border-radius: 10px; padding: 1.6rem 1.8rem;
    width: 360px; max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
#chart-settings-modal h6 {
    margin: 0 0 0.2rem;
    font-weight: 600; font-size: 1rem; color: #004d40;
    display: flex; align-items: center; gap: 0.45rem;
}
#chart-settings-modal h6 .material-symbols-outlined { font-size: 1.1rem; padding: 0 !important; color: #22a6b3; }
#chart-settings-modal .cs-sub { font-size: 0.78rem; color: #888; margin-bottom: 1.2rem; }
.cs-option-group { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.4rem; }
.cs-option {
    display: flex; align-items: center; gap: 0.7rem;
    border: 1.5px solid #b2e0e4; border-radius: 8px;
    padding: 0.6rem 1rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.88rem; color: #1a2e30;
}
.cs-option:hover { border-color: #22a6b3; background: #f4fafb; }
.cs-option.selected { border-color: #22a6b3; background: #e8f8f9; font-weight: 600; color: #136b75; }
.cs-option input[type=radio],
.cs-option input[type=radio] + span { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
.cs-option-icon { color: #22a6b3; font-size: 1.1rem; padding: 0 !important; }
.cs-option-label { flex: 1; }
.cs-option-desc { font-size: 0.73rem; color: #7ab8be; font-weight: 400; }
#cs-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
#cs-modal-save {
    background: #22a6b3; color: #fff; border: none; border-radius: 6px;
    padding: 0.5rem 1.3rem; font-size: 0.88rem; font-weight: 600;
    cursor: pointer; transition: background 0.15s;
}
#cs-modal-save:hover { background: #136b75; }
#cs-modal-cancel {
    background: none; border: 1.5px solid #ccc; border-radius: 6px;
    padding: 0.5rem 1rem; font-size: 0.88rem; cursor: pointer; color: #555;
}
#cs-modal-cancel:hover { border-color: #999; }

/* ── 1Hz sub-hero banner ── */
.hz-sub-hero {
    background: linear-gradient(135deg, #0e5059 0%, #136b75 100%);
    border-radius: 10px;
    padding: 0.85rem 1.4rem 0.6rem;
    box-shadow: 0 3px 12px rgba(19,107,117,0.22);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hz-sub-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}
.hz-sub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.4rem;
    flex: 1;
}
.hz-sub-meta-item { display: flex; flex-direction: column; gap: 0.1rem; }
.hz-sub-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a8dde3;
}
.hz-sub-meta-value { font-size: 0.86rem; font-weight: 500; color: #ffffff; }
.hz-sub-actions { margin-left: auto; flex-shrink: 0; }
.hz-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 8px;
    padding: 0.42rem 1rem;
    color: #fff;
    font-size: 0.81rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.hz-sub-btn:hover { background: rgba(255,255,255,0.25); color: #fff; }
.hz-sub-btn .material-symbols-outlined { font-size: 0.95rem; padding: 0 !important; }
.hz-sub-label {
    font-size: 0.73rem;
    color: rgba(200,240,243,0.75);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 0.4rem;
}
</style>

<!-- Load Plotly from CDN -->
<script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>

<div class="results-page">

    <!-- Header strip -->
    <div class="results-header-card">
        <!-- Row 1: meta + actions -->
        <div class="results-header-row">
        <div class="results-meta-item">
            <span class="results-meta-label">Run</span>
            <span class="results-meta-value">#{{ run.id }}</span>
        </div>
        <div class="results-meta-item">
            <span class="results-meta-label">Simulation</span>
            <span class="results-meta-value">{{ sim.name }}</span>
        </div>
        <div class="results-meta-item">
            <span class="results-meta-label">Started</span>
            <span class="results-meta-value"><time class="local-dt" datetime="{{ run.started_at|date:"c" }}">{{ run.started_at|date:"d M Y, H:i:s" }}</time></span>
        </div>
        {% if run.duration_hms %}
        <div class="results-meta-item">
            <span class="results-meta-label">Duration</span>
            <span class="results-meta-value">{{ run.duration_hms }}</span>
        </div>
        {% endif %}
        {% if meta_info.kind %}
        <div class="results-meta-item">
            <span class="results-meta-label">Kind</span>
            <span class="results-meta-value">{{ meta_info.kind }}</span>
        </div>
        {% endif %}
        {% if meta_info.runtime_s %}
        <div class="results-meta-item">
            <span class="results-meta-label">Engine runtime</span>
            <span class="results-meta-value">{{ meta_info.runtime_s|floatformat:1 }} s</span>
        </div>
        {% endif %}
        <div class="results-action-group">
            <button class="chart-settings-btn" id="chart-settings-btn" title="Chart settings"
                    style="margin-left:0;">
                <span class="material-symbols-outlined">settings</span>Settings
            </button>
            <a href="{% url 'dashboard-simulation-detail' sim_id=sim.id %}"
               class="results-back-btn">
                <span class="material-symbols-outlined">arrow_back</span>Back to runs
            </a>
        </div>
        </div><!-- end results-header-row -->
        {% if run.description %}
        <!-- Row 2: note -->
        <div class="results-note-row">
            <span class="results-meta-label" style="white-space:nowrap;">Note</span>
            <span class="results-meta-value" style="font-size:0.85rem;">{{ run.description }}</span>
        </div>
        {% endif %}
    </div>

    {% if n_years == 0 %}
    <div class="chart-card">
        <div class="no-data-notice">
            <span class="material-symbols-outlined" style="font-size:2rem;display:block;margin-bottom:0.5rem;color:#b2e0e4;">info</span>
            No year data found in the results file.
        </div>
    </div>
    {% else %}

    <!-- Summary stats (filled by JS) -->
    <div class="summary-row" id="summary-row-all"></div>

    <!-- Charts grid: 2 columns — all years shown on each chart -->
    <div class="charts-grid" style="margin-top:0.5rem;">

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">science</span>
                H₂ Production (cumulative)
            </div>
            <div class="chart-body"><div id="chart-h2" style="height:280px;"></div></div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">developer_board</span>
                Electrolyser Peak Efficiency (% of original)
            </div>
            <div class="chart-body"><div id="chart-eff" style="height:280px;"></div></div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">battery_charging_full</span>
                Battery SoC &amp; Rated Capacity (0–1 fraction)
            </div>
            <div class="chart-body"><div id="chart-soc" style="height:280px;"></div></div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">power</span>
                Electrolysers Switched On (%)
            </div>
            <div class="chart-body"><div id="chart-elec" style="height:280px;"></div></div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">electric_bolt</span>
                Power — Wind, Electrolyser &amp; Battery
            </div>
            <div class="chart-body"><div id="chart-power" style="height:280px;"></div></div>
        </div>

        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">air</span>
                Wind Speed (1 hr average)
            </div>
            <div class="chart-body"><div id="chart-wind" style="height:280px;"></div></div>
        </div>

    </div>

    {% if has_1hz_data and hz_meta %}
    <!-- ── 1 Hz inline preview ── -->
    <div class="hz-sub-hero">
        <div class="hz-sub-hero-inner">
            <div class="hz-sub-meta">
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">Samples shown</span>
                    <span class="hz-sub-meta-value">{{ hz_meta.points_shown }} / {{ hz_meta.points_total }}</span>
                </div>
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">Channels</span>
                    <span class="hz-sub-meta-value">{{ hz_meta.n_channels }}</span>
                </div>
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">Window</span>
                    <span class="hz-sub-meta-value">{{ hz_meta.window_points }} samples</span>
                </div>
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">Time range</span>
                    <span class="hz-sub-meta-value">Hour {{ hz_meta.start_hour }} – {{ hz_meta.end_hour }}</span>
                </div>
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">File</span>
                    <span class="hz-sub-meta-value">{{ hz_meta.output_name }}</span>
                </div>
                {% if hz_meta.downsample_step > 1 %}
                <div class="hz-sub-meta-item">
                    <span class="hz-sub-meta-label">Resolution</span>
                    <span class="hz-sub-meta-value">1 / {{ hz_meta.downsample_step }} samples</span>
                </div>
                {% endif %}
            </div>

        </div>
        <div class="hz-sub-label">1&thinsp;Hz data — showing first 3 channels (preview)</div>
    </div>

    <div class="charts-grid">
        {% for i in "012" %}{% with forloop.counter0 as idx %}
        <div class="chart-card">
            <div class="chart-card-header">
                <span class="material-symbols-outlined">monitoring</span>
                <span id="hz-inline-title-{{ idx }}">1Hz channel {{ idx }}</span>
            </div>
            <div class="chart-body"><div id="hz-inline-chart-{{ idx }}" style="height:280px;"></div></div>
        </div>
        {% endwith %}{% endfor %}
    </div>
    {% endif %}
    <!-- ── 1 Hz Wind Data card ── -->
    <!-- <div class="chart-card" id="wind-hz-card" style="margin-top: 0.5rem;">
        <div class="chart-card-header" id="wind-hz-header"
             style="cursor:pointer; user-select:none;"
             onclick="toggleWindHz(this)">
            <span class="material-symbols-outlined">air</span>
            Wind Data &mdash; 1&thinsp;Hz per Turbine
            <span id="wind-hz-badge"
                  style="display:none; margin-left:0.6rem; font-size:0.72rem;
                         background:#d0f0f3; color:#136b75; border-radius:8px;
                         padding:0.1rem 0.55rem; font-weight:600;"></span>
            <span class="material-symbols-outlined" id="wind-hz-chevron"
                  style="margin-left:auto; font-size:1.1rem; color:#4a7a80;
                         transition:transform 0.2s;">expand_more</span>
        </div>
        <div id="wind-hz-body" style="display:none;">
            <div id="wind-hz-loading"
                 style="padding:1rem 1.25rem; font-size:0.82rem; color:#4a7a80;
                        display:flex; align-items:center; gap:0.5rem;">
                <span class="material-symbols-outlined" style="font-size:1.1rem;">hourglass_top</span>
                Loading wind data&hellip;
            </div>
            <div id="wind-hz-error"
                 style="display:none; padding:1rem 1.25rem; font-size:0.82rem;
                        color:#b71c1c; background:#fdecea;
                        border-radius:0 0 10px 10px;"></div>
            <div id="wind-hz-info"
                 style="display:none; padding:0.3rem 1.25rem 0;
                        font-size:0.75rem; color:#4a7a80;"></div>
            <div id="wind-hz-plot"
                 style="display:none; width:100%; min-height:340px;"></div>
        </div>
    </div>
    <script>
    (function(){
        var _loaded = false;
        var windHzUrl = "{% url 'dashboard-wind-preview' sim_id=sim.id %}";
        console.log('[wind-hz] preview URL:', windHzUrl);

        window.toggleWindHz = function(header) {
            var body    = document.getElementById('wind-hz-body');
            var chevron = document.getElementById('wind-hz-chevron');
            var open    = body.style.display === 'none';
            body.style.display = open ? 'block' : 'none';
            chevron.style.transform = open ? 'rotate(180deg)' : '';
            if (open && !_loaded) { _loaded = true; loadWindHz(); }
        };

        function loadWindHz() {
            fetch(windHzUrl)
                .then(function(r) {
                    if (!r.ok) {
                        return r.text().then(function(t) {
                            throw new Error('HTTP ' + r.status + ' — ' + t.substring(0, 200));
                        });
                    }
                    return r.json();
                })
                .then(function(data) {
                    document.getElementById('wind-hz-loading').style.display = 'none';
                    if (data.error) {
                        var err = document.getElementById('wind-hz-error');
                        err.textContent = data.error;
                        err.style.display = 'block';
                        return;
                    }
                    var badge = document.getElementById('wind-hz-badge');
                    badge.textContent = data.n_turbines + (data.n_turbines === 1 ? ' turbine' : ' turbines');
                    badge.style.display = 'inline-block';

                    var info = document.getElementById('wind-hz-info');
                    info.textContent = data.filename + '  \u00b7  ' + data.n_hours + ' hours';
                    info.style.display = 'block';

                    renderWindHz(data);
                })
                .catch(function(e) {
                    document.getElementById('wind-hz-loading').style.display = 'none';
                    var err = document.getElementById('wind-hz-error');
                    err.textContent = 'Failed to load wind data: ' + e;
                    err.style.display = 'block';
                });
        }

        function renderWindHz(data) {
            var plotDiv = document.getElementById('wind-hz-plot');
            plotDiv.style.display = 'block';

            var palette = [
                '#22a6b3','#136b75','#48dbdb','#0a9396','#94d2bd',
                '#e9c46a','#f4a261','#e76f51','#2a9d8f','#264653'
            ];

            var traces = [];
            traces.push({
                x: data.hours, y: data.wind_speed,
                type: 'scatter', mode: 'lines', name: 'Wind Speed',
                line: { color: '#22a6b3', width: 1.5 },
                yaxis: 'y', xaxis: 'x',
                hovertemplate: 'Hour %{x}<br>%{y:.2f} m/s<extra></extra>',
            });

            data.turbines.forEach(function(t, i) {
                traces.push({
                    x: data.hours, y: t.power,
                    type: 'scatter', mode: 'lines', name: 'Turbine ' + t.turbine,
                    line: { color: palette[i % palette.length], width: 1.2 },
                    yaxis: 'y2', xaxis: 'x2',
                    hovertemplate: 'Hour %{x}<br>%{y:.1f} W<extra>Turbine ' + t.turbine + '</extra>',
                });
            });

            var nTurbs    = data.turbines.length;
            var showPower = nTurbs > 0;
            var wsDomain  = showPower ? [0.56, 1.0] : [0, 1.0];
            var pwrDomain = [0, 0.40];

            var layout = {
                paper_bgcolor: '#fff',
                plot_bgcolor:  '#f4fafb',
                margin:        { t: 28, r: 28, b: 36, l: 62 },
                font:          { family: 'Ubuntu, sans-serif', size: 11, color: '#1a2e30' },
                showlegend:    nTurbs > 1,
                legend:        { orientation: 'h', y: -0.08, font: { size: 10 } },
                hovermode:     'x unified',
                yaxis: {
                    title: { text: 'Wind speed (m/s)', font: { size: 10 } },
                    domain: wsDomain,
                    gridcolor: '#e0f4f6', zeroline: false,
                },
                xaxis: {
                    title: showPower ? '' : { text: 'Hour', font: { size: 10 } },
                    domain: [0, 1], anchor: 'y',
                    gridcolor: '#e0f4f6',
                    showticklabels: !showPower,
                },
            };

            if (showPower) {
                layout.yaxis2 = {
                    title: { text: 'Mean power (W)', font: { size: 10 } },
                    domain: pwrDomain,
                    gridcolor: '#e0f4f6', zeroline: false,
                };
                layout.xaxis2 = {
                    title: { text: 'Hour', font: { size: 10 } },
                    domain: [0, 1], anchor: 'y2',
                    gridcolor: '#e0f4f6',
                };
                traces[0].xaxis = 'x'; traces[0].yaxis = 'y';
                traces.slice(1).forEach(function(t) { t.xaxis = 'x2'; t.yaxis = 'y2'; });
            }

            function doPlot() {
                Plotly.newPlot(plotDiv, traces, layout, {
                    responsive: true, displaylogo: false,
                    modeBarButtonsToRemove: ['select2d','lasso2d','toImage'],
                });
            }
            if (typeof Plotly !== 'undefined') {
                doPlot();
            } else {
                var s = document.createElement('script');
                s.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js';
                s.onload = doPlot;
                document.head.appendChild(s);
            }
        }
    })();
    </script> -->

    {% endif %}

</div>

<!-- Chart settings modal -->
<div id="chart-settings-overlay">
    <div id="chart-settings-modal">
        <h6><span class="material-symbols-outlined">settings</span>Chart Settings</h6>
        <p class="cs-sub">X-axis display mode — applies to all charts on this page.</p>
        <div class="cs-option-group" id="cs-xaxis-options">
            <label class="cs-option {% if xaxis_datetime %}selected{% endif %}" id="cs-opt-datetime">
                <input type="radio" name="xaxis" value="true" {% if xaxis_datetime %}checked{% endif %}>
                <span class="material-symbols-outlined cs-option-icon">calendar_clock</span>
                <span class="cs-option-label">
                    Datetime
                    <span class="cs-option-desc">— actual dates &amp; times on the x-axis</span>
                </span>
            </label>
            <label class="cs-option {% if not xaxis_datetime %}selected{% endif %}" id="cs-opt-hours">
                <input type="radio" name="xaxis" value="false" {% if not xaxis_datetime %}checked{% endif %}>
                <span class="material-symbols-outlined cs-option-icon">schedule</span>
                <span class="cs-option-label">
                    Hours
                    <span class="cs-option-desc">— hour index from simulation start</span>
                </span>
            </label>
        </div>
        <div id="cs-modal-actions">
            <button id="cs-modal-cancel">Cancel</button>
            <button id="cs-modal-save">Apply</button>
        </div>
    </div>
</div>

<script>
(function() {
    var yearsData            = {{ years_data_json|safe }};
    var yearCumulativeHours  = {{ year_cumulative_hours_json|safe }};
    var datumIso             = '{{ datum_iso }}';
    var useDateTime          = {{ xaxis_datetime|yesno:'true,false' }};
    var updateXaxisUrl = '{{ update_xaxis_url }}';
    var csrfToken      = '{{ csrf_token }}';

    var LAYOUT_DEFAULTS = {
        margin: { l: 50, r: 20, t: 30, b: 0 },
        paper_bgcolor: 'transparent',
        plot_bgcolor:  '#f7fcfd',
        font: { family: 'Ubuntu, sans-serif', size: 11, color: '#4a7a80' },
        xaxis: { gridcolor: '#d4eef0', zeroline: false, ticklen: 6, tickcolor: 'transparent' },
        yaxis: { gridcolor: '#d4eef0', zeroline: false, exponentformat: 'e', minexponent: 4 },
        legend: { orientation: 'h', y: 1.08, yanchor: 'bottom', x: 0.5, xanchor: 'center', font: { size: 10 } },
        hovermode: 'x unified',
        dragmode: 'zoom',
    };

    var TEAL   = '#22a6b3';
    var TEAL2  = '#136b75';
    var AMBER  = '#f0a500';
    var GREEN  = '#27ae60';
    var UNIT_PALETTE = ['#22a6b3','#136b75','#f0a500','#27ae60','#8e44ad','#e67e22','#c0392b','#2980b9'];
    // Lighter shades for year 2+ (same hue, reduced opacity via rgba)
    var YEAR_ALPHA = [1.0, 0.6, 0.4, 0.3];

    var baseMs = new Date(datumIso + 'T00:00:00Z').getTime();

    // ── 1Hz shaded region on hourly charts ───────────────────────────────
    // hz_meta.start_hour / end_hour are absolute hour indices from the run origin.
    {% if has_1hz_data and hz_meta %}
    var _hz1hzStartHour = {{ hz_meta.start_hour }};
    var _hz1hzEndHour   = {{ hz_meta.end_hour }};
    {% else %}
    var _hz1hzStartHour = null;
    var _hz1hzEndHour   = null;
    {% endif %}

    function hz1hzShape() {
        if (_hz1hzStartHour === null || _hz1hzEndHour === null) return null;
        var x0, x1;
        if (useDateTime) {
            x0 = new Date(baseMs + _hz1hzStartHour * 3600000).toISOString();
            x1 = new Date(baseMs + (_hz1hzEndHour + 1) * 3600000).toISOString();
        } else {
            x0 = _hz1hzStartHour;
            x1 = _hz1hzEndHour + 1;
        }
        return {
            type: 'rect',
            xref: 'x', yref: 'paper',
            x0: x0, x1: x1,
            y0: 0, y1: 1,
            fillcolor: 'rgba(34,166,179,0.08)',
            line: { width: 0 },
            layer: 'below',
        };
    }

    function withHz1hzShape(layout) {
        var shape = hz1hzShape();
        if (!shape) return layout;
        var out = Object.assign({}, layout);
        out.shapes = (layout.shapes || []).concat([shape]);
        return out;
    }

    // Build x values for a data array starting at cumulative hour offset
    function xvals(arr, cumHours) {
        if (!useDateTime) {
            return arr.map(function(_, i) { return cumHours + i; });
        }
        return arr.map(function(_, i) {
            return new Date(baseMs + (cumHours + i) * 3600000).toISOString();
        });
    }

    function xaxisLayout() {
        var base = Object.assign({}, LAYOUT_DEFAULTS.xaxis, { automargin: true });
        if (useDateTime) {
            base.type = 'date';
        } else {
            base.title = { text: 'Hour', standoff: 10 };
        }
        return base;
    }

    function fmtNum(v, dec) {
        if (v == null || isNaN(v)) return '—';
        return v.toFixed(dec != null ? dec : 2);
    }

    function fmtH2(g) {
        if (g == null || isNaN(g)) return '—';
        if (g >= 1e9)  return (g / 1e9).toFixed(2)  + ' kt';
        if (g >= 1e6)  return (g / 1e6).toFixed(2)  + ' t';
        if (g >= 1000) return (g / 1e3).toFixed(0) + ' kg';
        return g.toFixed(0) + ' g';
    }

    // Concatenate a named array across all years into one flat array + matching x
    function concatAllYears(key, transform) {
        var xs = [], ys = [];
        yearsData.forEach(function(d, idx) {
            var arr = d[key];
            if (!arr || !arr.length) return;
            var cumHours = yearCumulativeHours[idx] || 0;
            var xarr = xvals(arr, cumHours);
            var yarr = transform ? arr.map(transform) : arr;
            xs = xs.concat(xarr);
            ys = ys.concat(yarr);
        });
        return { x: xs, y: ys };
    }

    // ── Original battery rating = first value of year 0 ──────────────────
    var origRating = null;
    if (yearsData[0] && yearsData[0].arBatteryRating && yearsData[0].arBatteryRating.length) {
        origRating = yearsData[0].arBatteryRating[0];
    }

    // ── Chart 1: H₂ Production (cumulative) ──────────────────────────────
    (function() {
        var traces = [];
        yearsData.forEach(function(d, idx) {
            if (!d.arTotalH2 || !d.arTotalH2.length) return;
            var cumHours = yearCumulativeHours[idx] || 0;
            var h2t = d.arTotalH2.map(function(v) { return v / 1e6; });
            traces.push({
                x: xvals(d.arTotalH2, cumHours), y: h2t,
                type: 'scatter', mode: 'lines',
                fill: idx === 0 ? 'tozeroy' : 'none',
                fillcolor: 'rgba(39,174,96,0.10)',
                line: { color: GREEN, width: 1.5 },
                name: yearsData.length > 1 ? 'Year ' + (idx + 1) : 'Cumulative H₂',
                hovertemplate: '%{y:.3f} t<extra>' + (yearsData.length > 1 ? 'Year ' + (idx + 1) : 'H₂') + '</extra>',
            });
        });
        if (traces.length) {
            Plotly.newPlot('chart-h2', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis, { title: 't H₂' }),
                    xaxis: xaxisLayout(),
                    showlegend: traces.length > 1,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-h2').innerHTML = '<div class="no-data-notice">No H₂ production data.</div>';
        }
    })();

    // ── Chart 2: Electrolyser efficiency ─────────────────────────────────
    (function() {
        function holdLastDuringOff(series, elecOnAv) {
            if (!series || !series.length) return series;
            var out = series.slice();
            var last = null;
            for (var i = 0; i < out.length; i++) {
                var isOff = false;
                if (elecOnAv && elecOnAv.length === out.length) {
                    isOff = !(elecOnAv[i] > 0);
                } else {
                    isOff = !(out[i] != null && isFinite(out[i]) && out[i] > 0);
                }

                if (isOff) {
                    if (last != null) out[i] = last;
                    continue;
                }

                if (out[i] != null && isFinite(out[i])) {
                    last = out[i];
                }
            }
            return out;
        }

        var traces = [];
        var baselineEta = null;
        yearsData.forEach(function(d) {
            if (baselineEta != null) return;
            var arr = d.arEtaElPeak;
            if (!arr || !arr.length) return;
            for (var i = 0; i < arr.length; i++) {
                var v = arr[i];
                if (v != null && isFinite(v) && v > 0) {
                    baselineEta = v;
                    break;
                }
            }
        });

        yearsData.forEach(function(d, idx) {
            var cumHours = yearCumulativeHours[idx] || 0;
            var peakEta = d.arEtaElPeak;

            // Backward compatibility for older runs without arEtaElPeak in HDF5.
            if ((!peakEta || !peakEta.length) && d.arDegradationPerUnit && d.arDegradationPerUnit.length) {
                var legacy = d.arDegradationPerUnit[0];
                peakEta = legacy.map(function(v) { return Math.max(0, 1 - v); });
                if (baselineEta == null) baselineEta = 1.0;
            }
            if (!peakEta || !peakEta.length) return;

            var effPct = peakEta.map(function(v) {
                if (v == null || !isFinite(v) || v < 0) return null;
                if (baselineEta == null || baselineEta <= 0) return v * 100;
                return (v / baselineEta) * 100;
            });
            effPct = holdLastDuringOff(effPct, d.arElecOnAv);

            var label = yearsData.length > 1 ? 'Year ' + (idx + 1) : 'Peak efficiency';
            traces.push({
                x: xvals(effPct, cumHours), y: effPct,
                type: 'scatter', mode: 'lines',
                line: { color: TEAL2, width: 1.4,
                        dash: idx === 0 ? 'solid' : (idx === 1 ? 'dot' : 'dash') },
                name: label,
                hovertemplate: '%{y:.1f}%<extra>' + label + '</extra>',
            });

            var sysEta = d.arEtaSystemPeak;
            if (sysEta && sysEta.length) {
                var sysPct = sysEta.map(function(v) {
                    if (v == null || !isFinite(v) || v < 0) return null;
                    if (baselineEta == null || baselineEta <= 0) return v * 100;
                    return (v / baselineEta) * 100;
                });
                sysPct = holdLastDuringOff(sysPct, d.arElecOnAv);
                var sysLabel = (yearsData.length > 1 ? 'Year ' + (idx + 1) + ' ' : '') + 'System';
                traces.push({
                    x: xvals(sysPct, cumHours), y: sysPct,
                    type: 'scatter', mode: 'lines',
                    line: { color: TEAL, width: 1.2,
                            dash: idx === 0 ? 'solid' : (idx === 1 ? 'dot' : 'dash') },
                    name: sysLabel,
                    hovertemplate: '%{y:.1f}%<extra>' + sysLabel + '</extra>',
                });
            }
        });
        if (traces.length) {
            Plotly.newPlot('chart-eff', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis,
                              { title: '% of original', tickformat: '.1f', rangemode: 'tozero' }),
                    xaxis: xaxisLayout(),
                    showlegend: traces.length > 1,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-eff').innerHTML = '<div class="no-data-notice">No electrolyser degradation data.</div>';
        }
    })();

    // ── Chart 3: Battery SoC + rated capacity ────────────────────────────
    (function() {
        var traces = [];
        var addedSocLabel = false, addedRatingLabel = false;
        yearsData.forEach(function(d, idx) {
            var cumHours = yearCumulativeHours[idx] || 0;
            var ratingFrac = null;
            if (d.arBatteryRating && origRating && origRating > 0) {
                ratingFrac = d.arBatteryRating.map(function(v) { return v / origRating; });
            }
            if (d.arSoc && d.arSoc.length) {
                var socScaled = (ratingFrac && ratingFrac.length === d.arSoc.length)
                    ? d.arSoc.map(function(v, i) { return v * ratingFrac[i]; })
                    : d.arSoc;
                var socLabel = yearsData.length > 1 ? 'SoC Y' + (idx + 1) : 'SoC';
                traces.push({
                    x: xvals(socScaled, cumHours), y: socScaled,
                    type: 'scatter', mode: 'lines',
                    line: { color: TEAL, width: 1.2,
                            dash: idx === 0 ? 'solid' : (idx === 1 ? 'dot' : 'dash') },
                    name: socLabel,
                    hovertemplate: '%{y:.4f}<extra>' + socLabel + '</extra>',
                });
            }
            if (ratingFrac) {
                var ratLabel = yearsData.length > 1 ? 'Capacity Y' + (idx + 1) : 'Rated capacity / original';
                traces.push({
                    x: xvals(ratingFrac, cumHours), y: ratingFrac,
                    type: 'scatter', mode: 'lines',
                    line: { color: AMBER, width: 1.4,
                            dash: idx === 0 ? 'dash' : (idx === 1 ? 'longdash' : 'dashdot') },
                    name: ratLabel,
                    hovertemplate: '%{y:.4f}<extra>' + ratLabel + '</extra>',
                });
            }
        });
        if (traces.length) {
            Plotly.newPlot('chart-soc', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis,
                           { title: 'Fraction (0–1)', tickformat: '.3f' }),
                    xaxis: xaxisLayout(),
                    showlegend: true,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-soc').innerHTML = '<div class="no-data-notice">No battery SoC data.</div>';
        }
    })();

    // ── Chart 4: Electrolysers switched on % ─────────────────────────────
    (function() {
        var traces = [];
        yearsData.forEach(function(d, idx) {
            if (!d.arElecOnAv || !d.arElecOnAv.length) return;
            var cumHours = yearCumulativeHours[idx] || 0;
            var numUnits = d.iNumUnits || 1;
            var onPct = d.arElecOnAv.map(function(v) { return v / numUnits * 100; });
            var label = yearsData.length > 1 ? 'Year ' + (idx + 1) : '% units on';
            traces.push({
                x: xvals(onPct, cumHours), y: onPct,
                type: 'scatter', mode: 'lines',
                line: { color: AMBER, width: 1.2 },
                fill: idx === 0 ? 'tozeroy' : 'none',
                fillcolor: 'rgba(240,165,0,0.08)',
                name: label,
                hovertemplate: '%{y:.1f}%<extra>' + label + '</extra>',
            });
        });
        if (traces.length) {
            Plotly.newPlot('chart-elec', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis,
                           { title: '% units on', range: [-5, 105] }),
                    xaxis: xaxisLayout(),
                    showlegend: traces.length > 1,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-elec').innerHTML = '<div class="no-data-notice">No electrolyser availability data.</div>';
        }
    })();

    // ── Chart 5: Power ────────────────────────────────────────────────────
    (function() {
        var traces = [];
        yearsData.forEach(function(d, idx) {
            var cumHours = yearCumulativeHours[idx] || 0;
            var ysfx = yearsData.length > 1 ? ' Y' + (idx + 1) : '';
            var dash = idx === 0 ? 'solid' : (idx === 1 ? 'dot' : 'dash');
            if (d.arWindPower && d.arWindPower.length) {
                traces.push({
                    x: xvals(d.arWindPower, cumHours), y: d.arWindPower,
                    type: 'scatter', mode: 'lines',
                    line: { color: '#7ecbcf', width: 1.2, dash: dash },
                    name: 'Wind' + ysfx,
                    hovertemplate: '%{y:.3s}W<extra>Wind' + ysfx + '</extra>',
                });
            }
            if (d.arElectroPower && d.arElectroPower.length) {
                traces.push({
                    x: xvals(d.arElectroPower, cumHours), y: d.arElectroPower,
                    type: 'scatter', mode: 'lines',
                    line: { color: AMBER, width: 1.2, dash: dash },
                    name: 'Electrolyser' + ysfx,
                    hovertemplate: '%{y:.3s}W<extra>Electrolyser' + ysfx + '</extra>',
                });
            }
            if (d.arWindPower && d.arElectroPower &&
                    d.arWindPower.length === d.arElectroPower.length) {
                var battPwr = d.arWindPower.map(function(v, i) { return v - d.arElectroPower[i]; });
                traces.push({
                    x: xvals(battPwr, cumHours), y: battPwr,
                    type: 'scatter', mode: 'lines',
                    line: { color: TEAL2, width: 1.2, dash: dash },
                    name: 'Battery' + ysfx,
                    hovertemplate: '%{y:.3s}W<extra>Battery' + ysfx + '</extra>',
                });
            }
        });
        if (traces.length) {
            Plotly.newPlot('chart-power', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis, { title: 'Power (W)' }),
                    xaxis: xaxisLayout(),
                    showlegend: true,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-power').innerHTML = '<div class="no-data-notice">No power data available.</div>';
        }
    })();

    // ── Chart 6: Wind speed ───────────────────────────────────────────────
    (function() {
        var traces = [];
        yearsData.forEach(function(d, idx) {
            if (!d.arWindSpeed || !d.arWindSpeed.length) return;
            var cumHours = yearCumulativeHours[idx] || 0;
            var label = yearsData.length > 1 ? 'Year ' + (idx + 1) : 'Wind speed';
            traces.push({
                x: xvals(d.arWindSpeed, cumHours), y: d.arWindSpeed,
                type: 'scatter', mode: 'lines',
                line: { color: '#7ecbcf', width: 1,
                        dash: idx === 0 ? 'solid' : (idx === 1 ? 'dot' : 'dash') },
                name: label,
                hovertemplate: '%{y:.2f} m/s<extra>' + label + '</extra>',
            });
        });
        if (traces.length) {
            Plotly.newPlot('chart-wind', traces,
                withHz1hzShape(Object.assign({}, LAYOUT_DEFAULTS, {
                    yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis, { title: 'm/s' }),
                    xaxis: xaxisLayout(),
                    showlegend: traces.length > 1,
                })), { responsive: true, displayModeBar: false, scrollZoom: true });
        } else {
            document.getElementById('chart-wind').innerHTML = '<div class="no-data-notice">No wind speed data.</div>';
        }
    })();


    // ── Summary stats (aggregate across all years) ────────────────────────
    (function() {
        var totalH2g = 0, totalSpill = 0, totalReplacements = 0, finalRating = null;
        var cumReplacementSeries = [];
        yearsData.forEach(function(d) {
            if (d.arTotalH2 && d.arTotalH2.length)
                totalH2g += d.arTotalH2[d.arTotalH2.length - 1];
            if (d.arSpillPowerFull && d.arSpillPowerFull.length)
                totalSpill += d.arSpillPowerFull.reduce(function(a,b){return a+b;},0);
            if (d.iNumReplacementsYear !== undefined) {
                totalReplacements += d.iNumReplacementsYear;
            } else if (d.iNumReplacementsCumulative !== undefined) {
                cumReplacementSeries.push(d.iNumReplacementsCumulative);
            } else if (d.iNumReplacements !== undefined) {
                // Legacy behavior: old files may store cumulative counts under this key.
                cumReplacementSeries.push(d.iNumReplacements);
            }
            if (d.rFinalBatteryRating !== undefined)
                finalRating = d.rFinalBatteryRating;
        });

        if (totalReplacements === 0 && cumReplacementSeries.length) {
            var prev = 0;
            cumReplacementSeries.forEach(function(v) {
                var n = (v != null && isFinite(v)) ? v : prev;
                if (n >= prev) {
                    totalReplacements += (n - prev);
                    prev = n;
                } else {
                    // If ordering is unexpected, fall back to summing provided values.
                    totalReplacements += n;
                    prev = n;
                }
            });
        }

        var stats = [];
        if (totalH2g > 0) stats.push({ v: fmtH2(totalH2g), label: 'Total H₂ produced' });
        if (finalRating !== null) stats.push({ v: fmtNum(finalRating / 3.6e6, 1) + ' kWh', label: 'Battery capacity (final)' });
        if (totalSpill > 0) stats.push({ v: fmtNum(totalSpill / 1e3, 1) + ' kWh', label: 'Total spill energy' });
        stats.push({ v: String(totalReplacements), label: 'Battery replacements' });
        var row = document.getElementById('summary-row-all');
        if (row) {
            row.innerHTML = stats.map(function(s) {
                return '<div class="summary-stat">'
                     + '<div class="summary-stat-value">' + s.v + '</div>'
                     + '<div class="summary-stat-label">' + s.label + '</div>'
                     + '</div>';
            }).join('');
        }
    })();

    // ── Linked x-axis zoom ────────────────────────────────────────────────
    var CHART_IDS = ['chart-h2', 'chart-eff', 'chart-soc', 'chart-elec', 'chart-power', 'chart-wind'];
    var _syncPending = 0;

    function linkXaxes() {
        var divs = CHART_IDS.map(function(id) {
            return document.getElementById(id);
        }).filter(function(el) { return el && el._fullLayout; });
        if (divs.length < 2) return;
        divs.forEach(function(source) {
            source.on('plotly_relayout', function(ed) {
                if (_syncPending > 0) return;
                var x0 = ed['xaxis.range[0]'];
                var x1 = ed['xaxis.range[1]'];
                var autorange = ed['xaxis.autorange'];
                if (x0 === undefined && x1 === undefined && !autorange) return;
                var update = autorange ? { 'xaxis.autorange': true } : { 'xaxis.range': [x0, x1] };
                var targets = divs.filter(function(t) { return t !== source; });
                _syncPending += targets.length;
                targets.forEach(function(t) {
                    Plotly.relayout(t, update).then(function() {
                        _syncPending = Math.max(0, _syncPending - 1);
                    });
                });
            });
        });
    }

    // ── Inline 1Hz preview charts ─────────────────────────────────────────
    {% if has_1hz_data and hz_meta %}
    (function() {
        var hzX    = {{ hz_x_values_json|safe }};
        var hzSeries = {{ hz_series_json|safe }};
        var hzKeys   = {{ hz_plot_keys_json|safe }};

        var HZ_LAYOUT = Object.assign({}, LAYOUT_DEFAULTS, {
            xaxis: Object.assign({}, LAYOUT_DEFAULTS.xaxis, { type: 'date', automargin: true }),
            yaxis: Object.assign({}, LAYOUT_DEFAULTS.yaxis),
            showlegend: false,
        });

        var hzDivs = [];

        hzSeries.forEach(function(s, i) {
            var el = document.getElementById('hz-inline-chart-' + i);
            var titleEl = document.getElementById('hz-inline-title-' + i);
            if (!el) return;
            if (titleEl) titleEl.textContent = s.key;
            Plotly.newPlot(el, [{
                x: hzX,
                y: s.y,
                type: 'scattergl',
                mode: 'lines',
                name: s.key,
                line: { color: '#136b75', width: 1.2 },
            }], Object.assign({}, HZ_LAYOUT, {
                yaxis: Object.assign({}, HZ_LAYOUT.yaxis, { title: s.key }),
            }), { responsive: true, displayModeBar: false, scrollZoom: true });
            hzDivs.push(el);
        });

        // ── Linked x-axis zoom across all 3 inline 1Hz charts ────────────
        var _hzSyncPending = 0;

        function linkHz1HzAxes() {
            hzDivs.forEach(function(source) {
                source.on('plotly_relayout', function(ed) {
                    if (_hzSyncPending > 0) return;
                    var x0 = ed['xaxis.range[0]'];
                    var x1 = ed['xaxis.range[1]'];
                    var autorange = ed['xaxis.autorange'];
                    if (x0 === undefined && x1 === undefined && !autorange) return;
                    var update = autorange
                        ? { 'xaxis.autorange': true }
                        : { 'xaxis.range': [x0, x1] };
                    var targets = hzDivs.filter(function(t) { return t !== source; });
                    _hzSyncPending += targets.length;
                    targets.forEach(function(t) {
                        Plotly.relayout(t, update).then(function() {
                            _hzSyncPending = Math.max(0, _hzSyncPending - 1);
                        });
                    });
                });

                // Double-click on any chart resets all 3 to full range
                source.on('plotly_doubleclick', function() {
                    hzDivs.forEach(function(t) {
                        Plotly.relayout(t, { 'xaxis.autorange': true });
                    });
                    return false; // prevent Plotly's own double-click reset (we handle it)
                });
            });
        }

        setTimeout(linkHz1HzAxes, 0);
    })();
    {% endif %}

    setTimeout(linkXaxes, 0);

    // ── Re-render all charts (called after x-axis mode change) ────────────
    function reRenderAll() {
        CHART_IDS.forEach(function(id) {
            var el = document.getElementById(id);
            if (el) { Plotly.purge(el); el.innerHTML = ''; }
        });
        // Re-run all IIFE chart builders by reloading the page state
        // Simpler: reload the page preserving the POST state by navigating to same URL
        window.location.reload();
    }

    // ── Settings modal ────────────────────────────────────────────────────
    var overlay     = document.getElementById('chart-settings-overlay');
    var cogBtn      = document.getElementById('chart-settings-btn');
    var csCancel    = document.getElementById('cs-modal-cancel');
    var csSave      = document.getElementById('cs-modal-save');
    var csOptions   = document.querySelectorAll('.cs-option');
    var csRadios    = document.querySelectorAll('#cs-xaxis-options input[type=radio]');

    csRadios.forEach(function(r) {
        r.addEventListener('change', function() {
            csOptions.forEach(function(opt) {
                opt.classList.toggle('selected', opt.querySelector('input').checked);
            });
        });
    });

    cogBtn.addEventListener('click', function() { overlay.classList.add('open'); });
    csCancel.addEventListener('click', function() { overlay.classList.remove('open'); });
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) overlay.classList.remove('open');
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') overlay.classList.remove('open');
    });

    csSave.addEventListener('click', function() {
        var selected = document.querySelector('#cs-xaxis-options input[type=radio]:checked');
        if (!selected) return;
        csSave.disabled = true;
        var fd = new FormData();
        fd.append('xaxis_datetime', selected.value);
        fd.append('csrfmiddlewaretoken', csrfToken);
        fetch(updateXaxisUrl, { method: 'POST', body: fd })
            .then(function(r) { return r.json(); })
            .then(function() {
                overlay.classList.remove('open');
                window.location.reload();
            })
            .catch(function() {})
            .finally(function() { csSave.disabled = false; });
    });
})();
</script>

{% endblock %}