{% extends "base.html" %}
{% block title %}Security Scan Results - 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;">Security Scan</span>
    </nav>

    <h1>Security Scan Results</h1>
    <p class="text-muted">Multi-layer security scanning: SAST analysis, dependency audit, secret detection, and container image scanning with NIST 800-53 compliance tracking.</p>

    <!-- Stats Grid -->
    <div class="stat-grid" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,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 id="stat-total" class="stat-value" style="font-size:2rem;font-weight:bold;">--</div>
            <div class="stat-label" style="color:#666;">Total Findings</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-open" class="stat-value" style="font-size:2rem;font-weight:bold;color:#d32f2f;">--</div>
            <div class="stat-label" style="color:#666;">Open Findings</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-remediated" class="stat-value" style="font-size:2rem;font-weight:bold;color:#388e3c;">--</div>
            <div class="stat-label" style="color:#666;">Remediated</div>
        </div>
        <div class="stat-card" style="padding:1rem;border:1px solid #ddd;border-radius:8px;text-align:center;">
            <div id="stat-sbom" class="stat-value" style="font-size:2rem;font-weight:bold;color:#1976d2;">--</div>
            <div class="stat-label" style="color:#666;">SBOM Records</div>
        </div>
    </div>

    <!-- Severity Breakdown -->
    <h2 style="margin-top:1.5rem;">Severity Breakdown</h2>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1rem 0;">
        <!-- STIG Findings -->
        <div style="border:1px solid #ddd;border-radius:8px;padding:1.25rem;">
            <h3 style="margin:0 0 1rem;font-size:1.05rem;">STIG Findings</h3>
            <div id="stig-breakdown" style="display:flex;flex-direction:column;gap:0.75rem;">
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#d32f2f;color:#fff;font-weight:700;font-size:0.85rem;">CAT1</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="stig-cat1-bar" style="height:100%;background:#d32f2f;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="stig-cat1-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#f57c00;color:#fff;font-weight:700;font-size:0.85rem;">CAT2</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="stig-cat2-bar" style="height:100%;background:#f57c00;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="stig-cat2-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#fbc02d;color:#333;font-weight:700;font-size:0.85rem;">CAT3</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="stig-cat3-bar" style="height:100%;background:#fbc02d;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="stig-cat3-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
            </div>
        </div>
        <!-- Dependency Vulnerabilities -->
        <div style="border:1px solid #ddd;border-radius:8px;padding:1.25rem;">
            <h3 style="margin:0 0 1rem;font-size:1.05rem;">Dependency Vulnerabilities</h3>
            <div id="dep-breakdown" style="display:flex;flex-direction:column;gap:0.75rem;">
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#d32f2f;color:#fff;font-weight:700;font-size:0.85rem;">Critical</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="dep-critical-bar" style="height:100%;background:#d32f2f;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="dep-critical-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#f57c00;color:#fff;font-weight:700;font-size:0.85rem;">High</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="dep-high-bar" style="height:100%;background:#f57c00;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="dep-high-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#fbc02d;color:#333;font-weight:700;font-size:0.85rem;">Medium</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="dep-medium-bar" style="height:100%;background:#fbc02d;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="dep-medium-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <span style="display:inline-block;width:60px;padding:4px 0;text-align:center;border-radius:4px;background:#9e9e9e;color:#fff;font-weight:700;font-size:0.85rem;">Low</span>
                    <div style="flex:1;background:#eee;border-radius:4px;height:24px;overflow:hidden;">
                        <div id="dep-low-bar" style="height:100%;background:#9e9e9e;border-radius:4px;width:0%;transition:width 0.5s;"></div>
                    </div>
                    <span id="dep-low-count" style="font-weight:700;min-width:32px;text-align:right;">0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Run Scan -->
    <h2 style="margin-top:1.5rem;">Run Scan</h2>
    <div style="margin:1rem 0;padding:1.25rem;border:1px solid #ddd;border-radius:8px;background:#fafafa;">
        <div style="display:grid;grid-template-columns:1fr 2fr;gap:1rem;align-items:start;">
            <div>
                <label for="scan-project" style="display:block;font-weight:600;margin-bottom:0.3rem;">Project ID</label>
                <input id="scan-project" type="text" placeholder="e.g. proj-123" style="width:100%;padding:0.5rem 0.8rem;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;" />
            </div>
            <div>
                <label style="display:block;font-weight:600;margin-bottom:0.3rem;">Scan Types</label>
                <div style="display:flex;gap:1.5rem;flex-wrap:wrap;padding-top:0.25rem;">
                    <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
                        <input type="checkbox" id="scan-sast" checked style="accent-color:#1976d2;" /> SAST
                    </label>
                    <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
                        <input type="checkbox" id="scan-dependency" checked style="accent-color:#1976d2;" /> Dependency Audit
                    </label>
                    <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
                        <input type="checkbox" id="scan-secret" checked style="accent-color:#1976d2;" /> Secret Detection
                    </label>
                    <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
                        <input type="checkbox" id="scan-container" style="accent-color:#1976d2;" /> Container Scan
                    </label>
                </div>
            </div>
        </div>
        <div style="margin-top:1rem;display:flex;gap:0.5rem;align-items:center;">
            <button onclick="runScan()" id="btn-run-scan" style="padding:0.5rem 1.2rem;background:#1976d2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:0.95rem;">Run Scan</button>
            <span id="scan-status" style="color:#666;font-size:0.9rem;"></span>
        </div>
    </div>

    <!-- Findings Table -->
    <h2 style="margin-top:1.5rem;">Findings</h2>
    <div style="margin-bottom:0.75rem;display:flex;gap:0.5rem;align-items:center;">
        <label style="font-weight:600;font-size:0.9rem;">Filter:</label>
        <select id="filter-severity" onchange="loadFindings()" style="padding:0.3rem 0.6rem;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:0.85rem;">
            <option value="">All Severities</option>
            <option value="CAT1">CAT1 / Critical</option>
            <option value="CAT2">CAT2 / High</option>
            <option value="CAT3">CAT3 / Medium</option>
            <option value="low">Low</option>
        </select>
        <select id="filter-status" onchange="loadFindings()" style="padding:0.3rem 0.6rem;border:1px solid #ccc;border-radius:4px;background:#fff;font-size:0.85rem;">
            <option value="">All Status</option>
            <option value="open">Open</option>
            <option value="remediated">Remediated</option>
            <option value="accepted">Accepted</option>
            <option value="false_positive">False Positive</option>
        </select>
    </div>
    <div class="table-container" style="overflow-x:auto;">
        <table id="tbl-findings" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortFindings('source')">Source</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortFindings('project_id')">Project</th>
                    <th style="text-align:center;padding:0.5rem;cursor:pointer;" onclick="sortFindings('severity')">Severity</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortFindings('title')">Title</th>
                    <th style="text-align:center;padding:0.5rem;cursor:pointer;" onclick="sortFindings('status')">Status</th>
                    <th style="text-align:left;padding:0.5rem;cursor:pointer;" onclick="sortFindings('created_at')">Date</th>
                </tr>
            </thead>
            <tbody id="findings-body">
                <tr><td colspan="6" style="padding:1rem;text-align:center;color:#999;">Loading findings...</td></tr>
            </tbody>
        </table>
    </div>
    <!-- Pagination -->
    <div id="findings-pagination" style="margin-top:0.75rem;display:flex;gap:0.5rem;align-items:center;justify-content:center;">
    </div>

    <!-- Trend Chart -->
    <h2 style="margin-top:1.5rem;">Weekly Scan Trends</h2>
    <div id="trend-chart" style="border:1px solid #ddd;border-radius:8px;padding:1.25rem;margin:1rem 0;min-height:200px;">
        <div style="text-align:center;color:#999;padding:2rem;">Loading trends...</div>
    </div>

    <!-- SBOM Records -->
    <h2 style="margin-top:1.5rem;">SBOM Records</h2>
    <div class="table-container" style="overflow-x:auto;margin:1rem 0;">
        <table id="tbl-sbom" style="width:100%;border-collapse:collapse;">
            <thead>
                <tr style="border-bottom:2px solid #ddd;">
                    <th style="text-align:left;padding:0.5rem;">Project</th>
                    <th style="text-align:left;padding:0.5rem;">Format</th>
                    <th style="text-align:center;padding:0.5rem;">Components</th>
                    <th style="text-align:center;padding:0.5rem;">Vulnerabilities</th>
                    <th style="text-align:left;padding:0.5rem;">Generated</th>
                </tr>
            </thead>
            <tbody id="sbom-body">
                <tr><td colspan="5" style="padding:1rem;text-align:center;color:#999;">Loading SBOM records...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    // --- State ---
    let findingsData = [];
    let sortCol = 'created_at';
    let sortAsc = false;
    let currentPage = 1;
    const pageSize = 20;

    // --- Severity helpers ---
    function severityBadge(sev) {
        const s = (sev || '').toLowerCase();
        let bg, fg, label;
        if (s === 'cat1' || s === 'critical') { bg = '#d32f2f'; fg = '#fff'; label = sev; }
        else if (s === 'cat2' || s === 'high') { bg = '#f57c00'; fg = '#fff'; label = sev; }
        else if (s === 'cat3' || s === 'medium') { bg = '#fbc02d'; fg = '#333'; label = sev; }
        else if (s === 'low') { bg = '#9e9e9e'; fg = '#fff'; label = 'Low'; }
        else { bg = '#e0e0e0'; fg = '#333'; label = sev || '--'; }
        return '<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.8rem;font-weight:600;background:' + bg + ';color:' + fg + ';">' + label + '</span>';
    }

    function statusBadge(status) {
        const s = (status || '').toLowerCase();
        let bg, fg;
        if (s === 'open') { bg = '#ffebee'; fg = '#c62828'; }
        else if (s === 'remediated') { bg = '#e8f5e9'; fg = '#2e7d32'; }
        else if (s === 'accepted') { bg = '#e3f2fd'; fg = '#1565c0'; }
        else if (s === 'false_positive') { bg = '#f5f5f5'; fg = '#616161'; }
        else { bg = '#f5f5f5'; fg = '#616161'; }
        return '<span style="display:inline-block;padding:2px 8px;border-radius:12px;font-size:0.8rem;background:' + bg + ';color:' + fg + ';">' + (status || '--').replace('_', ' ') + '</span>';
    }

    // --- Load Stats ---
    async function loadStats() {
        try {
            const resp = await fetch('/api/security-scan/stats');
            const data = await resp.json();
            document.getElementById('stat-total').textContent = data.total_findings ?? '--';
            document.getElementById('stat-open').textContent = data.open_findings ?? '--';
            document.getElementById('stat-remediated').textContent = data.remediated ?? '--';
            document.getElementById('stat-sbom').textContent = data.sbom_records ?? '--';

            // STIG bars
            const stigTotal = Math.max((data.stig_cat1 || 0) + (data.stig_cat2 || 0) + (data.stig_cat3 || 0), 1);
            document.getElementById('stig-cat1-count').textContent = data.stig_cat1 || 0;
            document.getElementById('stig-cat2-count').textContent = data.stig_cat2 || 0;
            document.getElementById('stig-cat3-count').textContent = data.stig_cat3 || 0;
            document.getElementById('stig-cat1-bar').style.width = ((data.stig_cat1 || 0) / stigTotal * 100) + '%';
            document.getElementById('stig-cat2-bar').style.width = ((data.stig_cat2 || 0) / stigTotal * 100) + '%';
            document.getElementById('stig-cat3-bar').style.width = ((data.stig_cat3 || 0) / stigTotal * 100) + '%';

            // Dep bars
            const depTotal = Math.max((data.dep_critical || 0) + (data.dep_high || 0) + (data.dep_medium || 0) + (data.dep_low || 0), 1);
            document.getElementById('dep-critical-count').textContent = data.dep_critical || 0;
            document.getElementById('dep-high-count').textContent = data.dep_high || 0;
            document.getElementById('dep-medium-count').textContent = data.dep_medium || 0;
            document.getElementById('dep-low-count').textContent = data.dep_low || 0;
            document.getElementById('dep-critical-bar').style.width = ((data.dep_critical || 0) / depTotal * 100) + '%';
            document.getElementById('dep-high-bar').style.width = ((data.dep_high || 0) / depTotal * 100) + '%';
            document.getElementById('dep-medium-bar').style.width = ((data.dep_medium || 0) / depTotal * 100) + '%';
            document.getElementById('dep-low-bar').style.width = ((data.dep_low || 0) / depTotal * 100) + '%';
        } catch (e) {
            console.error('Failed to load stats:', e);
        }
    }

    // --- Run Scan ---
    async function runScan() {
        const projectId = document.getElementById('scan-project').value.trim();
        if (!projectId) { document.getElementById('scan-status').textContent = 'Project ID is required.'; return; }

        const scanTypes = [];
        if (document.getElementById('scan-sast').checked) scanTypes.push('sast');
        if (document.getElementById('scan-dependency').checked) scanTypes.push('dependency');
        if (document.getElementById('scan-secret').checked) scanTypes.push('secret');
        if (document.getElementById('scan-container').checked) scanTypes.push('container');

        if (scanTypes.length === 0) { document.getElementById('scan-status').textContent = 'Select at least one scan type.'; return; }

        const btn = document.getElementById('btn-run-scan');
        btn.disabled = true;
        document.getElementById('scan-status').textContent = 'Running scan...';

        try {
            const resp = await fetch('/api/security-scan/run', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ project_id: projectId, scan_types: scanTypes })
            });
            const data = await resp.json();
            if (resp.ok) {
                document.getElementById('scan-status').innerHTML = '<span style="color:#388e3c;">Scan complete. Found ' + (data.findings_count ?? 0) + ' findings.</span>';
                loadStats();
                loadFindings();
            } else {
                document.getElementById('scan-status').innerHTML = '<span style="color:#d32f2f;">Error: ' + (data.error || 'Unknown error') + '</span>';
            }
        } catch (e) {
            document.getElementById('scan-status').innerHTML = '<span style="color:#d32f2f;">Request failed: ' + e.message + '</span>';
        } finally {
            btn.disabled = false;
        }
    }

    // --- Load Findings ---
    async function loadFindings() {
        const severity = document.getElementById('filter-severity').value;
        const status = document.getElementById('filter-status').value;
        let url = '/api/security-scan/findings?page=' + currentPage + '&page_size=' + pageSize;
        if (severity) url += '&severity=' + encodeURIComponent(severity);
        if (status) url += '&status=' + encodeURIComponent(status);

        try {
            const resp = await fetch(url);
            const data = await resp.json();
            findingsData = data.findings || [];
            const total = data.total || 0;
            renderFindings();
            renderPagination(total);
        } catch (e) {
            document.getElementById('findings-body').innerHTML = '<tr><td colspan="6" style="padding:1rem;text-align:center;color:#d32f2f;">Failed to load findings.</td></tr>';
        }
    }

    function renderFindings() {
        const tbody = document.getElementById('findings-body');
        if (findingsData.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" style="padding:1rem;text-align:center;color:#999;">No findings found.</td></tr>';
            return;
        }
        tbody.innerHTML = findingsData.map(function(f) {
            return '<tr style="border-bottom:1px solid #eee;">' +
                '<td style="padding:0.5rem;font-size:0.85rem;">' + (f.source || '--') + '</td>' +
                '<td style="padding:0.5rem;font-size:0.85rem;color:#666;">' + (f.project_id ? f.project_id.substring(0, 16) : '--') + '</td>' +
                '<td style="padding:0.5rem;text-align:center;">' + severityBadge(f.severity) + '</td>' +
                '<td style="padding:0.5rem;">' + (f.title || '--') + '</td>' +
                '<td style="padding:0.5rem;text-align:center;">' + statusBadge(f.status) + '</td>' +
                '<td style="padding:0.5rem;font-size:0.85rem;color:#666;">' + (f.created_at ? f.created_at.substring(0, 16) : '--') + '</td>' +
                '</tr>';
        }).join('');
    }

    function renderPagination(total) {
        const container = document.getElementById('findings-pagination');
        const totalPages = Math.max(1, Math.ceil(total / pageSize));
        let html = '';
        if (currentPage > 1) {
            html += '<button onclick="goPage(' + (currentPage - 1) + ')" style="padding:0.3rem 0.7rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;">Prev</button>';
        }
        html += '<span style="font-size:0.9rem;color:#666;">Page ' + currentPage + ' of ' + totalPages + ' (' + total + ' total)</span>';
        if (currentPage < totalPages) {
            html += '<button onclick="goPage(' + (currentPage + 1) + ')" style="padding:0.3rem 0.7rem;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;">Next</button>';
        }
        container.innerHTML = html;
    }

    function goPage(page) {
        currentPage = page;
        loadFindings();
    }

    function sortFindings(col) {
        if (sortCol === col) { sortAsc = !sortAsc; } else { sortCol = col; sortAsc = true; }
        findingsData.sort(function(a, b) {
            const va = (a[col] || '').toString().toLowerCase();
            const vb = (b[col] || '').toString().toLowerCase();
            if (va < vb) return sortAsc ? -1 : 1;
            if (va > vb) return sortAsc ? 1 : -1;
            return 0;
        });
        renderFindings();
    }

    // --- Load Trends ---
    async function loadTrends() {
        const container = document.getElementById('trend-chart');
        try {
            const resp = await fetch('/api/security-scan/trends');
            const data = await resp.json();
            const weeks = data.weeks || [];
            if (weeks.length === 0) {
                container.innerHTML = '<div style="text-align:center;color:#999;padding:2rem;">No trend data available.</div>';
                return;
            }

            const maxVal = Math.max(...weeks.map(function(w) { return Math.max(w.critical || 0, w.high || 0, w.medium || 0, w.low || 0, 1); }));
            const chartHeight = 180;
            const barGroupWidth = Math.max(40, Math.floor(700 / weeks.length));

            let svg = '<svg width="100%" viewBox="0 0 ' + (weeks.length * barGroupWidth + 40) + ' ' + (chartHeight + 40) + '" style="font-family:inherit;">';

            // Y-axis line
            svg += '<line x1="30" y1="5" x2="30" y2="' + chartHeight + '" stroke="#ddd" stroke-width="1"/>';
            // X-axis line
            svg += '<line x1="30" y1="' + chartHeight + '" x2="' + (weeks.length * barGroupWidth + 35) + '" y2="' + chartHeight + '" stroke="#ddd" stroke-width="1"/>';

            weeks.forEach(function(w, i) {
                const x = 35 + i * barGroupWidth;
                const bw = Math.max(6, Math.floor(barGroupWidth / 5));

                const hCrit = ((w.critical || 0) / maxVal) * (chartHeight - 10);
                const hHigh = ((w.high || 0) / maxVal) * (chartHeight - 10);
                const hMed = ((w.medium || 0) / maxVal) * (chartHeight - 10);
                const hLow = ((w.low || 0) / maxVal) * (chartHeight - 10);

                svg += '<rect x="' + x + '" y="' + (chartHeight - hCrit) + '" width="' + bw + '" height="' + hCrit + '" fill="#d32f2f" rx="2"><title>Critical: ' + (w.critical || 0) + '</title></rect>';
                svg += '<rect x="' + (x + bw + 1) + '" y="' + (chartHeight - hHigh) + '" width="' + bw + '" height="' + hHigh + '" fill="#f57c00" rx="2"><title>High: ' + (w.high || 0) + '</title></rect>';
                svg += '<rect x="' + (x + 2 * (bw + 1)) + '" y="' + (chartHeight - hMed) + '" width="' + bw + '" height="' + hMed + '" fill="#fbc02d" rx="2"><title>Medium: ' + (w.medium || 0) + '</title></rect>';
                svg += '<rect x="' + (x + 3 * (bw + 1)) + '" y="' + (chartHeight - hLow) + '" width="' + bw + '" height="' + hLow + '" fill="#9e9e9e" rx="2"><title>Low: ' + (w.low || 0) + '</title></rect>';

                // Week label
                svg += '<text x="' + (x + 2 * bw) + '" y="' + (chartHeight + 16) + '" text-anchor="middle" font-size="10" fill="#666">' + (w.week || '') + '</text>';
            });

            svg += '</svg>';

            // Legend
            let legend = '<div style="display:flex;gap:1.25rem;margin-top:0.5rem;justify-content:center;font-size:0.8rem;">';
            legend += '<span><span style="display:inline-block;width:12px;height:12px;background:#d32f2f;border-radius:2px;vertical-align:middle;margin-right:4px;"></span>Critical</span>';
            legend += '<span><span style="display:inline-block;width:12px;height:12px;background:#f57c00;border-radius:2px;vertical-align:middle;margin-right:4px;"></span>High</span>';
            legend += '<span><span style="display:inline-block;width:12px;height:12px;background:#fbc02d;border-radius:2px;vertical-align:middle;margin-right:4px;"></span>Medium</span>';
            legend += '<span><span style="display:inline-block;width:12px;height:12px;background:#9e9e9e;border-radius:2px;vertical-align:middle;margin-right:4px;"></span>Low</span>';
            legend += '</div>';

            container.innerHTML = svg + legend;
        } catch (e) {
            container.innerHTML = '<div style="text-align:center;color:#d32f2f;padding:2rem;">Failed to load trend data.</div>';
        }
    }

    // --- Load SBOM ---
    async function loadSBOM() {
        try {
            const resp = await fetch('/api/security-scan/sbom');
            const data = await resp.json();
            const records = data.records || [];
            const tbody = document.getElementById('sbom-body');
            if (records.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="padding:1rem;text-align:center;color:#999;">No SBOM records found.</td></tr>';
                return;
            }
            tbody.innerHTML = records.map(function(r) {
                return '<tr style="border-bottom:1px solid #eee;">' +
                    '<td style="padding:0.5rem;font-size:0.85rem;">' + (r.project_id || '--') + '</td>' +
                    '<td style="padding:0.5rem;font-size:0.85rem;">' + (r.format || '--') + '</td>' +
                    '<td style="padding:0.5rem;text-align:center;font-weight:600;">' + (r.component_count ?? '--') + '</td>' +
                    '<td style="padding:0.5rem;text-align:center;">' +
                        (r.vuln_count > 0
                            ? '<span style="color:#d32f2f;font-weight:600;">' + r.vuln_count + '</span>'
                            : '<span style="color:#388e3c;">0</span>') +
                    '</td>' +
                    '<td style="padding:0.5rem;font-size:0.85rem;color:#666;">' + (r.generated_at ? r.generated_at.substring(0, 16) : '--') + '</td>' +
                    '</tr>';
            }).join('');
        } catch (e) {
            document.getElementById('sbom-body').innerHTML = '<tr><td colspan="5" style="padding:1rem;text-align:center;color:#d32f2f;">Failed to load SBOM records.</td></tr>';
        }
    }

    // --- Init ---
    loadStats();
    loadFindings();
    loadTrends();
    loadSBOM();
</script>
{% endblock %}