{% extends "base.html" %}
{% block title %}Unified Compliance Posture - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="container">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" style="margin-bottom:0.5rem;">
        <span><a href="/" style="color:#1976d2;text-decoration:none;">Home</a></span>
        <span style="color:#999;"> &gt; </span>
        <span style="color:#333;">Compliance</span>
    </nav>

    <h1>Unified Compliance Posture</h1>
    <p class="text-muted">Aggregated posture across Security Design Canvas (SDC), Network Design Canvas (NDC), and Pipeline Design Canvas (PDC) — with NIST 800-53 Rev 5 control family heatmap.</p>

    <!-- Summary Banner -->
    <div id="compliance-summary" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0;">
        <div class="card" style="padding:1.2rem;text-align:center;">
            <div style="font-size:2rem;font-weight:bold;color:#1976d2;" id="ctrl-implemented">--</div>
            <div style="font-size:0.82rem;color:#666;">Controls Implemented</div>
        </div>
        <div class="card" style="padding:1.2rem;text-align:center;">
            <div style="font-size:2rem;font-weight:bold;color:#f57c00;" id="poam-open">--</div>
            <div style="font-size:0.82rem;color:#666;">Open POAMs</div>
        </div>
        <div class="card" style="padding:1.2rem;text-align:center;">
            <div style="font-size:2rem;font-weight:bold;color:#d32f2f;" id="stig-cat1">--</div>
            <div style="font-size:0.82rem;color:#666;">CAT I Findings</div>
        </div>
        <div class="card" style="padding:1.2rem;text-align:center;">
            <div style="font-size:2rem;font-weight:bold;color:#388e3c;" id="ato-status">--</div>
            <div style="font-size:0.82rem;color:#666;">ATO Status</div>
        </div>
    </div>

    <!-- ====== Design Canvas Posture ====== -->
    <h2 style="margin-top:2rem;">Design Canvas Posture</h2>
    <p style="font-size:0.88rem;color:#666;margin-bottom:1rem;">Real-time compliance posture from each design canvas module.</p>
    <div id="canvas-posture" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;margin-bottom:2rem;">

        <!-- SDC Card -->
        <div class="card" style="padding:1.4rem;position:relative;" id="sdc-card">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;">
                <div>
                    <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#555;margin-bottom:0.3rem;">Security Design Canvas</div>
                    <div style="font-size:0.82rem;color:#888;" id="sdc-designs">-- designs</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:2.4rem;font-weight:bold;line-height:1;" id="sdc-grade">--</div>
                    <div style="font-size:0.75rem;color:#888;">Posture Grade</div>
                </div>
            </div>
            <div style="margin-top:1rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;text-align:center;">
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;" id="sdc-risk">--</div>
                    <div style="font-size:0.72rem;color:#888;">Risk Score</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#d32f2f;" id="sdc-threats">--</div>
                    <div style="font-size:0.72rem;color:#888;">Open Threats</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#388e3c;" id="sdc-ctrl">--</div>
                    <div style="font-size:0.72rem;color:#888;">Controls Impl.</div>
                </div>
            </div>
            <div style="margin-top:1rem;">
                <div style="display:flex;justify-content:space-between;font-size:0.78rem;color:#666;margin-bottom:0.25rem;">
                    <span>NIST 800-53 Coverage</span>
                    <span id="sdc-nist-pct">--%</span>
                </div>
                <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                    <div id="sdc-nist-bar" style="height:100%;background:#1976d2;width:0%;transition:width 0.6s ease;"></div>
                </div>
            </div>
            <div style="margin-top:0.75rem;">
                <a href="/security" style="font-size:0.8rem;color:#1976d2;text-decoration:none;">Open SDC &rarr;</a>
            </div>
            <div id="sdc-unavail" style="display:none;position:absolute;inset:0;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;border-radius:6px;">
                <span style="font-size:0.85rem;color:#999;">No designs yet — <a href="/security" style="color:#1976d2;">create one</a></span>
            </div>
        </div>

        <!-- NDC Card -->
        <div class="card" style="padding:1.4rem;position:relative;" id="ndc-card">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;">
                <div>
                    <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#555;margin-bottom:0.3rem;">Network Design Canvas</div>
                    <div style="font-size:0.82rem;color:#888;" id="ndc-topos">-- topologies</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:2.4rem;font-weight:bold;line-height:1;" id="ndc-pass-rate">--%</div>
                    <div style="font-size:0.75rem;color:#888;">Remediation Rate</div>
                </div>
            </div>
            <div style="margin-top:1rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;text-align:center;">
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#d32f2f;" id="ndc-cat1">--</div>
                    <div style="font-size:0.72rem;color:#888;">CAT I Open</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#f57c00;" id="ndc-cat2">--</div>
                    <div style="font-size:0.72rem;color:#888;">CAT II Open</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#fbc02d;" id="ndc-cat3">--</div>
                    <div style="font-size:0.72rem;color:#888;">CAT III Open</div>
                </div>
            </div>
            <div style="margin-top:1rem;">
                <div style="display:flex;justify-content:space-between;font-size:0.78rem;color:#666;margin-bottom:0.25rem;">
                    <span>Findings Remediated</span>
                    <span id="ndc-total-findings">-- total</span>
                </div>
                <div style="background:#e0e0e0;border-radius:4px;height:8px;overflow:hidden;">
                    <div id="ndc-pass-bar" style="height:100%;background:#388e3c;width:0%;transition:width 0.6s ease;"></div>
                </div>
            </div>
            <div style="margin-top:0.75rem;">
                <a href="/network" style="font-size:0.8rem;color:#1976d2;text-decoration:none;">Open NDC &rarr;</a>
            </div>
            <div id="ndc-unavail" style="display:none;position:absolute;inset:0;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;border-radius:6px;">
                <span style="font-size:0.85rem;color:#999;">No topologies yet — <a href="/network" style="color:#1976d2;">create one</a></span>
            </div>
        </div>

        <!-- PDC Card -->
        <div class="card" style="padding:1.4rem;position:relative;" id="pdc-card">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;">
                <div>
                    <div style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#555;margin-bottom:0.3rem;">Pipeline Design Canvas</div>
                    <div style="font-size:0.82rem;color:#888;" id="pdc-pipes">-- pipelines</div>
                </div>
                <div style="text-align:right;">
                    <div style="font-size:2.4rem;font-weight:bold;line-height:1;" id="pdc-slsa">--</div>
                    <div style="font-size:0.75rem;color:#888;">SLSA Level</div>
                </div>
            </div>
            <div style="margin-top:1rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;text-align:center;">
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#1976d2;" id="pdc-ssdf">--%</div>
                    <div style="font-size:0.72rem;color:#888;">SSDF</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#7b1fa2;" id="pdc-owasp">--%</div>
                    <div style="font-size:0.72rem;color:#888;">OWASP</div>
                </div>
                <div>
                    <div style="font-size:1.3rem;font-weight:bold;color:#d32f2f;" id="pdc-findings">--</div>
                    <div style="font-size:0.72rem;color:#888;">Open Findings</div>
                </div>
            </div>
            <div style="margin-top:1rem;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;">
                <div id="pdc-slsa-bar" style="height:100%;background:#7b1fa2;width:0%;transition:width 0.6s ease;"></div>
            </div>
            <div style="margin-top:0.4rem;display:flex;justify-content:space-between;font-size:0.72rem;color:#888;">
                <span>SLSA L0</span><span>L1</span><span>L2</span><span>L3</span><span>L4</span>
            </div>
            <div style="margin-top:0.5rem;">
                <a href="/devops" style="font-size:0.8rem;color:#1976d2;text-decoration:none;">Open PDC &rarr;</a>
            </div>
            <div id="pdc-unavail" style="display:none;position:absolute;inset:0;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;border-radius:6px;">
                <span style="font-size:0.85rem;color:#999;">No pipelines yet — <a href="/devops" style="color:#1976d2;">create one</a></span>
            </div>
        </div>

    </div>

    <!-- ====== NIST 800-53 Heatmap ====== -->
    <h2 style="margin-top:2rem;">NIST 800-53 Rev 5 Control Family Heatmap</h2>
    <p style="font-size:0.88rem;color:#666;margin-bottom:0.75rem;">
        Aggregated implementation coverage per control family across SDC and project controls.
        <span style="display:inline-flex;gap:1rem;margin-left:1rem;font-size:0.78rem;">
            <span><span style="display:inline-block;width:14px;height:14px;background:#388e3c;border-radius:2px;vertical-align:middle;"></span> &ge;80%</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#f9a825;border-radius:2px;vertical-align:middle;"></span> 50–79%</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#f57c00;border-radius:2px;vertical-align:middle;"></span> 20–49%</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#d32f2f;border-radius:2px;vertical-align:middle;"></span> &lt;20%</span>
            <span><span style="display:inline-block;width:14px;height:14px;background:#e0e0e0;border-radius:2px;vertical-align:middle;"></span> No data</span>
        </span>
    </p>
    <div id="nist-heatmap" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;margin-bottom:2rem;">
        <!-- populated by JS -->
        <div style="text-align:center;padding:1rem;color:#999;font-size:0.85rem;" id="heatmap-loading">Loading heatmap…</div>
    </div>

    <!-- ====== Compliance Posture Table ====== -->
    <h2>Framework Coverage</h2>
    <div id="posture-table-wrap" style="margin:1rem 0 2rem;">
        <table class="data-table" style="width:100%;">
            <thead>
                <tr><th>Framework</th><th>Controls</th><th>Implemented</th><th>Coverage</th><th>Status</th></tr>
            </thead>
            <tbody id="posture-body">
                <tr><td colspan="5" style="text-align:center;color:#999;">Loading...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- ====== Evidence Chain ====== -->
    <h2 style="margin-top:2rem;">Continuous Compliance Evidence Chain</h2>
    <p style="font-size:0.88rem;color:#666;margin-bottom:0.75rem;">
        Chronological audit trail aggregating PDC, NDC, and SDC events mapped to NIST 800-53 OSCAL controls (7-day window).
    </p>
    <div id="chain-banner" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.8rem;margin-bottom:1.2rem;">
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.8rem;font-weight:bold;color:#1976d2;" id="chain-total">--</div>
            <div style="font-size:0.78rem;color:#666;">Total Events</div>
        </div>
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.8rem;font-weight:bold;color:#7b1fa2;" id="chain-pdc">--</div>
            <div style="font-size:0.78rem;color:#666;">PDC Events</div>
        </div>
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.8rem;font-weight:bold;color:#00796b;" id="chain-ndc">--</div>
            <div style="font-size:0.78rem;color:#666;">NDC Events</div>
        </div>
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.8rem;font-weight:bold;color:#f57c00;" id="chain-sdc">--</div>
            <div style="font-size:0.78rem;color:#666;">SDC Events</div>
        </div>
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.8rem;font-weight:bold;color:#388e3c;" id="chain-controls">--</div>
            <div style="font-size:0.78rem;color:#666;">Controls Covered</div>
        </div>
        <div class="card" style="padding:1rem;text-align:center;">
            <div style="font-size:1.4rem;font-weight:bold;" id="chain-gate">--</div>
            <div style="font-size:0.78rem;color:#666;">Gate Status</div>
        </div>
    </div>
    <!-- Recent events mini-timeline -->
    <div id="chain-timeline" style="margin-bottom:2rem;">
        <div style="font-size:0.82rem;font-weight:600;color:#555;margin-bottom:0.5rem;">Recent Evidence Events</div>
        <div id="chain-events" style="display:flex;flex-direction:column;gap:0.35rem;">
            <div style="color:#999;font-size:0.82rem;">Loading evidence chain…</div>
        </div>
    </div>

    <!-- ====== Compliance Modules Grid ====== -->
    <h2>Compliance Modules</h2>
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0 2rem;">
        <a href="/oscal" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">OSCAL</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Machine-readable compliance artifacts — SSP, SAP, SAR, POA&amp;M</p>
        </a>
        <a href="/cato" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">Continuous ATO</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Real-time authorization monitoring and evidence collection</p>
        </a>
        <a href="/compliance-debt" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">Compliance Debt</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Track and burn down POAM, control, and STIG debt</p>
        </a>
        <a href="/ato-package" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">ATO Package Builder</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Assemble authorization packages for FedRAMP / DoD</p>
        </a>
        <a href="/sbd" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">Secure by Design</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Architecture-level security compliance assessment</p>
        </a>
        <a href="/control-inheritance" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">Control Inheritance</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Map inherited controls from cloud providers and shared services</p>
        </a>
        <a href="/mosa" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">MOSA</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Modular Open Systems Approach compliance assessment</p>
        </a>
        <a href="/stig-manager" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">STIG Manager</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Import, track, and assess DISA STIG benchmark findings</p>
        </a>
        <a href="/prod-audit" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">Production Audit</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">Audit trail analysis and evidence review</p>
        </a>
        <a href="/ai-transparency" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">AI Transparency</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">AI model cards, decision logs, and explainability</p>
        </a>
        <a href="/ai-accountability" class="card" style="padding:1.2rem;text-decoration:none;color:inherit;">
            <h3 style="margin:0 0 0.4rem;font-size:1rem;">AI Accountability</h3>
            <p style="margin:0;font-size:0.85rem;color:#666;">AI governance, bias tracking, and accountability framework</p>
        </a>
    </div>
</div>

<script defer>
document.addEventListener('DOMContentLoaded', function () {

    // ── Existing summary banner ──────────────────────────────────────────────
    fetch('/api/compliance/posture').then(r => r.json()).then(function (data) {
        if (data.controls_implemented !== undefined)
            document.getElementById('ctrl-implemented').textContent = data.controls_implemented;
        if (data.open_poams !== undefined)
            document.getElementById('poam-open').textContent = data.open_poams;
        if (data.cat1_findings !== undefined)
            document.getElementById('stig-cat1').textContent = data.cat1_findings;
        if (data.ato_status !== undefined)
            document.getElementById('ato-status').textContent = data.ato_status;
        if (data.frameworks && data.frameworks.length) {
            var tbody = document.getElementById('posture-body');
            tbody.innerHTML = '';
            data.frameworks.forEach(function (fw) {
                var pct = fw.total > 0 ? Math.round(fw.implemented / fw.total * 100) : 0;
                var color = pct >= 80 ? '#388e3c' : pct >= 50 ? '#f57c00' : '#d32f2f';
                tbody.innerHTML += '<tr><td>' + fw.name + '</td><td>' + fw.total +
                    '</td><td>' + fw.implemented + '</td><td><span style="color:' + color +
                    ';font-weight:bold;">' + pct + '%</span></td><td>' + (fw.status || '--') + '</td></tr>';
            });
        } else {
            document.getElementById('posture-body').innerHTML =
                '<tr><td colspan="5" style="text-align:center;color:#999;">No compliance data available</td></tr>';
        }
    }).catch(function () {
        document.getElementById('posture-body').innerHTML =
            '<tr><td colspan="5" style="text-align:center;color:#999;">No compliance data available</td></tr>';
    });

    // ── Evidence Chain ────────────────────────────────────────────────────────
    fetch('/api/compliance/evidence-chain').then(r => r.json()).then(function (c) {
        if (c.total_events !== undefined)
            document.getElementById('chain-total').textContent = c.total_events;
        if (c.sources) {
            document.getElementById('chain-pdc').textContent = (c.sources.pdc || {}).events || 0;
            document.getElementById('chain-ndc').textContent = (c.sources.ndc || {}).events || 0;
            document.getElementById('chain-sdc').textContent = (c.sources.sdc || {}).events || 0;
        }
        if (c.coverage && c.coverage.control_count !== undefined)
            document.getElementById('chain-controls').textContent = c.coverage.control_count;
        if (c.gate) {
            var gEl = document.getElementById('chain-gate');
            gEl.textContent = c.gate.pass ? 'PASS' : 'FAIL';
            gEl.style.color = c.gate.pass ? '#388e3c' : '#d32f2f';
        }
        if (c.recent_events && c.recent_events.length) {
            var evContainer = document.getElementById('chain-events');
            evContainer.innerHTML = '';
            var srcColors = { pdc: '#7b1fa2', ndc: '#00796b', sdc: '#f57c00', icdev: '#1976d2' };
            c.recent_events.slice().reverse().forEach(function (ev) {
                var col = srcColors[ev.source] || '#555';
                var ts = (ev.event_ts || '').substring(0, 16).replace('T', ' ');
                var fams = (ev.oscal_controls || []).slice(0, 3).join(', ');
                var row = document.createElement('div');
                row.style.cssText = 'display:flex;align-items:baseline;gap:0.6rem;font-size:0.78rem;padding:0.25rem 0.4rem;border-left:3px solid ' + col + ';background:#fafafa;border-radius:0 3px 3px 0;';
                row.innerHTML = '<span style="color:#aaa;white-space:nowrap;">' + ts + '</span>'
                    + '<span style="font-weight:600;color:' + col + ';text-transform:uppercase;font-size:0.68rem;">' + (ev.source || '') + '</span>'
                    + '<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + (ev.action || ev.event_type || '') + '</span>'
                    + '<span style="color:#999;font-size:0.68rem;white-space:nowrap;">' + fams + '</span>';
                evContainer.appendChild(row);
            });
        } else {
            document.getElementById('chain-events').innerHTML = '<div style="color:#999;font-size:0.82rem;">No evidence events in the last 7 days.</div>';
        }
    }).catch(function () {
        document.getElementById('chain-events').innerHTML = '<div style="color:#999;font-size:0.82rem;">Evidence chain data unavailable.</div>';
    });

    // ── Unified posture (canvas cards + heatmap) ─────────────────────────────
    fetch('/api/compliance/unified-posture').then(r => r.json()).then(function (d) {
        populateSDC(d.sdc);
        populateNDC(d.ndc);
        populatePDC(d.pdc);
        renderHeatmap(d.heatmap);
    }).catch(function () {
        document.getElementById('heatmap-loading').textContent = 'Heatmap data unavailable.';
    });

    // ── SDC ──────────────────────────────────────────────────────────────────
    function gradeColor(g) {
        if (!g || g === '--') return '#999';
        var map = { A: '#388e3c', B: '#1976d2', C: '#f57c00', D: '#e65100', F: '#d32f2f' };
        return map[g[0].toUpperCase()] || '#555';
    }

    function populateSDC(s) {
        if (!s) return;
        document.getElementById('sdc-designs').textContent = s.design_count + ' design' + (s.design_count !== 1 ? 's' : '');
        var gradeEl = document.getElementById('sdc-grade');
        gradeEl.textContent = s.posture_grade || '--';
        gradeEl.style.color = gradeColor(s.posture_grade);
        document.getElementById('sdc-risk').textContent = s.risk_score !== null ? s.risk_score : '--';
        document.getElementById('sdc-threats').textContent = s.open_threats;
        document.getElementById('sdc-ctrl').textContent = s.controls_implemented;
        var pct = s.nist_coverage_pct || 0;
        document.getElementById('sdc-nist-pct').textContent = pct + '%';
        document.getElementById('sdc-nist-bar').style.width = pct + '%';
        if (!s.available) {
            document.getElementById('sdc-unavail').style.display = 'flex';
        }
    }

    // ── NDC ──────────────────────────────────────────────────────────────────
    function populateNDC(n) {
        if (!n) return;
        document.getElementById('ndc-topos').textContent = n.topology_count + ' topolog' + (n.topology_count !== 1 ? 'ies' : 'y');
        var pr = n.pass_rate || 0;
        var prEl = document.getElementById('ndc-pass-rate');
        prEl.textContent = pr + '%';
        prEl.style.color = pr >= 80 ? '#388e3c' : pr >= 50 ? '#f57c00' : '#d32f2f';
        document.getElementById('ndc-cat1').textContent = n.cat1_open;
        document.getElementById('ndc-cat2').textContent = n.cat2_open;
        document.getElementById('ndc-cat3').textContent = n.cat3_open;
        document.getElementById('ndc-total-findings').textContent = n.total_findings + ' total';
        document.getElementById('ndc-pass-bar').style.width = pr + '%';
        if (!n.available) {
            document.getElementById('ndc-unavail').style.display = 'flex';
        }
    }

    // ── PDC ──────────────────────────────────────────────────────────────────
    var SLSA_PCT = { 'L0': 0, 'L1': 25, 'L2': 50, 'L3': 75, 'L4': 100 };

    function populatePDC(p) {
        if (!p) return;
        document.getElementById('pdc-pipes').textContent = p.pipeline_count + ' pipeline' + (p.pipeline_count !== 1 ? 's' : '');
        document.getElementById('pdc-slsa').textContent = p.slsa_level || '--';
        document.getElementById('pdc-ssdf').textContent = (p.ssdf_pct || 0) + '%';
        document.getElementById('pdc-owasp').textContent = (p.owasp_pct || 0) + '%';
        document.getElementById('pdc-findings').textContent = p.total_findings;
        var slsaPct = SLSA_PCT[p.slsa_level] !== undefined ? SLSA_PCT[p.slsa_level] : 0;
        document.getElementById('pdc-slsa-bar').style.width = slsaPct + '%';
        if (!p.available) {
            document.getElementById('pdc-unavail').style.display = 'flex';
        }
    }

    // ── NIST 800-53 Heatmap ───────────────────────────────────────────────────
    function heatColor(pct, hasData) {
        if (!hasData) return { bg: '#f5f5f5', text: '#bbb' };
        if (pct >= 80) return { bg: '#c8e6c9', text: '#1b5e20' };
        if (pct >= 50) return { bg: '#fff9c4', text: '#f57f17' };
        if (pct >= 20) return { bg: '#ffe0b2', text: '#e65100' };
        return { bg: '#ffcdd2', text: '#b71c1c' };
    }

    function renderHeatmap(families) {
        var container = document.getElementById('nist-heatmap');
        if (!families || families.length === 0) {
            container.innerHTML = '<div style="color:#999;font-size:0.85rem;padding:1rem;">No NIST control data available.</div>';
            return;
        }
        container.innerHTML = '';
        families.forEach(function (f) {
            var hasData = f.avg_pct > 0 || f.sdc_pct !== null || f.main_pct !== null;
            var c = heatColor(f.avg_pct, hasData);
            var sdcLabel = f.sdc_pct !== null ? f.sdc_pct + '%' : 'n/a';
            var mainLabel = f.main_pct !== null ? f.main_pct + '%' : 'n/a';
            var cell = document.createElement('div');
            cell.style.cssText = [
                'background:' + c.bg,
                'color:' + c.text,
                'border-radius:6px',
                'padding:0.7rem 0.8rem',
                'position:relative',
                'cursor:default',
                'transition:transform 0.15s ease,box-shadow 0.15s ease',
            ].join(';');
            cell.innerHTML = [
                '<div style="display:flex;justify-content:space-between;align-items:baseline;">',
                '  <span style="font-size:1rem;font-weight:700;">' + f.family + '</span>',
                '  <span style="font-size:1.1rem;font-weight:bold;">' + (hasData ? f.avg_pct + '%' : '--') + '</span>',
                '</div>',
                '<div style="font-size:0.72rem;margin-top:0.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + f.name + '</div>',
                '<div style="margin-top:0.5rem;background:rgba(0,0,0,0.08);border-radius:3px;height:5px;overflow:hidden;">',
                '  <div style="height:100%;background:' + c.text + ';width:' + (hasData ? f.avg_pct : 0) + '%;transition:width 0.6s ease;"></div>',
                '</div>',
                '<div style="margin-top:0.35rem;font-size:0.68rem;display:grid;grid-template-columns:1fr 1fr;gap:0 0.4rem;opacity:0.85;">',
                '  <span>SDC: ' + sdcLabel + '</span>',
                '  <span>Proj: ' + mainLabel + '</span>',
                '</div>',
            ].join('');
            cell.addEventListener('mouseenter', function () {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.12)';
            });
            cell.addEventListener('mouseleave', function () {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
            container.appendChild(cell);
        });
    }
});
</script>
{% endblock %}