{% extends "dashboard/base.html" %}
{% block title %}Models{% endblock %}

{% block content %}


<!-- ── Hero banner ──────────────────────────────────────────────────────── -->
<div class="sim-hero">
    <div class="sim-hero-left">
        <span class="material-symbols-outlined sim-hero-icon">flowchart</span>
        <div>
            <div class="sim-hero-title">Models</div>
            <div class="sim-hero-sub">Assemble component configurations into simulation models</div>
        </div>
    </div>
    <div class="sim-hero-tips">
        <div class="sim-tip">
            <span class="material-symbols-outlined">touch_app</span>
            Click a model row to expand its components
        </div>
        <div class="sim-tip">
            <span class="material-symbols-outlined">explore</span>
            Use <em>View</em> to open the detail &amp; run page
        </div>
        <div class="sim-tip">
            <span class="material-symbols-outlined">widgets</span>
            Add components in the <a href="{% url 'dashboard-home' %}">Component Library</a> first
        </div>
    </div>
    <div class="sim-hero-actions" style="display:flex;gap:0.5rem;align-items:center;">
        <button class="sim-hero-btn" id="default-model-btn"
                onclick="createDefaultModel(this)">
            <span class="material-symbols-outlined" style="font-size:1.1rem;">auto_awesome</span>
            Default Model
        </button>
        <button class="sim-hero-btn"
                onclick="openNewSim()">
            <span class="material-symbols-outlined" style="font-size:1.1rem;">add</span>
            New Model
        </button>
    </div>
</div>

<style>
    /* ── Hero banner ── */
    .sim-hero {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 1.1rem 1.5rem;
        margin-bottom: 1.5rem;
        background: linear-gradient(100deg, #0e5560 0%, #136b75 55%, #1a8a96 100%);
        border-radius: 12px;
        box-shadow: 0 3px 14px rgba(19,107,117,0.18);
        flex-wrap: wrap;
    }
    .sim-hero-left {
        display: flex; align-items: center; gap: 0.9rem;
        flex-shrink: 0;
    }
    .sim-hero-icon {
        font-size: 2.4rem;
        color: rgba(255,255,255,0.55);
        font-variation-settings: 'wght' 100;
    }
    .sim-hero-title {
        font-size: 1.25rem; font-weight: 600; color: #fff;
        line-height: 1.2;
    }
    .sim-hero-sub {
        font-size: 0.78rem; color: #a8e6ec; margin-top: 0.2rem;
    }
    .sim-hero-tips {
        display: flex; flex-direction: column; gap: 0.35rem;
        flex: 1; min-width: 200px;
        border-left: 1px solid rgba(255,255,255,0.18);
        padding-left: 1.4rem;
    }
    .sim-tip {
        display: flex; align-items: center; gap: 0.45rem;
        font-size: 0.78rem; color: #cdf0f4;
    }
    .sim-tip .material-symbols-outlined {
        font-size: 0.95rem; color: #64d0db; flex-shrink: 0;
    }
    .sim-tip a { color: #a8e6ec; }
    .sim-tip a:hover { color: #fff; }
    .sim-hero-actions { flex-shrink: 0; margin-left: auto; }
    .sim-hero-btn {
        display: inline-flex; align-items: center; gap: 0.4rem;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.4);
        color: #fff;
        border-radius: 8px;
        padding: 0.5rem 1.1rem;
        font-size: 0.88rem; font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
    }
    .sim-hero-btn:hover { background: rgba(255,255,255,0.28); }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Card grid ── */
    .sim-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.1rem;
    }

    .sim-card {
        height: 400px;
        border: 1.5px solid #b2e0e4;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(34,166,179,0.10);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.15s, transform 0.15s;
    }

    .sim-card:hover {
        box-shadow: 0 6px 20px rgba(34,166,179,0.18);
        transform: translateY(-2px);
    }

    /* Card header band */
    .sim-card-header {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.65rem 0.9rem;
        background: linear-gradient(90deg, #136b75 0%, #22a6b3 100%);
        flex-shrink: 0;
    }

    .sim-card-name {
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sim-card-id {
        font-size: 0.72rem;
        color: #a8e6ec;
        flex-shrink: 0;
    }

    .sim-card-view {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.35);
        color: #fff;
        border-radius: 5px;
        padding: 0.25rem 0.55rem;
        font-size: 0.75rem;
        font-weight: 500;
        text-decoration: none;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .sim-card-view:hover { background: rgba(255,255,255,0.28); color: #fff; }
    .sim-card-view .material-symbols-outlined { font-size: 0.85rem; }

    /* Card body: component summary */
    .sim-card-body {
        flex: 1;
        overflow: hidden;
        padding: 0.55rem 0.9rem 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
    }

    .sim-comp-row {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        color: #4a7a80;
        white-space: nowrap;
        overflow: hidden;
    }

    .sim-comp-row .material-symbols-outlined {
        font-size: 0.85rem;
        color: #b2e0e4;
        flex-shrink: 0;
    }

    .sim-comp-row.has-items { color: #1a2e30; }
    .sim-comp-row.has-items .material-symbols-outlined { color: #22a6b3; }

    .sim-comp-names {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sim-comp-count {
        flex-shrink: 0;
        background: #e8f8f9;
        color: #136b75;
        border-radius: 999px;
        padding: 0 6px;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.7;
    }

    /* Card footer: date */
    .sim-card-footer {
        padding: 0.3rem 0.9rem;
        font-size: 0.7rem;
        color: #4a7a80;
        border-top: 1px solid #e8f8f9;
        background: #f9fdfd;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }

    .sim-card-footer .material-symbols-outlined { font-size: 0.8rem; color: #b2e0e4; }

    /* ── Empty state ── */
    .sim-empty {
        padding: 2.5rem;
        text-align: center;
        color: #4a7a80;
        font-size: 0.95rem;
        border: 1.5px solid #b2e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .sim-empty .material-symbols-outlined {
        font-size: 2.5rem;
        color: #b2e0e4;
        display: block;
        margin-bottom: 0.5rem;
    }
</style>

{% if sim_data %}
<div class="sim-grid">
    {% for entry in sim_data %}
    <div class="sim-card">

        <!-- Header band -->
        <div class="sim-card-header">
            <span class="material-symbols-outlined" style="color:rgba(255,255,255,0.5); font-size:1.1rem; font-variation-settings:'wght' 200; flex-shrink:0;">flowchart</span>
            <span class="sim-card-name" title="{{ entry.obj.name }}">{{ entry.obj.name }}</span>
            <span class="sim-card-id">#{{ entry.obj.id }}</span>
            <a class="sim-card-view" href="{% url 'dashboard-simulation-detail' entry.obj.id %}">
                <span class="material-symbols-outlined">explore</span>
                View
            </a>
        </div>

        <!-- Component summary -->
        <div class="sim-card-body">
            {% for group in entry.components %}
            <div class="sim-comp-row {% if group.items %}has-items{% endif %}">
                <span class="material-symbols-outlined">{{ group.icon }}</span>
                <span class="sim-comp-names">
                    {% if group.items %}
                        {% for item in group.items %}{{ item.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
                    {% else %}
                        <span style="color:#b2e0e4;">{{ group.label }}: none</span>
                    {% endif %}
                </span>
                {% if group.items %}
                <span class="sim-comp-count">{{ group.items|length }}</span>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <!-- Footer -->
        <div class="sim-card-footer">
            <span class="material-symbols-outlined">calendar_today</span>
            {{ entry.obj.created_at|date:"d M Y" }}
            {% if entry.obj.description %}
            &ensp;&middot;&ensp;<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ entry.obj.description }}">{{ entry.obj.description|truncatechars:45 }}</span>
            {% endif %}
        </div>

    </div>
    {% endfor %}
</div>

{% else %}
<div class="sim-empty">
    <span class="material-symbols-outlined">flowchart</span>
    No simulations found in the database.
</div>
{% endif %}



<!-- ── New Model Modal ─────────────────────────────────────────────── -->
<style>
#new-sim-overlay.open { display: flex !important; }
.nsm-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 1rem 1.25rem 0.85rem;
    background: linear-gradient(90deg,#136b75,#22a6b3);
    color: #fff;
}
.nsm-header h3 { margin:0; font-weight:500; font-size:1.05rem; flex:1; }
.nsm-close {
    background:none; border:none; cursor:pointer; color:#d0f0f3;
    font-size:1.4rem; line-height:1; padding:0;
}
.nsm-close:hover { color:#fff; }
/* .nsm-body layout is inline on the element */
.nsm-field { display:flex; flex-direction:column; gap:0.3rem; }
.nsm-field label {
    font-size:0.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.08em; color:#4a7a80;
}
.nsm-field input[type=text],
.nsm-field textarea {
    border: 1.5px solid #b2e0e4;
    border-radius: 6px;
    padding: 0.45rem 0.65rem;
    font-size: 0.9rem;
    color: #1a2e30;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    resize: vertical;
    min-height: 4rem;
}
.nsm-field input[type=text]:focus,
.nsm-field textarea:focus { border-color: #22a6b3; }

/* ── Component collapsible sections (scoped to #new-sim-modal) ── */
#new-sim-modal .nsm-comp-section {
    border: 1.5px solid #b2e0e4;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
#new-sim-modal .nsm-comp-section-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0 0.75rem;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box;
    overflow: hidden;
    background: #e8f8f9;
    font-size: 0.85rem; font-weight: 600; color: #136b75;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
#new-sim-modal .nsm-comp-section-header:hover { background: #d4f0f4; }
#new-sim-modal .nsm-comp-section-header > .material-symbols-outlined {
    font-size: 1rem !important;
    color: #22a6b3;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
}
#new-sim-modal .nsm-sel-count {
    background: #22a6b3; color: #fff;
    border-radius: 999px; padding: 0 7px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.7;
    display: none;
}
#new-sim-modal .nsm-sel-count.visible { display: inline-block; }
#new-sim-modal .nsm-chevron {
    margin-left: auto;
    font-size: 1.1rem !important;
    color: #22a6b3 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    transform: none !important;
    transition: transform 0.2s;
}
#new-sim-modal .nsm-comp-section.open > .nsm-comp-section-header .nsm-chevron { transform: rotate(180deg); }
#new-sim-modal .nsm-section-body {
    display: none;
    border-top: 1px solid #b2e0e4;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 220px;
}
#new-sim-modal .nsm-comp-section.open > .nsm-section-body { display: block; }
#new-sim-modal .nsm-comp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
    font-size: 0.81rem;
}
#new-sim-modal .nsm-comp-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #f4fafb;
    color: #4a7a80;
    font-size: 0.71rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 0.38rem 0.65rem;
    border-bottom: 1.5px solid #b2e0e4;
    white-space: nowrap;
    text-align: left;
}
#new-sim-modal .nsm-comp-table thead th:first-child { width: 32px; text-align: center; }
#new-sim-modal .nsm-comp-table tbody tr {
    border-bottom: 1px solid #e8f8f9;
    cursor: pointer;
    transition: background 0.1s;
}
#new-sim-modal .nsm-comp-table tbody tr:hover { background: #f0fbfc; }
#new-sim-modal .nsm-comp-table tbody tr.nsm-row-sel { background: #d6f4f7; }
#new-sim-modal .nsm-comp-table tbody td { padding: 0.35rem 0.65rem; color: #1a2e30; white-space: nowrap; }
#new-sim-modal .nsm-comp-table tbody td:first-child { text-align: center; }
#new-sim-modal .nsm-comp-table input[type=checkbox] { accent-color: #136b75; cursor: pointer; width: 14px; height: 14px; }
#new-sim-modal .nsm-empty-opt {
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem; color: #4a7a80; font-style: italic;
}
.nsm-footer {
    padding: 0.85rem 1.25rem;
    display:flex; justify-content:flex-end; gap:0.65rem;
    border-top: 1px solid #e0f4f6;
    background: #f4fafb;
}
.nsm-btn {
    display:inline-flex; align-items:center; gap:0.35rem;
    border-radius:7px; padding:0.45rem 1.1rem;
    font-size:0.88rem; font-weight:500; cursor:pointer;
    border: none; transition: background 0.15s;
}
.nsm-btn-cancel { background:#e0f4f6; color:#136b75; }
.nsm-btn-cancel:hover { background:#b2e0e4; }
.nsm-btn-create { background:#136b75; color:#fff; }
.nsm-btn-create:hover { background:#22a6b3; }
.nsm-btn-create:disabled { opacity:0.5; cursor:not-allowed; }
</style>

<div id="new-sim-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(10,30,35,0.55);align-items:center;justify-content:center;">
  <div id="new-sim-modal" style="background:#fff;border-radius:12px;box-shadow:0 8px 40px rgba(19,107,117,0.22);width:min(680px,95vw);height:85vh;display:flex;flex-direction:column;">
    <div class="nsm-header" style="flex-shrink:0;">
        <span class="material-symbols-outlined" style="font-size:1.3rem;">flowchart</span>
        <h3>New Model</h3>
        <button class="nsm-close" onclick="closeNewSim()" title="Close">&times;</button>
    </div>
    <div class="nsm-body" style="padding:1.1rem 1.25rem;overflow-y:scroll;flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem;">

        <!-- Name & description -->
        <div class="nsm-field">
            <label for="nsm-name">Name</label>
            <input type="text" id="nsm-name" placeholder="e.g. 1 Turbine — 10 MW" maxlength="100" style="height:4rem;box-sizing:border-box;">
        </div>
        <div class="nsm-field">
            <label for="nsm-desc">Description <span style="font-weight:400;text-transform:none;">(optional)</span></label>
            <textarea id="nsm-desc" rows="2" placeholder="Short note about this simulation..."></textarea>
        </div>

        <!-- Component collapsible sections -->
        {% for section in nsm_sections %}
        <div class="nsm-comp-section" id="nsm-sec-{{ section.field }}">
            <div class="nsm-comp-section-header" onclick="nsmToggleSection('{{ section.field }}')">
                <span class="material-symbols-outlined" style="padding:0;margin:0;line-height:1;transform:none;font-size:1rem;color:#22a6b3;flex-shrink:0;">{{ section.icon }}</span>
                {{ section.label }}
                <span class="nsm-sel-count" id="nsm-count-{{ section.field }}">0</span>
                <span class="material-symbols-outlined nsm-chevron" style="padding:0;margin:0 0 0 auto;line-height:1;font-size:1.1rem;color:#22a6b3;flex-shrink:0;">expand_more</span>
            </div>
            <div class="nsm-section-body">
            {% if section.items %}
            <table class="nsm-comp-table">
                <thead><tr>
                    <th><input type="checkbox" title="Select all" onchange="nsmToggleAll(this,'{{ section.field }}')"></th>
                    <th>ID</th>
                    <th>Name</th>
                    {% if section.field == 'batteries' %}
                    <th>Capacity (MWh)</th><th>Rating (MW)</th><th>Init SoC</th><th>Min SoC</th><th>RCD</th>
                    {% elif section.field == 'electro_cells' %}
                    <th>Cell Area (cm²)</th><th>Rated I (A/cm²)</th><th>Nom Temp (°C)</th><th>E_min0 (V)</th>
                    {% elif section.field == 'electrolyser_units' %}
                    <th>Stacks/Bank</th><th>Banks/Unit</th><th>Cells/Stack</th><th>Time Const (s)</th><th>Turn-Down</th>
                    {% elif section.field == 'thermal_properties' %}
                    <th>Ambient (°C)</th><th>Target (°C)</th><th>Min (°C)</th><th>Heat τ (s)</th><th>Cool τ (s)</th>
                    {% elif section.field == 'wind_inputs' %}
                    <th>Wind File</th><th>Start (s)</th><th>End (s)</th><th>Δt (s)</th><th>N Hours</th>
                    {% endif %}
                </tr></thead>
                <tbody>
                {% for item in section.items %}
                <tr onclick="nsmToggleRow(this,'{{ section.field }}')">
                    <td><input type="checkbox" class="nsm-cb-{{ section.field }}" value="{{ item.id }}"
                               onclick="event.stopPropagation()"
                               onchange="nsmRowCheck(this,'{{ section.field }}')">
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    {% if section.field == 'batteries' %}
                    <td>{{ item.rBatteryMWh }}</td><td>{{ item.rBatteryRating }}</td>
                    <td>{{ item.arInitialSoC }}</td><td>{{ item.rControlTargetSoC }}</td><td>{{ item.rRCD }}</td>
                    {% elif section.field == 'electro_cells' %}
                    <td>{{ item.rA_cell }}</td><td>{{ item.rI_rated }}</td>
                    <td>{{ item.rT_0 }}</td><td>{{ item.rE_min0 }}</td>
                    {% elif section.field == 'electrolyser_units' %}
                    <td>{{ item.iN_stacks }}</td><td>{{ item.iN_banks }}</td>
                    <td>{{ item.iN_cell }}</td><td>{{ item.rTimeConst }}</td><td>{{ item.rTurnDownRatio }}</td>
                    {% elif section.field == 'thermal_properties' %}
                    <td>{{ item.rAmbientTemp }}</td><td>{{ item.rTargetTemp }}</td>
                    <td>{{ item.rMinTemp }}</td><td>{{ item.rTauHeating }}</td><td>{{ item.rTauCooling }}</td>
                    {% elif section.field == 'wind_inputs' %}
                    <td>{{ item.wind_file|default:"—" }}</td><td>{{ item.ts_start|default:"—" }}</td>
                    <td>{{ item.ts_end|default:"—" }}</td><td>{{ item.ts_resolution|default:"—" }}</td>
                    <td>{{ item.ts_n_hours|default:"—" }}</td>
                    {% endif %}
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="nsm-empty-opt">No {{ section.label }} records &mdash; <a href="{% url 'dashboard-browse' section.table %}" style="color:#136b75;">add one first</a></div>
            {% endif %}
            </div>
        </div>
        {% endfor %}

    </div>
    <div class="nsm-footer">
        <button class="nsm-btn nsm-btn-cancel" onclick="closeNewSim()">Cancel</button>
        <button class="nsm-btn nsm-btn-create" id="nsm-save-btn" onclick="submitNewSim()">
            <span class="material-symbols-outlined" style="font-size:1rem;">add</span>
            Create
        </button>
    </div>
  </div>
</div>

<script>
var _nsmCsrf = '{{ csrf_token }}';
var _nsmCreateUrl = '{{ create_url }}';

function closeNewSim() {
    document.getElementById('new-sim-overlay').classList.remove('open');
}

function openNewSim() {
    var overlay = document.getElementById('new-sim-overlay');
    overlay.classList.add('open');
    // diagnostic — remove after confirming scroll works
    var body = overlay.querySelector('.nsm-body');
    var cs = window.getComputedStyle(body);
    console.log('[nsm-body] overflow-y:', cs.overflowY, '| height:', cs.height, '| flex:', cs.flex, '| scrollHeight:', body.scrollHeight);
    var modal = document.getElementById('new-sim-modal');
    var ms = window.getComputedStyle(modal);
    console.log('[nsm-modal] height:', ms.height, '| overflow:', ms.overflow);
}

function nsmToggleSection(field) {
    document.getElementById('nsm-sec-' + field).classList.toggle('open');
}

function nsmToggleAll(masterCb, field) {
    document.querySelectorAll('.nsm-cb-' + field).forEach(function(cb) {
        cb.checked = masterCb.checked;
        cb.closest('tr').classList.toggle('nsm-row-sel', masterCb.checked);
    });
    updateNsmCount(field);
}

function nsmToggleRow(tr, field) {
    var cb = tr.querySelector('input[type=checkbox]');
    cb.checked = !cb.checked;
    tr.classList.toggle('nsm-row-sel', cb.checked);
    updateNsmCount(field);
}

function nsmRowCheck(cb, field) {
    cb.closest('tr').classList.toggle('nsm-row-sel', cb.checked);
    updateNsmCount(field);
}

function updateNsmCount(field) {
    var n = document.querySelectorAll('.nsm-cb-' + field + ':checked').length;
    var badge = document.getElementById('nsm-count-' + field);
    badge.textContent = n;
    badge.classList.toggle('visible', n > 0);
}

function createDefaultModel(btn) {
    btn.disabled = true;
    var orig = btn.innerHTML;
    btn.innerHTML = '<span class="sim-spinner" style="display:inline-block;width:0.85rem;height:0.85rem;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;"></span> Creating…';
    fetch('{% url "dashboard-create-default-model" %}', {
        method: 'POST',
        headers: {'X-CSRFToken': '{{ csrf_token }}'},
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.id) {
            window.location.href = '/simulations/' + data.id + '/';
        } else {
            alert('Error: ' + (data.error || 'unknown'));
            btn.disabled = false;
            btn.innerHTML = orig;
        }
    })
    .catch(function(e) {
        alert('Network error: ' + e);
        btn.disabled = false;
        btn.innerHTML = orig;
    });
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeNewSim();
});

function submitNewSim() {
    var btn  = document.getElementById('nsm-save-btn');
    var name = document.getElementById('nsm-name').value.trim();
    if (!name) { document.getElementById('nsm-name').focus(); return; }

    btn.disabled = true;

    var fd = new FormData();
    fd.append('csrfmiddlewaretoken', _nsmCsrf);
    fd.append('name', name);
    fd.append('description', document.getElementById('nsm-desc').value.trim());

    var fields = ['batteries','electro_cells','electrolyser_units',
                  'thermal_properties','wind_inputs'];
    fields.forEach(function(f) {
        document.querySelectorAll('.nsm-cb-' + f + ':checked').forEach(function(cb) {
            fd.append(f, cb.value);
        });
    });

    fetch(_nsmCreateUrl, { method: 'POST', body: fd })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.id) {
                window.location.href = '/simulations/' + data.id + '/';
            } else {
                alert('Error: ' + (data.error || 'unknown'));
                btn.disabled = false;
            }
        })
        .catch(function() { btn.disabled = false; });
}
</script>

{% endblock %}