{% extends "base.html" %}
{% block title %}q-ai — Intel{% endblock %}

{% block content %}
{% include "partials/target_create_modal.html" %}
<div class="max-w-5xl mx-auto px-6 pt-12 lg:pt-16 pb-6 lg:pb-8">

    {# ── Page header ── #}
    <div style="margin-bottom: 2rem; text-align: center;">
        <h1 class="font-mono text-2xl font-bold" style="color: #a78bfa; letter-spacing: 0.04em;">
            INTEL
        </h1>
        <p style="color: #64748b; font-size: 0.95rem; margin-top: 0.5rem;">
            Targets with their intel at a glance — click a target to review its evidence.
        </p>
    </div>

    {# ── Target list ── #}
    <div class="intel-target-list" style="max-width: 725px; margin: 0 auto 1.5rem;">
        <div class="intel-card-header" style="margin-bottom: 0.75rem;">
            <div class="intel-card-bar"></div>
            <span class="intel-card-name">Targets</span>
        </div>

        {% if overview.rows %}
        <div class="intel-target-rows">
            <div class="intel-target-row intel-target-row-head">
                <span class="intel-target-col-name">Name</span>
                <span class="intel-target-col-type">Type</span>
                <span class="intel-target-col-uri">URI</span>
                <span class="intel-target-col-badge">Probe</span>
                <span class="intel-target-col-badge">Sweep</span>
                <span class="intel-target-col-badge">Imports</span>
            </div>
            {% for row in overview.rows %}
            <a class="intel-target-row" href="/intel/targets/{{ row.target.id }}">
                <span class="intel-target-col-name">{{ row.target.name }}</span>
                <span class="intel-target-col-type">{{ row.target.type }}</span>
                <span class="intel-target-col-uri">{{ row.target.uri or "—" }}</span>
                <span class="intel-target-col-badge">{{ row.latest_probe_finished_at | format_age }}</span>
                <span class="intel-target-col-badge">{{ row.latest_sweep_finished_at | format_age }}</span>
                <span class="intel-target-col-badge">{{ row.latest_import_finished_at | format_age }}</span>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="intel-target-empty">
            <p class="text-sm" style="color: #94a3b8;">
                No targets defined. Add targets via <code class="text-xs">qai targets add</code>,
                or use the cards below to gather evidence.
            </p>
        </div>
        {% endif %}
    </div>

    {# ── Card container ── #}
    <div class="intel-cards" style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 725px; margin: 0 auto;">

        {# ════════════════════════════════════════════════════════
           Import Results Card
           ════════════════════════════════════════════════════════ #}
        <div class="intel-card" id="card-import">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Import Results</span>
            </div>
            <p class="intel-card-desc">
                Import findings from external tools — Garak, PyRIT, SARIF reports, scored prompts, or BIPIA benchmarks.
            </p>

            <form id="form-import" class="space-y-4" onsubmit="return false;">
                <div class="form-control">
                    <label class="label"><span class="label-text">File</span></label>
                    <input type="file" name="file" required
                           class="file-input file-input-bordered file-input-sm w-full"
                           accept=".json,.jsonl,.csv,.sarif" />
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Format</span></label>
                    <select name="format" required class="select select-bordered select-sm w-full">
                        <option value="" disabled selected>Select format...</option>
                        <option value="bipia">BIPIA Benchmark</option>
                        <option value="garak">Garak</option>
                        <option value="pyrit">PyRIT</option>
                        <option value="sarif">SARIF</option>
                        <option value="scored">Scored Prompts</option>
                    </select>
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Target</span></label>
                    <select name="target_id" required
                            class="select select-bordered select-sm w-full"
                            onchange="onTargetSelectChange(event)">
                        <option value="" disabled selected>Select target...</option>
                        <option value="__new__">+ Create new target</option>
                        {% for t in targets %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="flex gap-2">
                    <button type="button" class="btn btn-sm btn-launch" onclick="importPreview()">
                        Preview
                    </button>
                    <button type="button" class="btn btn-sm btn-launch" id="btn-import-commit"
                            onclick="importCommit()" disabled>
                        Import
                    </button>
                </div>

                <div id="import-error" class="text-sm hidden" style="color: #f87171;"></div>
            </form>

            {# Preview results area #}
            <div id="import-preview" class="hidden" style="margin-top: 1rem;">
                <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(139,92,246,0.2); border-radius: 8px; padding: 1rem;">
                    <h3 class="font-mono text-sm font-semibold" style="color: #a78bfa; margin-bottom: 0.5rem;">Preview</h3>
                    <div id="import-preview-body"></div>
                </div>
            </div>

            {# Import result area #}
            <div id="import-result" class="hidden" style="margin-top: 1rem;">
                <div style="background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); border-radius: 8px; padding: 1rem;">
                    <div id="import-result-body"></div>
                </div>
            </div>
        </div>

        {# ════════════════════════════════════════════════════════
           Probe Model Card
           ════════════════════════════════════════════════════════ #}
        <div class="intel-card" id="card-probe">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Probe Model</span>
            </div>
            <p class="intel-card-desc">
                Test a model's susceptibility to indirect prompt injection via canary-based probing.
            </p>

            <form id="form-probe" class="space-y-4" onsubmit="return launchProbe(event)">
                <div class="form-control">
                    <label class="label"><span class="label-text">Endpoint URL</span></label>
                    <input type="url" name="endpoint" required
                           placeholder="http://localhost:8000/v1"
                           class="input input-bordered input-sm w-full" />
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Model</span></label>
                    <input type="text" name="model" required
                           placeholder="gpt-4o-mini"
                           class="input input-bordered input-sm w-full" />
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">API Key (optional)</span></label>
                    <input type="password" name="api_key"
                           placeholder="sk-..."
                           class="input input-bordered input-sm w-full"
                           autocomplete="off" />
                </div>

                <div class="flex gap-4">
                    <div class="form-control">
                        <label class="label"><span class="label-text">Temperature</span></label>
                        <input type="number" name="temperature" value="0.0"
                               min="0" max="2" step="0.1"
                               class="input input-bordered input-sm w-24" />
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text">Concurrency</span></label>
                        <input type="number" name="concurrency" value="1"
                               min="1" max="10"
                               class="input input-bordered input-sm w-24" />
                    </div>
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Target</span></label>
                    <select name="target_id" required
                            class="select select-bordered select-sm w-full"
                            onchange="onTargetSelectChange(event)">
                        <option value="" disabled selected>Select target...</option>
                        <option value="__new__">+ Create new target</option>
                        {% for t in targets %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <button type="submit" class="btn btn-sm btn-launch">Launch Probes</button>

                <div id="probe-error" class="text-sm hidden" style="color: #f87171;"></div>
            </form>
        </div>

        {# ════════════════════════════════════════════════════════
           Sweep Card
           ════════════════════════════════════════════════════════ #}
        <div class="intel-card" id="card-sweep">
            <div class="intel-card-header">
                <div class="intel-card-bar"></div>
                <span class="intel-card-name">Sweep</span>
            </div>
            <p class="intel-card-desc">
                Measure per-template compliance on a target model to inform
                <code class="text-xs">qai ipi generate --target</code> auto-select.
            </p>

            <form id="form-sweep" onsubmit="return launchSweep(event)" class="space-y-4">
                <div class="form-control">
                    <label class="label"><span class="label-text">Endpoint URL</span></label>
                    <input type="url" name="endpoint" required
                           placeholder="http://localhost:8000/v1"
                           class="input input-bordered input-sm w-full" />
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Model</span></label>
                    <input type="text" name="model" required
                           placeholder="gpt-4o-mini"
                           class="input input-bordered input-sm w-full" />
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">API Key (optional)</span></label>
                    <input type="password" name="api_key"
                           placeholder="sk-..."
                           class="input input-bordered input-sm w-full"
                           autocomplete="off" />
                </div>

                <div class="flex gap-4">
                    <div class="form-control">
                        <label class="label"><span class="label-text">Temperature</span></label>
                        <input type="number" name="temperature" value="0.0"
                               min="0" max="2" step="0.1"
                               class="input input-bordered input-sm w-24" />
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text">Concurrency</span></label>
                        <input type="number" name="concurrency" value="1"
                               min="1" max="10"
                               class="input input-bordered input-sm w-24" />
                    </div>
                    <div class="form-control">
                        <label class="label"><span class="label-text">Reps</span></label>
                        <input type="number" name="reps" value="3"
                               min="1" max="20"
                               class="input input-bordered input-sm w-24" />
                    </div>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Templates (Ctrl/Cmd-click to deselect)</span>
                    </label>
                    <select name="templates" multiple size="6"
                            class="select select-bordered select-sm w-full">
                        {% for t in sweep_templates %}
                        <option value="{{ t }}" selected>{{ t }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Styles (Ctrl/Cmd-click to deselect)</span>
                    </label>
                    <select name="styles" multiple size="5"
                            class="select select-bordered select-sm w-full">
                        {% for s in sweep_styles %}
                        <option value="{{ s }}" selected>{{ s }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Citation frame</span></label>
                    <select name="citation_frame"
                            class="select select-bordered select-sm w-full">
                        {% for f in sweep_citation_frames %}
                        <option value="{{ f }}"
                                {% if f == sweep_citation_frame_default %}selected{% endif %}>
                            {{ f }}
                        </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-control">
                    <label class="label"><span class="label-text">Target</span></label>
                    <select name="target_id" required
                            class="select select-bordered select-sm w-full"
                            onchange="onTargetSelectChange(event)">
                        <option value="" disabled selected>Select target...</option>
                        <option value="__new__">+ Create new target</option>
                        {% for t in targets %}
                        <option value="{{ t.id }}">{{ t.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <input type="hidden" name="payload_type" value="callback" />

                <button type="submit" class="btn btn-sm btn-launch">Launch Sweep</button>

                <div id="sweep-error" class="text-sm hidden" style="color: #f87171;"></div>
            </form>
        </div>

    </div>{# /intel-cards #}
</div>

<style>
.intel-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 1.5rem 2rem;
    transition: border-color 0.2s ease;
}
.intel-card:hover {
    border-color: rgba(139, 92, 246, 0.35);
}
.intel-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 0.5rem;
}
.intel-card-bar {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: #a78bfa;
    opacity: 0.7;
    flex-shrink: 0;
}
.intel-card-name {
    font-family: 'Fira Code', monospace;
    font-size: 1.05rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a78bfa;
}
.intel-card-desc {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.intel-card .btn-launch {
    background: transparent;
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.4);
    font-weight: 600;
}
.intel-card .btn-launch:hover:not(:disabled) {
    background: rgba(6, 182, 212, 0.1);
    border-color: #22d3ee;
    color: #22d3ee;
}
.intel-card .btn-launch:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Target list */
.intel-target-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.intel-target-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.2fr) 3.25rem 3.25rem 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    color: #e2e8f0;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.intel-target-row:hover:not(.intel-target-row-head) {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.35);
}
.intel-target-row-head {
    background: transparent;
    border-color: transparent;
    color: #94a3b8;
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-bottom: 0.25rem;
    pointer-events: none;
}
.intel-target-col-name {
    font-weight: 500;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-target-col-type,
.intel-target-col-uri {
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.intel-target-col-badge {
    font-family: 'Fira Code', monospace;
    font-size: 0.8rem;
    color: #a78bfa;
    text-align: right;
}
.intel-target-empty {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(139, 92, 246, 0.25);
}

/* Preview table */
.import-preview-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}
.import-preview-table th {
    text-align: left;
    color: #94a3b8;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.import-preview-table td {
    padding: 0.25rem 0.5rem;
    color: #e2e8f0;
}
</style>

<script>
/* ── Import: Preview ─────────────────────────────────────────── */
async function importPreview() {
    var form = document.getElementById('form-import');
    var errEl = document.getElementById('import-error');
    var previewEl = document.getElementById('import-preview');
    var previewBody = document.getElementById('import-preview-body');
    var resultEl = document.getElementById('import-result');
    var commitBtn = document.getElementById('btn-import-commit');

    errEl.classList.add('hidden');
    previewEl.classList.add('hidden');
    resultEl.classList.add('hidden');
    commitBtn.disabled = true;

    var fileInput = form.querySelector('input[name="file"]');
    var formatSel = form.querySelector('select[name="format"]');

    if (!fileInput.files.length) {
        errEl.textContent = 'Please select a file.';
        errEl.classList.remove('hidden');
        return;
    }
    if (!formatSel.value) {
        errEl.textContent = 'Please select a format.';
        errEl.classList.remove('hidden');
        return;
    }

    var fd = new FormData();
    fd.append('file', fileInput.files[0]);
    fd.append('format', formatSel.value);

    try {
        var resp = await fetch('/api/intel/import/preview', { method: 'POST', body: fd });
        var data = await resp.json();
        if (!resp.ok) {
            errEl.textContent = data.detail || 'Preview failed';
            errEl.classList.remove('hidden');
            return;
        }

        /* Render preview table */
        var html = '<table class="import-preview-table">';
        html += '<thead><tr><th>#</th><th>Severity</th><th>Category</th><th>Title</th></tr></thead><tbody>';
        data.findings.forEach(function(f, i) {
            html += '<tr><td>' + (i + 1) + '</td>';
            html += '<td>' + escapeHtml(f.severity) + '</td>';
            html += '<td>' + escapeHtml(f.category) + '</td>';
            html += '<td>' + escapeHtml(f.title) + '</td></tr>';
        });
        html += '</tbody></table>';
        html += '<p style="margin-top: 0.75rem; color: #94a3b8; font-size: 0.85rem;">';
        html += '<strong>' + data.finding_count + '</strong> findings ready to import.';
        if (data.warning_count > 0) {
            html += ' <span style="color: #fbbf24;">' + data.warning_count + ' warning(s).</span>';
        }
        html += '</p>';

        previewBody.innerHTML = html;
        previewEl.classList.remove('hidden');
        commitBtn.disabled = false;
    } catch (err) {
        errEl.textContent = err.message;
        errEl.classList.remove('hidden');
    }
}

/* ── Import: Commit ──────────────────────────────────────────── */
async function importCommit() {
    var form = document.getElementById('form-import');
    var errEl = document.getElementById('import-error');
    var resultEl = document.getElementById('import-result');
    var resultBody = document.getElementById('import-result-body');
    var previewEl = document.getElementById('import-preview');
    var commitBtn = document.getElementById('btn-import-commit');

    errEl.classList.add('hidden');
    resultEl.classList.add('hidden');
    commitBtn.disabled = true;

    var fileInput = form.querySelector('input[name="file"]');
    var formatSel = form.querySelector('select[name="format"]');
    var targetSel = form.querySelector('select[name="target_id"]');

    /* Phase 5 — target_id is required. The __new__ sentinel must be
       resolved to a real target via the modal before Import is clicked;
       the disabled default option is not a valid submit value. */
    if (!targetSel.value || targetSel.value === '__new__') {
        errEl.textContent = 'Please select or create a target before importing.';
        errEl.classList.remove('hidden');
        commitBtn.disabled = false;
        return;
    }

    var fd = new FormData();
    fd.append('file', fileInput.files[0]);
    fd.append('format', formatSel.value);
    fd.append('target_id', targetSel.value);

    try {
        var resp = await fetch('/api/intel/import/commit', { method: 'POST', body: fd });
        var data = await resp.json();
        if (!resp.ok) {
            errEl.textContent = data.detail || 'Import failed';
            errEl.classList.remove('hidden');
            commitBtn.disabled = false;
            return;
        }

        previewEl.classList.add('hidden');
        var detailHref = '/intel/targets/' + encodeURIComponent(targetSel.value)
            + '#import-run-' + encodeURIComponent(data.run_id);
        var html = '<p style="color: #22c55e; font-weight: 600;">';
        html += 'Imported ' + data.finding_count + ' findings.</p>';
        html += '<p style="color: #94a3b8; font-size: 0.85rem; margin-top: 0.25rem;">';
        html += 'Run ID: <code style="color: #a78bfa;">' + escapeHtml(data.run_id) + '</code>';
        html += ' &mdash; <a href="' + detailHref + '" ';
        html += 'style="color: #06b6d4;">View in target</a></p>';
        if (data.warning_count > 0) {
            html += '<p style="color: #fbbf24; font-size: 0.85rem; margin-top: 0.25rem;">';
            html += data.warning_count + ' parse warning(s).</p>';
        }
        resultBody.innerHTML = html;
        resultEl.classList.remove('hidden');
    } catch (err) {
        errEl.textContent = err.message;
        errEl.classList.remove('hidden');
        commitBtn.disabled = false;
    }
}

/* ── Probe: Launch ───────────────────────────────────────────── */
var _probeInFlight = false;
async function launchProbe(e) {
    e.preventDefault();
    if (_probeInFlight) return false;

    var form = document.getElementById('form-probe');
    var errEl = document.getElementById('probe-error');
    var btn = form.querySelector('button[type="submit"]');

    errEl.classList.add('hidden');
    _probeInFlight = true;
    if (btn) btn.disabled = true;

    try {
        var fd = new FormData(form);
        var data = {};
        var apiKey = '';
        for (var [key, val] of fd.entries()) {
            if (key === 'api_key') {
                apiKey = String(val).trim();
                continue;
            }
            data[key] = val;
        }
        data.temperature = parseFloat(data.temperature) || 0.0;
        data.concurrency = parseInt(data.concurrency, 10) || 1;
        /* Phase 5 — target_id required via modal binding. __new__ must be
           resolved by the modal before submit; if it's still set, block. */
        if (data.target_id === '__new__' || !data.target_id) {
            errEl.textContent = 'Please select or create a target.';
            errEl.classList.remove('hidden');
            return false;
        }

        var headers = {'Content-Type': 'application/json'};
        if (apiKey) headers['X-API-Key'] = apiKey;
        var resp = await fetch('/api/intel/probe/launch', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data),
        });
        var result = await resp.json();
        if (resp.ok) {
            window.location.href = result.redirect;
        } else {
            errEl.textContent = result.detail || 'Probe launch failed';
            errEl.classList.remove('hidden');
        }
    } catch (err) {
        errEl.textContent = err.message;
        errEl.classList.remove('hidden');
    } finally {
        _probeInFlight = false;
        if (btn) btn.disabled = false;
    }
    return false;
}

/* ── Sweep: Launch ───────────────────────────────────────────── */
var _sweepInFlight = false;
async function launchSweep(e) {
    e.preventDefault();
    if (_sweepInFlight) return false;

    var form = document.getElementById('form-sweep');
    var errEl = document.getElementById('sweep-error');
    var btn = form.querySelector('button[type="submit"]');

    errEl.classList.add('hidden');
    _sweepInFlight = true;
    if (btn) btn.disabled = true;

    try {
        var templatesSel = form.querySelector('select[name="templates"]');
        var stylesSel = form.querySelector('select[name="styles"]');
        var templates = Array.from(templatesSel.selectedOptions).map(function(o) {
            return o.value;
        });
        var styles = Array.from(stylesSel.selectedOptions).map(function(o) {
            return o.value;
        });

        if (!templates.length) {
            errEl.textContent = 'Select at least one template.';
            errEl.classList.remove('hidden');
            return false;
        }
        if (!styles.length) {
            errEl.textContent = 'Select at least one style.';
            errEl.classList.remove('hidden');
            return false;
        }

        var apiKey = form.querySelector('input[name="api_key"]').value.trim();
        var citationFrameSel = form.querySelector('select[name="citation_frame"]');
        var data = {
            endpoint: form.querySelector('input[name="endpoint"]').value,
            model: form.querySelector('input[name="model"]').value,
            target_id: form.querySelector('select[name="target_id"]').value,
            temperature: parseFloat(form.querySelector('input[name="temperature"]').value) || 0.0,
            concurrency: parseInt(form.querySelector('input[name="concurrency"]').value, 10) || 1,
            reps: parseInt(form.querySelector('input[name="reps"]').value, 10) || 3,
            templates: templates,
            styles: styles,
            payload_type: 'callback',
            citation_frame: citationFrameSel ? citationFrameSel.value : 'template-aware',
        };
        /* Phase 5 — target_id required via modal binding. __new__ must be
           resolved by the modal before submit; if it's still set, block. */
        if (data.target_id === '__new__' || !data.target_id) {
            errEl.textContent = 'Please select or create a target.';
            errEl.classList.remove('hidden');
            return false;
        }

        var headers = {'Content-Type': 'application/json'};
        if (apiKey) headers['X-API-Key'] = apiKey;
        var resp = await fetch('/api/intel/sweep/launch', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data),
        });
        var result = await resp.json();
        if (resp.ok) {
            window.location.href = result.redirect;
        } else {
            errEl.textContent = result.detail || 'Sweep launch failed';
            errEl.classList.remove('hidden');
        }
    } catch (err) {
        errEl.textContent = err.message;
        errEl.classList.remove('hidden');
    } finally {
        _sweepInFlight = false;
        if (btn) btn.disabled = false;
    }
    return false;
}

/* ── Utility ─────────────────────────────────────────────────── */
function escapeHtml(str) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode(str || ''));
    return div.innerHTML;
}
</script>
{% endblock %}