{% extends "base.html" %}

{% block title %}Provenance - ICDEV™ Dashboard{% endblock %}

{% block content %}
<div class="container">
    <h1>Provenance Graph</h1>
    <p class="text-muted">W3C PROV-AGENT artifact lineage — tracks what produced what across agent operations (Phase 46).</p>

    <!-- ==================== Audit Chain Integrity (exa-audit-04) ====================
         Placed first: this is the tamper-evidence surface. A broken link must be the
         first thing on the page, not something found by scrolling.

         The four states are distinguished by border STYLE and explicit label text as
         well as colour — a compliance reviewer reading this in greyscale, or with a
         colour vision deficiency, still has to be able to tell "broken" from
         "pre-cutover". That distinction is the entire point of the panel: conflating
         them is how a real tamper event gets dismissed as legacy data. -->
    <style>
        /* A broken row is rendered on a pale red background so it is unmissable,
           but the dark theme's inherited light text made those rows the LEAST
           readable on the page — the opposite of the intent. Pin the foreground
           for the row and everything nested in it. */
        #cs-links-body tr[data-state="broken"],
        #cs-links-body tr[data-state="broken"] td,
        #cs-links-body tr[data-state="broken"] code {
            color: #4a0d0d !important;
            font-weight: 600;
        }
    </style>
    <h2 style="margin-top:2rem;">Audit Chain Integrity</h2>
    <p class="text-muted">
        Whole-of-table sweep of the <code>audit_trail</code> hash chain — every row is
        recomputed and every link re-checked. Run it yourself with
        <code>python tools/audit/chain_sweep.py --json</code>.
    </p>

    <div id="cs-banner" role="status" style="display:none;padding:0.7rem 1rem;border-radius:6px;margin-bottom:1rem;font-weight:700;"></div>

    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1rem 0 1.5rem;">
        <div class="cs-state cs-state-verified" data-state="verified"
             style="padding:1rem;border:2px solid #2e7d32;border-left-width:10px;border-radius:8px;background:#f1f8f2;">
            <div id="cs-verified" style="font-size:2rem;font-weight:bold;color:#2e7d32;">--</div>
            <div style="font-weight:700;color:#2e7d32;letter-spacing:0.02em;">&#10003; VERIFIED</div>
            <div style="color:#555;font-size:0.82rem;margin-top:0.25rem;">Hash and link both recompute.</div>
        </div>
        <div class="cs-state cs-state-pre-cutover" data-state="pre_cutover"
             style="padding:1rem;border:2px dashed #757575;border-left-width:10px;border-radius:8px;background:#fafafa;">
            <div id="cs-pre-cutover" style="font-size:2rem;font-weight:bold;color:#555;">--</div>
            <div style="font-weight:700;color:#555;letter-spacing:0.02em;">&#8212; PRE-CUTOVER</div>
            <div style="color:#555;font-size:0.82rem;margin-top:0.25rem;">Written before the chain writer existed. Honestly <strong>unverifiable</strong> &mdash; not tampered.</div>
        </div>
        <div class="cs-state cs-state-unchained" data-state="unchained"
             style="padding:1rem;border:2px dotted #ef6c00;border-left-width:10px;border-radius:8px;background:#fff8ef;">
            <div id="cs-unchained" style="font-size:2rem;font-weight:bold;color:#ef6c00;">--</div>
            <div style="font-weight:700;color:#ef6c00;letter-spacing:0.02em;">&#9888; UNCHAINED</div>
            <div style="color:#555;font-size:0.82rem;margin-top:0.25rem;">Written after cutover by a call site that bypasses the writer. A known gap, not tampering.</div>
        </div>
        <div class="cs-state cs-state-broken" data-state="broken"
             style="padding:1rem;border:4px solid #b71c1c;border-left-width:12px;border-radius:8px;background:#ffebee;">
            <div id="cs-broken" style="font-size:2rem;font-weight:bold;color:#b71c1c;">--</div>
            <div style="font-weight:800;color:#b71c1c;letter-spacing:0.03em;">&#10007; BROKEN</div>
            <div style="color:#555;font-size:0.82rem;margin-top:0.25rem;">Chained, but the digest or the link does not hold. <strong>Investigate.</strong></div>
        </div>
    </div>

    <p id="cs-cutover-note" class="text-muted" style="font-size:0.85rem;"></p>

    <h3>Chain Links</h3>
    <div class="table-container">
        <table id="cs-links-table" aria-label="Audit chain links">
            <thead>
                <tr>
                    <th>Row ID</th>
                    <th>Event</th>
                    <th>Previous Hash</th>
                    <th>Row Hash</th>
                    <th>Signature</th>
                    <th>State</th>
                </tr>
            </thead>
            <tbody id="cs-links-body">
                <tr><td colspan="6" style="text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <hr style="margin:2.5rem 0;">

    <!-- Stat grid -->
    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="stat-entities" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Entities</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="stat-activities" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Activities</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div class="stat-value" id="stat-relations" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Relations</div>
        </div>
    </div>

    <!-- Entity table -->
    <h2>Entities</h2>
    <div class="table-container">
        <table id="entities-table" aria-label="Provenance entities">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Label</th>
                    <th>Content Hash</th>
                    <th>Agent</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="entities-body">
                <tr><td colspan="6" style="text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Activity timeline -->
    <h2>Activities</h2>
    <div class="table-container">
        <table id="activities-table" aria-label="Provenance activities">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Label</th>
                    <th>Start</th>
                    <th>End</th>
                    <th>Agent</th>
                </tr>
            </thead>
            <tbody id="activities-body">
                <tr><td colspan="6" style="text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Lineage query -->
    <h2>Lineage Query</h2>
    <div style="margin:1rem 0;display:flex;gap:0.5rem;align-items:center;">
        <label for="lineage-entity">Entity ID:</label>
        <input type="text" id="lineage-entity" placeholder="entity UUID" style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;width:300px;">
        <select id="lineage-direction" style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;">
            <option value="backward">Backward (what produced this?)</option>
            <option value="forward">Forward (what did this produce?)</option>
        </select>
        <button onclick="queryLineage()" style="padding:0.4rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;">Query</button>
    </div>
    <div id="lineage-result" style="margin-top:1rem;"></div>

    <!-- PROV-JSON export -->
    <div style="margin-top:2rem;">
        <button onclick="exportProvJSON()" style="padding:0.5rem 1rem;background:#388e3c;color:#fff;border:none;border-radius:4px;cursor:pointer;">Export PROV-JSON</button>
    </div>

    <!-- GovChain Status Panel -->
    <hr style="margin:2.5rem 0;">
    <h2>GovChain Status</h2>
    <p class="text-muted">Hyperledger Fabric anchor statistics — how many citations are anchored on-chain vs. queued for deferred submission.</p>

    <div id="govchain-status-banner" style="display:none;padding:0.6rem 1rem;border-radius:6px;margin-bottom:1rem;font-weight:600;"></div>

    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin:1rem 0 1.5rem;">
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="gc-anchored" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Anchored</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="gc-unanchored" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Unanchored</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="gc-pct" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Anchor %</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="gc-pending" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Pending Queue</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="gc-fabric" style="font-size:2rem;font-weight:bold;">--</div>
            <div style="color:#666;">Fabric Status</div>
        </div>
    </div>

    <h3>Recent Blockchain TX IDs</h3>
    <div class="table-container">
        <table id="gc-tx-table" aria-label="Recent blockchain transactions">
            <thead>
                <tr>
                    <th>Registry ID</th>
                    <th>TX ID</th>
                    <th>Citation Type</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="gc-tx-body">
                <tr><td colspan="5" style="text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- TX ID lookup -->
    <h3 style="margin-top:1.5rem;">Verify Registry Entry</h3>
    <div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;">
        <input type="text" id="gc-registry-id" placeholder="scr-..." style="padding:0.4rem;border:1px solid #ccc;border-radius:4px;width:320px;">
        <button onclick="verifyRegistryEntry()" style="padding:0.4rem 1rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;">Verify</button>
    </div>
    <div id="gc-verify-result" style="font-family:monospace;font-size:0.85rem;background:#f5f5f5;padding:0.75rem;border-radius:4px;display:none;white-space:pre-wrap;"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    // Load entities
    fetch('/api/provenance/entities?limit=50')
        .then(r => r.json())
        .then(data => {
            document.getElementById('stat-entities').textContent = data.total || 0;
            const tbody = document.getElementById('entities-body');
            if (!data.entities || data.entities.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#999;">No provenance entities yet.</td></tr>';
                return;
            }
            tbody.innerHTML = data.entities.map(e => `
                <tr>
                    <td><code title="${e.id}">${(e.id || '').substring(0, 12)}...</code></td>
                    <td><span class="badge">${e.entity_type}</span></td>
                    <td>${e.label || ''}</td>
                    <td><code>${(e.content_hash || '').substring(0, 16)}</code></td>
                    <td>${e.agent_id || ''}</td>
                    <td>${e.created_at || ''}</td>
                </tr>
            `).join('');
        }).catch(() => {});

    // Load activities
    fetch('/api/provenance/activities?limit=50')
        .then(r => r.json())
        .then(data => {
            document.getElementById('stat-activities').textContent = data.total || 0;
            const tbody = document.getElementById('activities-body');
            if (!data.activities || data.activities.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#999;">No provenance activities yet.</td></tr>';
                return;
            }
            tbody.innerHTML = data.activities.map(a => `
                <tr>
                    <td><code title="${a.id}">${(a.id || '').substring(0, 12)}...</code></td>
                    <td><span class="badge">${a.activity_type}</span></td>
                    <td>${a.label || ''}</td>
                    <td>${a.start_time || ''}</td>
                    <td>${a.end_time || ''}</td>
                    <td>${a.agent_id || ''}</td>
                </tr>
            `).join('');
        }).catch(() => {});

    // Load relation count
    fetch('/api/provenance/relations?limit=1')
        .then(r => r.json())
        .then(data => {
            document.getElementById('stat-relations').textContent = (data.relations || []).length;
        }).catch(() => {});

    // Lineage query
    window.queryLineage = function() {
        const entityId = document.getElementById('lineage-entity').value.trim();
        const direction = document.getElementById('lineage-direction').value;
        if (!entityId) return;

        fetch(`/api/provenance/lineage/${entityId}?direction=${direction}`)
            .then(r => r.json())
            .then(data => {
                const div = document.getElementById('lineage-result');
                if (data.error) {
                    div.innerHTML = `<p style="color:red;">${data.error}</p>`;
                    return;
                }
                if (!data.lineage || data.lineage.length === 0) {
                    div.innerHTML = '<p>No lineage found for this entity.</p>';
                    return;
                }
                let html = '<table class="table-container"><thead><tr><th>Relation</th><th>Subject</th><th>Object</th></tr></thead><tbody>';
                data.lineage.forEach(r => {
                    html += `<tr><td>${r.relation_type}</td><td><code>${(r.subject_id||'').substring(0,12)}</code></td><td><code>${(r.object_id||'').substring(0,12)}</code></td></tr>`;
                });
                html += '</tbody></table>';
                div.innerHTML = html;
            }).catch(() => {});
    };

    // PROV-JSON export
    window.exportProvJSON = function() {
        fetch('/api/provenance/export')
            .then(r => r.json())
            .then(data => {
                const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = 'prov-export.json';
                a.click();
            }).catch(() => {});
    };

    // ---- Audit chain integrity sweep (exa-audit-04) ----
    // Badge styling per state. Each carries a distinct glyph and word as well as
    // a colour, so the states stay distinguishable in greyscale or print.
    var CS_STATES = {
        verified:    {label: '✓ VERIFIED',  fg: '#2e7d32', bg: '#e8f5e9', border: '1px solid #2e7d32'},
        broken:      {label: '✗ BROKEN',    fg: '#b71c1c', bg: '#ffcdd2', border: '3px solid #b71c1c'},
        pre_cutover: {label: '— PRE-CUTOVER', fg: '#555',  bg: '#f5f5f5', border: '1px dashed #757575'},
        unchained:   {label: '⚠ UNCHAINED', fg: '#ef6c00', bg: '#fff3e0', border: '1px dotted #ef6c00'}
    };

    function csBadge(state, reason) {
        var s = CS_STATES[state] || CS_STATES.pre_cutover;
        var title = reason ? ' title="' + reason + '"' : '';
        return '<span' + title + ' style="display:inline-block;padding:0.15rem 0.5rem;border-radius:4px;'
             + 'font-weight:700;font-size:0.78rem;color:' + s.fg + ';background:' + s.bg
             + ';border:' + s.border + ';">' + s.label + (reason ? ' (' + reason + ')' : '') + '</span>';
    }

    function csShort(h) {
        if (!h) return '<span style="color:#999;">none</span>';
        // A run that restarts at genesis is expected on a sparse chain, so it is
        // named rather than shown as 64 zeros the reader has to decode.
        if (/^0{64}$/.test(h)) return '<span style="color:#777;">GENESIS</span>';
        return '<code title="' + h + '">' + h.substring(0, 16) + '…</code>';
    }

    function loadChainHealth() {
        fetch('/api/govchain-provenance/chain-health')
            .then(r => r.json())
            .then(data => {
                var c = data.counts || {};
                document.getElementById('cs-verified').textContent = c.verified ?? 0;
                document.getElementById('cs-pre-cutover').textContent = c.pre_cutover ?? 0;
                document.getElementById('cs-unchained').textContent = c.unchained ?? 0;
                document.getElementById('cs-broken').textContent = c.broken ?? 0;

                var banner = document.getElementById('cs-banner');
                banner.style.display = 'block';
                if (data.chain_health === 'broken') {
                    banner.style.background = '#b71c1c';
                    banner.style.color = '#fff';
                    banner.textContent = 'CHAIN INTEGRITY FAILURE — ' + (c.broken || 0)
                        + ' chained row(s) no longer match their recorded hash or link. This is a tamper signal, not legacy data.';
                } else if (data.chain_health === 'unavailable') {
                    banner.style.background = '#fff3e0';
                    banner.style.color = '#e65100';
                    banner.textContent = 'Chain could not be swept: ' + (data.error || 'unknown error')
                        + ' — this is not a clean bill of health.';
                } else if (data.chain_health === 'no_chain') {
                    banner.style.background = '#f5f5f5';
                    banner.style.color = '#555';
                    banner.textContent = 'No chained rows yet — nothing to verify. Every row predates the chain writer.';
                } else {
                    banner.style.background = '#e8f5e9';
                    banner.style.color = '#1b5e20';
                    banner.textContent = 'Chain verified — all ' + (c.verified || 0)
                        + ' chained link(s) recompute. ' + (c.pre_cutover || 0)
                        + ' row(s) predate the chain and are unverifiable by design.';
                }

                // Say where the cutover boundary came from. A derived boundary is a
                // best guess that would shift if the first chained row were removed,
                // so it must not be presented with the same confidence as the marker.
                var cut = data.cutover || {};
                var note = document.getElementById('cs-cutover-note');
                if (cut.source === 'marker') {
                    note.textContent = 'Cutover recorded at audit_trail id ' + cut.boundary_id
                        + ' (authoritative, from audit_chain_genesis). Hash: ' + (data.hash_algorithm || 'sha256') + '.';
                } else if (cut.source === 'derived') {
                    note.innerHTML = '<strong>Cutover derived, not recorded:</strong> boundary inferred as id '
                        + cut.boundary_id + ' because audit_chain_genesis is empty or absent '
                        + '(run migration 20260812041301). The split between pre-cutover and unchained '
                        + 'is a best estimate until the marker exists.';
                } else {
                    note.textContent = 'No cutover boundary — nothing has been chained in this database yet.';
                }

                var sig = data.signatures || {};
                if (sig.unsigned) {
                    note.innerHTML += '<br>' + sig.signed + ' link(s) signed, ' + sig.unsigned
                        + ' unsigned (no signing key configured). An unsigned link is still hash-verified — '
                        + 'signatures are reported separately and never counted as broken.';
                }

                var tbody = document.getElementById('cs-links-body');
                var links = data.links || [];
                if (links.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;color:#999;">'
                        + 'No chained links yet — every audit row predates the chain writer.</td></tr>';
                    return;
                }
                tbody.innerHTML = links.slice().reverse().map(function(l) {
                    // Set the foreground explicitly, not just the background: the
                    // dark theme's inherited light text on a pale red row left the
                    // BROKEN rows the least readable ones on the page.
                    var rowStyle = l.status === 'broken'
                        ? ' style="background:#ffebee;color:#4a0d0d;font-weight:600;"'
                        : '';
                    return '<tr' + rowStyle + ' data-state="' + l.status + '">'
                        + '<td><code>' + l.id + '</code></td>'
                        + '<td>' + (l.event_type || '') + '</td>'
                        + '<td>' + csShort(l.previous_hash) + '</td>'
                        + '<td>' + csShort(l.hash) + '</td>'
                        + '<td>' + (l.signature_algorithm === 'none'
                            ? '<span style="color:#777;">unsigned</span>'
                            : '<span style="color:#2e7d32;">' + l.signature_algorithm + '</span>') + '</td>'
                        + '<td>' + csBadge(l.status, l.reason) + '</td>'
                        + '</tr>';
                }).join('');
            })
            .catch(e => {
                // Never leave the panel showing zeros on failure — zeros read as
                // "nothing is broken", which is a claim we have not earned.
                var banner = document.getElementById('cs-banner');
                banner.style.display = 'block';
                banner.style.background = '#fff3e0';
                banner.style.color = '#e65100';
                banner.textContent = 'Chain sweep request failed: ' + e + ' — this is not a clean bill of health.';
                document.getElementById('cs-links-body').innerHTML =
                    '<tr><td colspan="6" style="text-align:center;color:#c62828;">Failed to load chain health.</td></tr>';
            });
    }

    loadChainHealth();

    // GovChain status
    function loadGovchainStatus() {
        fetch('/api/govchain-provenance/blockchain-status')
            .then(r => r.json())
            .then(data => {
                document.getElementById('gc-anchored').textContent = data.total_anchored ?? '--';
                document.getElementById('gc-unanchored').textContent = data.total_unanchored ?? '--';
                document.getElementById('gc-pct').textContent = (data.anchor_pct != null) ? data.anchor_pct + '%' : '--';

                const pending = data.pending_queue_depth ?? 0;
                const pendingEl = document.getElementById('gc-pending');
                pendingEl.textContent = pending;
                pendingEl.style.color = pending > 100 ? '#c62828' : pending > 0 ? '#f57c00' : '#2e7d32';

                const fabricEl = document.getElementById('gc-fabric');
                if (data.fabric_enabled) {
                    fabricEl.textContent = 'Connected';
                    fabricEl.style.color = '#2e7d32';
                } else if (data.air_gapped) {
                    fabricEl.textContent = 'Air-Gap';
                    fabricEl.style.color = '#f57c00';
                } else {
                    fabricEl.textContent = 'Disabled';
                    fabricEl.style.color = '#9e9e9e';
                }

                // Banner
                const banner = document.getElementById('govchain-status-banner');
                if (pending > 500) {
                    banner.style.display = 'block';
                    banner.style.background = '#ffebee';
                    banner.style.color = '#c62828';
                    banner.textContent = `Warning: ${pending} operations in pending queue — reconnect Fabric peer to flush.`;
                } else {
                    banner.style.display = 'none';
                }

                // TX table
                const tbody = document.getElementById('gc-tx-body');
                const txIds = data.recent_tx_ids || [];
                if (txIds.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#999;">No anchored transactions yet.</td></tr>';
                } else {
                    tbody.innerHTML = txIds.map(t => `
                        <tr>
                            <td><code title="${t.registry_id}">${(t.registry_id || '').substring(0, 20)}...</code></td>
                            <td><code title="${t.tx_id}">${(t.tx_id || '').substring(0, 20)}...</code></td>
                            <td><span class="badge">${t.citation_type}</span></td>
                            <td>${t.created_at || ''}</td>
                            <td><button onclick="document.getElementById('gc-registry-id').value='${t.registry_id}';verifyRegistryEntry();" style="padding:0.2rem 0.5rem;font-size:0.8rem;background:#e3f2fd;border:1px solid #1976d2;border-radius:3px;cursor:pointer;">Verify</button></td>
                        </tr>
                    `).join('');
                }
            }).catch(() => {
                document.getElementById('gc-fabric').textContent = 'Error';
                document.getElementById('gc-tx-body').innerHTML = '<tr><td colspan="5" style="text-align:center;color:#c62828;">Failed to load GovChain status.</td></tr>';
            });
    }

    loadGovchainStatus();

    window.verifyRegistryEntry = function() {
        const regId = document.getElementById('gc-registry-id').value.trim();
        if (!regId) return;

        const resultDiv = document.getElementById('gc-verify-result');
        resultDiv.style.display = 'block';
        resultDiv.textContent = 'Verifying...';

        fetch('/api/govchain-provenance/verify', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({registry_id: regId})
        })
        .then(r => r.json())
        .then(data => {
            resultDiv.textContent = JSON.stringify(data, null, 2);
            resultDiv.style.color = data.ok ? '#2e7d32' : '#c62828';
        })
        .catch(e => {
            resultDiv.textContent = 'Error: ' + e;
            resultDiv.style.color = '#c62828';
        });
    };
})();
</script>
{% endblock %}