{% extends "base.html" %}

{% block title %}Analysis Report - Red Hat CVE Checker{% endblock %}

{% block extra_css %}
<style>
    /* Component expand button styling */
    .component-expand-btn {
        font-size: 0.8rem;
        text-decoration: none !important;
    }
    .component-expand-btn:hover {
        text-decoration: underline !important;
    }
    .component-expand-btn .expand-icon {
        transition: transform 0.2s ease;
        display: inline-block;
    }
    .component-expand-btn[aria-expanded="true"] .expand-icon {
        transform: rotate(90deg);
    }
    
    /* Component detail row styling */
    .component-detail-row {
        background-color: #f8f9fa;
    }
    .component-detail-row td {
        border-top: none !important;
    }
    .component-detail-row .badge {
        font-weight: normal;
        font-size: 0.75rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">
        <i class="bi bi-file-earmark-bar-graph me-2"></i>
        Analysis Report
    </h4>
    <div>
        <a href="/" class="btn btn-outline-secondary me-2">
            <i class="bi bi-arrow-left me-1"></i> New Analysis
        </a>
        <button class="btn btn-outline-primary me-2" onclick="downloadReport()">
            <i class="bi bi-download me-1"></i> Download JSON
        </button>
        <button class="btn btn-outline-success" onclick="downloadValidationReport()">
            <i class="bi bi-file-earmark-text me-1"></i> Download Validation Report
        </button>
    </div>
</div>

<!-- Validation Score -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <h6 class="text-muted mb-3">Validation Score</h6>
                {% set score = report.summary.validation_score %}
                {% if score >= 90 %}
                    {% set score_class = "score-excellent" %}
                {% elif score >= 75 %}
                    {% set score_class = "score-good" %}
                {% elif score >= 60 %}
                    {% set score_class = "score-fair" %}
                {% else %}
                    {% set score_class = "score-poor" %}
                {% endif %}
                <div class="score-circle {{ score_class }}">
                    {{ "%.1f"|format(score) }}
                </div>
                <h5 class="mt-3">{{ interpretation.rating }}</h5>
                <p class="text-muted small">{{ interpretation.description }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header">Summary Statistics</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-primary">{{ report.summary.total_findings }}</div>
                        <div class="stat-label">Total</div>
                    </div>
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-success">{{ report.summary.true_positives }}</div>
                        <div class="stat-label">True Positives</div>
                    </div>
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-danger">{{ report.summary.false_positives }}</div>
                        <div class="stat-label">False Positives</div>
                    </div>
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-warning">{{ report.summary.likely_false_positives }}</div>
                        <div class="stat-label">Likely FP</div>
                    </div>
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-secondary">{{ report.summary.inconclusive }}</div>
                        <div class="stat-label">Inconclusive</div>
                    </div>
                    <div class="col-4 col-md-2 stat-card">
                        <div class="stat-value text-muted">{{ report.summary.not_applicable }}</div>
                        <div class="stat-label">N/A</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Scanned Targets -->
{% if report.summary.scanned_targets %}
{% set ocp_components = report.summary.scanned_targets|selectattr('target_type', 'equalto', 'ocp_component')|list %}
{% set other_targets = report.summary.scanned_targets|rejectattr('target_type', 'equalto', 'ocp_component')|list %}

<!-- OCP Components Section -->
{% if ocp_components %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-primary">
            <div class="card-header bg-primary bg-opacity-10">
                <i class="bi bi-grid-3x3-gap me-2"></i>
                OpenShift Components
                <span class="badge bg-primary ms-2">{{ ocp_components|length }} components</span>
                <span class="badge bg-secondary ms-1">{{ ocp_components|sum(attribute='finding_count') }} total findings</span>
            </div>
            <div class="card-body">
                <p class="text-muted mb-3">
                    <i class="bi bi-info-circle me-1"></i>
                    These are individual OpenShift components extracted from <code>ocp-v4.0-art-dev</code> images, 
                    grouped by namespace for easier remediation targeting.
                </p>
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0" id="ocp-components-table">
                        <thead>
                            <tr>
                                <th>Component (Namespace)</th>
                                <th>Cluster</th>
                                <th class="text-end">Findings</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for target in ocp_components[:20] %}
                            <tr>
                                <td class="font-monospace">
                                    <i class="bi bi-box text-primary me-1"></i>
                                    {{ target.name }}
                                </td>
                                <td class="text-muted">{{ target.cluster|default('-') }}</td>
                                <td class="text-end">
                                    <span class="badge bg-secondary">{{ target.finding_count }}</span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% if ocp_components|length > 20 %}
                    <div class="mt-2">
                        <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#more-components">
                            Show {{ ocp_components|length - 20 }} more components
                        </button>
                        <div class="collapse mt-2" id="more-components">
                            <table class="table table-sm table-hover mb-0">
                                <tbody>
                                    {% for target in ocp_components[20:] %}
                                    <tr>
                                        <td class="font-monospace">
                                            <i class="bi bi-box text-primary me-1"></i>
                                            {{ target.name }}
                                        </td>
                                        <td class="text-muted">{{ target.cluster|default('-') }}</td>
                                        <td class="text-end">
                                            <span class="badge bg-secondary">{{ target.finding_count }}</span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Other Scanned Targets -->
{% if other_targets %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-box-seam me-2"></i>
                Scanned Target{% if other_targets|length > 1 %}s{% endif %}
            </div>
            <div class="card-body">
                {% if other_targets|length == 1 %}
                    {% set target = other_targets[0] %}
                    <div class="d-flex align-items-center flex-wrap">
                        <span class="badge bg-primary me-2">{{ target.target_type|default('image') }}</span>
                        <strong class="font-monospace">
                            {% if target.registry %}{{ target.registry }}/{% endif %}{{ target.repository|default(target.name) }}{% if target.tag %}:{{ target.tag }}{% endif %}
                        </strong>
                        <span class="ms-3 text-muted small">({{ target.finding_count }} findings)</span>
                    </div>
                    {% if target.detected_product %}
                    <div class="mt-3 p-3 bg-light rounded">
                        <div class="row">
                            <div class="col-md-3">
                                <small class="text-muted d-block">Product</small>
                                <strong>{{ target.detected_product }}</strong>
                                {% if target.detection_method and target.detection_method.startswith('ai:') %}
                                <span class="badge bg-info ms-1">AI detected</span>
                                {% endif %}
                            </div>
                            <div class="col-md-2">
                                <small class="text-muted d-block">Your Version</small>
                                <strong>{{ target.detected_version }}</strong>
                            </div>
                            <div class="col-md-2">
                                <small class="text-muted d-block">Status</small>
                                {% if target.lifecycle_status == 'full_support' %}
                                    <span class="badge bg-success">Full Support</span>
                                {% elif target.lifecycle_status == 'maintenance' %}
                                    <span class="badge bg-info">Maintenance</span>
                                {% elif target.lifecycle_status == 'extended' %}
                                    <span class="badge bg-warning text-dark">Extended Support</span>
                                {% elif target.lifecycle_status == 'end_of_life' %}
                                    <span class="badge bg-danger">End of Life</span>
                                {% else %}
                                    <span class="badge bg-secondary">Unknown</span>
                                {% endif %}
                            </div>
                            {% if target.latest_version and target.versions_behind is not none %}
                            <div class="col-md-3">
                                <small class="text-muted d-block">Latest Version</small>
                                <strong>{{ target.latest_version }}</strong>
                                {% if target.versions_behind > 0 %}
                                <span class="badge bg-warning text-dark ms-1">{{ target.versions_behind }} {% if target.versions_behind == 1 %}release{% else %}releases{% endif %} behind</span>
                                {% else %}
                                <span class="badge bg-success ms-1">current</span>
                                {% endif %}
                                {% if target.release_notes_url %}
                                <a href="{{ target.release_notes_url }}" target="_blank" class="ms-2 text-decoration-none" title="View Release Notes">
                                    <i class="bi bi-box-arrow-up-right"></i> Release Notes
                                </a>
                                {% endif %}
                            </div>
                            {% endif %}
                            {% if target.support_ends %}
                            <div class="col-md-2">
                                <small class="text-muted d-block">Support Ends</small>
                                <strong>{{ target.support_ends }}</strong>
                            </div>
                            {% endif %}
                        </div>
                        {% if target.lifecycle_recommendation %}
                        <div class="mt-2">
                            {% if 'CRITICAL' in target.lifecycle_recommendation %}
                                <div class="alert alert-danger mb-0 py-1">
                                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                                    {{ target.lifecycle_recommendation }}
                                </div>
                            {% elif 'WARNING' in target.lifecycle_recommendation %}
                                <div class="alert alert-warning mb-0 py-1">
                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                    {{ target.lifecycle_recommendation }}
                                </div>
                            {% else %}
                                <div class="alert alert-info mb-0 py-1">
                                    <i class="bi bi-info-circle me-1"></i>
                                    {{ target.lifecycle_recommendation }}
                                </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% else %}
                    {% set has_lifecycle = other_targets|selectattr('detected_product')|list|length > 0 %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Target</th>
                                    <th>Registry</th>
                                    {% if has_lifecycle %}
                                    <th>Product</th>
                                    <th>Status</th>
                                    {% endif %}
                                    <th class="text-end">Findings</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for target in other_targets[:5] %}
                                <tr>
                                    <td class="font-monospace">
                                        {{ target.repository|default(target.name) }}{% if target.tag %}:{{ target.tag }}{% endif %}
                                    </td>
                                    <td class="text-muted">{{ target.registry|default('-') }}</td>
                                    {% if has_lifecycle %}
                                    <td>
                                        {% if target.detected_product %}
                                        {{ target.detected_product }} {{ target.detected_version }}
                                        {% else %}-{% endif %}
                                    </td>
                                    <td>
                                        {% if target.lifecycle_status == 'full_support' %}
                                            <span class="badge bg-success">Full Support</span>
                                        {% elif target.lifecycle_status == 'maintenance' %}
                                            <span class="badge bg-info">Maintenance</span>
                                        {% elif target.lifecycle_status == 'extended' %}
                                            <span class="badge bg-warning text-dark">Extended</span>
                                        {% elif target.lifecycle_status == 'end_of_life' %}
                                            <span class="badge bg-danger">EOL</span>
                                        {% else %}
                                            <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    {% endif %}
                                    <td class="text-end">{{ target.finding_count }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% if other_targets|length > 5 %}
                        <small class="text-muted">... and {{ other_targets|length - 5 }} more targets</small>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endif %}

<!-- Lifecycle Warnings (deduplicated) -->
{% set seen_warnings = [] %}
{% set unique_warnings = [] %}
{% for warning in report.summary.lifecycle_warnings %}
    {% if warning not in seen_warnings %}
        {% set _ = seen_warnings.append(warning) %}
        {% set _ = unique_warnings.append(warning) %}
    {% endif %}
{% endfor %}
{% if unique_warnings %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-warning">
            <div class="card-header bg-warning bg-opacity-25">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Lifecycle Warnings
            </div>
            <div class="card-body">
                {% for warning in unique_warnings %}
                    {% if 'CRITICAL' in warning %}
                        <div class="alert alert-danger py-2">
                            <i class="bi bi-exclamation-triangle-fill me-1"></i>
                            {{ warning }}
                        </div>
                    {% elif 'WARNING' in warning %}
                        <div class="alert alert-warning py-2">
                            <i class="bi bi-exclamation-triangle me-1"></i>
                            {{ warning }}
                        </div>
                    {% elif 'releases behind' in warning %}
                        <div class="alert alert-warning py-2">
                            <i class="bi bi-arrow-up-circle me-1"></i>
                            {{ warning }}
                        </div>
                    {% else %}
                        <div class="alert alert-info py-2">
                            <i class="bi bi-info-circle me-1"></i>
                            {{ warning }}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Fix Availability Overview -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-patch-check me-2 text-success"></i>
                Fix Availability
            </div>
            <div class="card-body">
                {% set fix_status = report.summary.by_severity_fix_status %}
                {% set total_fixed = fix_status.critical_fixed + fix_status.high_fixed + fix_status.medium_fixed + fix_status.low_fixed + fix_status.unknown_fixed %}
                {% set total_unfixed = fix_status.critical_unfixed + fix_status.high_unfixed + fix_status.medium_unfixed + fix_status.low_unfixed + fix_status.unknown_unfixed %}
                {% set will_not_fix = report.summary.will_not_fix %}
                {% set unfixed_excl_wnf = [total_unfixed - will_not_fix, 0]|max %}
                {% set total_findings = total_fixed + total_unfixed %}
                
                <div class="d-flex justify-content-around text-center mb-3">
                    <div>
                        <div class="display-6 text-success">{{ total_fixed }}</div>
                        <small class="text-muted">Fixed</small>
                    </div>
                    <div>
                        <div class="display-6 text-danger">{{ unfixed_excl_wnf }}</div>
                        <small class="text-muted">Unfixed</small>
                    </div>
                    {% if will_not_fix > 0 %}
                    <div>
                        <div class="display-6 text-warning">{{ will_not_fix }}</div>
                        <small class="text-muted">Won't Fix</small>
                    </div>
                    {% endif %}
                </div>
                
                {% if total_findings > 0 %}
                <div class="progress" style="height: 24px;">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {{ (total_fixed / total_findings * 100)|round(1) }}%"
                         title="{{ total_fixed }} findings have RHSA fix available">
                        {% if total_fixed / total_findings > 0.15 %}{{ (total_fixed / total_findings * 100)|round(0)|int }}%{% endif %}
                    </div>
                    <div class="progress-bar bg-danger" role="progressbar" 
                         style="width: {{ (unfixed_excl_wnf / total_findings * 100)|round(1) }}%"
                         title="{{ unfixed_excl_wnf }} findings have no fix yet">
                        {% if unfixed_excl_wnf / total_findings > 0.15 %}{{ (unfixed_excl_wnf / total_findings * 100)|round(0)|int }}%{% endif %}
                    </div>
                    {% if will_not_fix > 0 %}
                    <div class="progress-bar bg-warning" role="progressbar" 
                         style="width: {{ (will_not_fix / total_findings * 100)|round(1) }}%"
                         title="{{ will_not_fix }} findings marked Will Not Fix by Red Hat">
                        {% if will_not_fix / total_findings > 0.15 %}{{ (will_not_fix / total_findings * 100)|round(0)|int }}%{% endif %}
                    </div>
                    {% endif %}
                </div>
                <div class="d-flex justify-content-between small text-muted mt-1">
                    <span><i class="bi bi-check-circle text-success me-1"></i>Has RHSA Fix</span>
                    {% if will_not_fix > 0 %}
                    <span><i class="bi bi-exclamation-triangle text-warning me-1"></i>Won't Fix</span>
                    {% endif %}
                    <span><i class="bi bi-x-circle text-danger me-1"></i>No Fix</span>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-bar-chart me-2"></i>
                Fix Status by Severity
                <small class="text-muted ms-2">(actionable insights)</small>
            </div>
            <div class="card-body">
                <canvas id="fixStatusChart" height="130"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Issues Overview -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-exclamation-triangle me-2 text-warning"></i>
                Issues Detected
            </div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tbody>
                        <tr>
                            <td><i class="bi bi-arrows-angle-contract me-2"></i>Severity Mismatches</td>
                            <td class="text-end">
                                <span class="badge {% if report.summary.severity_mismatches > 0 %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                                    {{ report.summary.severity_mismatches }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-speedometer2 me-2"></i>CVSS Score Mismatches</td>
                            <td class="text-end">
                                <span class="badge {% if report.summary.cvss_mismatches > 0 %}bg-warning text-dark{% else %}bg-secondary{% endif %}">
                                    {{ report.summary.cvss_mismatches }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-box-seam me-2"></i>Likely Non-RH Software</td>
                            <td class="text-end">
                                <span class="badge {% if report.summary.non_rh_software_likely > 0 %}bg-info{% else %}bg-secondary{% endif %}">
                                    {{ report.summary.non_rh_software_likely }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-question-circle me-2"></i>VEX Data Not Found</td>
                            <td class="text-end">
                                <span class="badge bg-secondary">{{ report.summary.vex_data_not_found }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><i class="bi bi-shield-exclamation me-2"></i>Non-CVE Findings (GHSA, etc.)</td>
                            <td class="text-end">
                                <span class="badge {% if report.summary.non_cve_findings > 0 %}bg-purple{% else %}bg-secondary{% endif %}" style="{% if report.summary.non_cve_findings > 0 %}background-color: #6f42c1 !important;{% endif %}">
                                    {{ report.summary.non_cve_findings }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-pie-chart me-2"></i>
                Severity Distribution
            </div>
            <div class="card-body">
                <canvas id="severityChart" height="150"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Recommendations -->
{% if interpretation.recommendations %}
<div class="card mb-4">
    <div class="card-header">
        <i class="bi bi-lightbulb me-2 text-info"></i>
        Recommendations
    </div>
    <div class="card-body">
        <ul class="mb-0">
            {% for rec in interpretation.recommendations %}
            <li>{{ rec }}</li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}

<!-- Findings Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>
            <i class="bi bi-list-ul me-2"></i>
            Findings <span id="findingsCount" class="text-muted small">({{ report.findings|length }} total)</span>
        </span>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <select class="form-select form-select-sm" id="filterSelect" style="width: auto;">
                <option value="">All Findings</option>
                <optgroup label="By Verdict">
                    <option value="true_positive">True Positives</option>
                    <option value="false_positive">False Positives</option>
                    <option value="likely_fp">Likely False Positives</option>
                    <option value="inconclusive">Inconclusive</option>
                    <option value="not_applicable">Not Applicable (Non-RH)</option>
                </optgroup>
                <optgroup label="By Issue">
                    <option value="has_issues">With Any Issues</option>
                    <option value="severity_mismatch">Severity Mismatches</option>
                    <option value="cvss_mismatch">CVSS Mismatches (≥0.5)</option>
                    <option value="non_rh">Likely Non-RH Software</option>
                    <option value="vex_not_found">VEX Data Not Found</option>
                    <option value="non_cve">Non-CVE (GHSA, etc.)</option>
                </optgroup>
                <optgroup label="By Fix Status">
                    <option value="has_fix">Has RHSA Fix Available</option>
                    <option value="no_fix">No Fix Available</option>
                    <option value="will_not_fix">Will Not Fix (RH Decision)</option>
                </optgroup>
                <optgroup label="By Severity">
                    <option value="critical">Critical</option>
                    <option value="important">Important</option>
                    <option value="moderate">Moderate</option>
                    <option value="low">Low</option>
                </optgroup>
            </select>
            <div class="d-flex align-items-center gap-1">
                <select class="form-select form-select-sm" id="severitySelect" style="width: auto;">
                    <option value="">All Severities</option>
                    <option value="critical">Critical</option>
                    <option value="important">Important/High</option>
                    <option value="moderate">Moderate/Medium</option>
                    <option value="low">Low</option>
                </select>
                <select class="form-select form-select-sm" id="severitySourceSelect" style="width: auto;" title="Which severity to filter on">
                    <option value="either">Either</option>
                    <option value="rh">Red Hat</option>
                    <option value="scanner">Scanner</option>
                </select>
            </div>
            <select class="form-select form-select-sm" id="pageSizeSelect" style="width: auto;">
                <option value="25">25 per page</option>
                <option value="50" selected>50 per page</option>
                <option value="100">100 per page</option>
                <option value="250">250 per page</option>
            </select>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-findings mb-0">
                <thead>
                    <tr>
                        <th>CVE ID</th>
                        <th>Package</th>
                        <th>Component</th>
                        <th>Scanner Severity</th>
                        <th>Red Hat Severity</th>
                        <th>Remediation</th>
                        <th>RH Probability</th>
                        <th>Verdict</th>
                        <th>Flags</th>
                    </tr>
                </thead>
                <tbody id="findingsBody">
                    <!-- Populated by JavaScript -->
                </tbody>
            </table>
        </div>
        <!-- Pagination -->
        <div class="d-flex justify-content-between align-items-center py-3 px-3 bg-light">
            <span id="paginationInfo" class="text-muted small"></span>
            <nav>
                <ul class="pagination pagination-sm mb-0" id="pagination">
                    <!-- Populated by JavaScript -->
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- Metadata -->
<div class="text-muted small mt-4">
    <p class="mb-1">
        <strong>Source File:</strong> {{ report.filename or 'Unknown' }}
    </p>
    <p class="mb-1">
        <strong>Scanner:</strong> {{ report.summary.scanner_name or 'Auto-detected' }}
    </p>
    <p class="mb-0">
        <strong>Analyzed:</strong> {{ report.analyzed_at or 'Unknown' }}
    </p>
</div>

<!-- False Positive Verification Modal -->
<div class="modal fade" id="fpInfoModal" tabindex="-1" aria-labelledby="fpInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="fpInfoModalLabel">
                    <i class="bi bi-search me-2"></i>How to Verify False Positives
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>What is a False Positive?</strong><br>
                    A false positive occurs when a scanner reports a vulnerability that doesn't actually exist in your environment. 
                    This can happen when:
                    <ul class="mb-0 mt-2">
                        <li>The vulnerable package is not actually present in the container</li>
                        <li>The scanner detected a similar package name that isn't from Red Hat</li>
                        <li>The vulnerability doesn't apply to the specific version or configuration</li>
                    </ul>
                </div>
                
                <h6 class="mt-4 mb-3"><i class="bi bi-terminal me-2"></i>Verify with Syft</h6>
                <p>
                    <a href="https://github.com/anchore/syft" target="_blank">Syft</a> is a CLI tool that generates a Software Bill of Materials (SBOM) 
                    for container images. Use it to verify if the reported package actually exists in your container.
                </p>
                
                <div class="card bg-light mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><strong>Step 1:</strong> Install Syft (if not installed)</span>
                    </div>
                    <div class="card-body">
                        <pre class="mb-0"><code id="syftInstallCmd">curl -sSfL https://raw.githubusercontent.com/anchore/syft/main/install.sh | sh -s -- -b /usr/local/bin</code></pre>
                        <button class="btn btn-sm btn-outline-secondary mt-2" onclick="copyToClipboard('syftInstallCmd')">
                            <i class="bi bi-clipboard me-1"></i>Copy
                        </button>
                    </div>
                </div>
                
                <div class="card bg-light mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><strong>Step 2:</strong> Search for the package in the container</span>
                    </div>
                    <div class="card-body">
                        <pre class="mb-0"><code id="syftSearchCmd">syft &lt;image&gt; | grep -i &lt;package&gt;</code></pre>
                        <button class="btn btn-sm btn-outline-secondary mt-2" onclick="copyToClipboard('syftSearchCmd')">
                            <i class="bi bi-clipboard me-1"></i>Copy
                        </button>
                    </div>
                </div>
                
                <div class="card bg-light mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><strong>Step 3:</strong> Full SBOM for detailed analysis (optional)</span>
                    </div>
                    <div class="card-body">
                        <pre class="mb-0"><code id="syftFullCmd">syft &lt;image&gt; -o json &gt; sbom.json</code></pre>
                        <button class="btn btn-sm btn-outline-secondary mt-2" onclick="copyToClipboard('syftFullCmd')">
                            <i class="bi bi-clipboard me-1"></i>Copy
                        </button>
                    </div>
                </div>
                
                <h6 class="mt-4 mb-3"><i class="bi bi-lightbulb me-2"></i>Interpreting Results</h6>
                <ul>
                    <li><strong>Package not found:</strong> The vulnerability is a false positive - the package doesn't exist in this container.</li>
                    <li><strong>Package found but different source:</strong> Check if it's from Red Hat (RPM) or another source (npm, pip, etc.). Non-Red Hat packages won't have Red Hat VEX data.</li>
                    <li><strong>Package found with matching version:</strong> The finding may be a true positive - investigate further using Red Hat's security advisories.</li>
                </ul>
                
                <div class="alert alert-secondary mt-3" id="fpContextInfo" style="display: none;">
                    <h6><i class="bi bi-tag me-2"></i>Context for this finding:</h6>
                    <ul class="mb-0">
                        <li><strong>CVE:</strong> <span id="fpCveId"></span></li>
                        <li><strong>Package:</strong> <code id="fpPackageName"></code></li>
                        <li><strong>Image:</strong> <code id="fpImageRef"></code></li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <a href="https://github.com/anchore/syft#readme" target="_blank" class="btn btn-outline-primary">
                    <i class="bi bi-book me-1"></i>Syft Documentation
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Store only summary data (not full findings which can be huge)
const reportSummary = {{ report.summary|tojson }};
const reportId = '{{ report_id }}';
const reportFilename = '{{ report.filename or "analysis" }}';

// Pagination and filter state
let currentPage = 1;
let pageSize = 50;
let currentFilter = '';
let currentSeverity = '';
let currentSeveritySource = 'either';
let filteredTotal = 0;

// Download report as JSON (fetch from API to avoid storing huge data in browser)
async function downloadReport() {
    try {
        const response = await fetch(`/api/report/${reportId}`);
        const fullReport = await response.json();
        const blob = new Blob([JSON.stringify(fullReport, null, 2)], {type: 'application/json'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `cve-analysis-${reportId}.json`;
        a.click();
        URL.revokeObjectURL(url);
    } catch (error) {
        console.error('Download failed:', error);
        alert('Failed to download report');
    }
}

// Download validation report as Markdown
async function downloadValidationReport() {
    try {
        const response = await fetch(`/api/report/${reportId}/validation-report`);
        if (!response.ok) throw new Error('Failed to generate validation report');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `validation-report-${reportId}.md`;
        a.click();
        URL.revokeObjectURL(url);
    } catch (error) {
        console.error('Download failed:', error);
        alert('Failed to download validation report');
    }
}

// Severity chart
const ctx = document.getElementById('severityChart').getContext('2d');
const scannerSev = reportSummary.by_scanner_severity;
const rhSev = reportSummary.by_rh_severity;

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Critical', 'Important', 'Moderate', 'Low', 'Unknown'],
        datasets: [
            {
                label: 'Scanner (normalized)',
                data: [scannerSev.critical, scannerSev.high, scannerSev.medium, scannerSev.low, scannerSev.unknown],
                backgroundColor: 'rgba(238, 0, 0, 0.7)',
            },
            {
                label: 'Red Hat',
                data: [rhSev.critical, rhSev.high, rhSev.medium, rhSev.low, rhSev.unknown],
                backgroundColor: 'rgba(40, 167, 69, 0.7)',
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    precision: 0
                }
            }
        }
    }
});

// Fix Status by Severity chart
const fixStatusCtx = document.getElementById('fixStatusChart').getContext('2d');
const fixStatus = reportSummary.by_severity_fix_status;

new Chart(fixStatusCtx, {
    type: 'bar',
    data: {
        labels: ['Critical', 'Important', 'Moderate', 'Low'],
        datasets: [
            {
                label: 'Fixed (RHSA Available)',
                data: [
                    fixStatus.critical_fixed,
                    fixStatus.high_fixed,
                    fixStatus.medium_fixed,
                    fixStatus.low_fixed
                ],
                backgroundColor: 'rgba(40, 167, 69, 0.8)',
            },
            {
                label: 'Unfixed (No RHSA)',
                data: [
                    fixStatus.critical_unfixed,
                    fixStatus.high_unfixed,
                    fixStatus.medium_unfixed,
                    fixStatus.low_unfixed
                ],
                backgroundColor: 'rgba(220, 53, 69, 0.8)',
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            },
            tooltip: {
                callbacks: {
                    afterLabel: function(context) {
                        const dataIndex = context.dataIndex;
                        const fixed = [fixStatus.critical_fixed, fixStatus.high_fixed, fixStatus.medium_fixed, fixStatus.low_fixed][dataIndex];
                        const unfixed = [fixStatus.critical_unfixed, fixStatus.high_unfixed, fixStatus.medium_unfixed, fixStatus.low_unfixed][dataIndex];
                        const total = fixed + unfixed;
                        if (total === 0) return '';
                        const pct = context.datasetIndex === 0 
                            ? ((fixed / total) * 100).toFixed(0) 
                            : ((unfixed / total) * 100).toFixed(0);
                        return `(${pct}% of ${total} findings)`;
                    }
                }
            }
        },
        scales: {
            x: {
                stacked: true,
            },
            y: {
                stacked: true,
                beginAtZero: true,
                ticks: {
                    precision: 0
                }
            }
        }
    }
});

// Render a single finding row
function renderFindingRow(finding) {
    const f = finding.finding || finding;
    const cveId = f.cve_id;
    const vulnIdType = f.vuln_id_type || 'CVE';
    const relatedCves = f.related_cves || [];
    // Normalize severity for display (capitalize properly)
    const scannerSev = normalizeSeverity(f.scanner_severity);
    const vexData = finding.vex_data;
    const rhSev = vexData ? normalizeSeverity(vexData.rh_severity) : 'N/A';
    const prob = (finding.rh_source_probability || 0) * 100;
    const verdict = finding.verdict || 'inconclusive';
    const flags = finding.flags || [];
    const remediation = finding.remediation;
    
    // Package info - use effective_package_name which includes inferred packages
    const packageName = finding.effective_package_name || f.package_name || '';
    const packageVersion = f.package_version || '';
    const imageName = f.image_name || '';
    const registry = f.registry || '';
    
    // Build full image reference for syft command
    let fullImageRef = '';
    if (registry && imageName) {
        fullImageRef = `${registry}/${imageName}`;
    } else if (imageName) {
        fullImageRef = imageName;
    }
    if (f.image_tag) {
        fullImageRef += `:${f.image_tag}`;
    }
    
    // Determine progress bar color
    let probClass = 'bg-danger';
    if (prob >= 70) probClass = 'bg-success';
    else if (prob >= 50) probClass = 'bg-warning';
    
    // Verdict badge with info icon for FP/likely FP
    let verdictBadge = '';
    let infoIcon = '';
    
    if (verdict === 'false_positive' || verdict === 'likely_false_positive') {
        // Add info icon for false positives
        infoIcon = `
            <button type="button" class="btn btn-link btn-sm p-0 ms-1" 
                    data-bs-toggle="modal" data-bs-target="#fpInfoModal"
                    onclick="setFpModalData('${escapeHtml(packageName)}', '${escapeHtml(fullImageRef)}', '${escapeHtml(cveId)}')"
                    title="How to verify this false positive">
                <i class="bi bi-info-circle text-info"></i>
            </button>
        `;
    }
    
    switch(verdict) {
        case 'true_positive':
            verdictBadge = '<span class="badge bg-success badge-verdict">True Positive</span>';
            break;
        case 'true_positive_misrated':
            verdictBadge = '<span class="badge bg-warning text-dark badge-verdict">TP Misrated</span>';
            break;
        case 'false_positive':
            verdictBadge = `<span class="badge bg-danger badge-verdict">False Positive</span>${infoIcon}`;
            break;
        case 'likely_false_positive':
            verdictBadge = `<span class="badge badge-verdict" style="background-color: #fd7e14;">Likely FP</span>${infoIcon}`;
            break;
        case 'not_applicable':
            verdictBadge = '<span class="badge bg-secondary badge-verdict">N/A</span>';
            break;
        default:
            verdictBadge = '<span class="badge bg-light text-dark badge-verdict">Inconclusive</span>';
    }
    
    // Flags - filter out "via" flags since we show that info in the ID column
    const displayFlags = flags.filter(f => !f.startsWith('[via '));
    let flagsHtml = '';
    displayFlags.slice(0, 2).forEach(flag => {
        flagsHtml += `<div class="flag-item">${escapeHtml(flag)}</div>`;
    });
    if (displayFlags.length > 2) {
        flagsHtml += `<small class="text-muted">+${displayFlags.length - 2} more</small>`;
    }
    
    // Remediation - RHSA link with fixed package info if available
    let remediationHtml = '';
    if (remediation && remediation.rhsa_url) {
        const rhsaId = remediation.rhsa_id || 'Fix Available';
        remediationHtml = `<a href="${escapeHtml(remediation.rhsa_url)}" target="_blank" class="badge bg-info text-decoration-none">
            <i class="bi bi-patch-check me-1"></i>${escapeHtml(rhsaId)}
        </a>`;
        
        // Add fixed package info if available
        const fixedPkgs = remediation.fixed_packages || [];
        if (fixedPkgs.length > 0) {
            // Find the matching package for this finding
            const matchingPkg = fixedPkgs.find(p => 
                p.name && packageName && p.name.toLowerCase() === packageName.toLowerCase()
            );
            
            if (matchingPkg) {
                remediationHtml += `<br><small class="text-muted">Fixed: ${escapeHtml(matchingPkg.name)}-${escapeHtml(matchingPkg.version)}</small>`;
            } else if (fixedPkgs.length === 1) {
                // Show the only fixed package
                const pkg = fixedPkgs[0];
                remediationHtml += `<br><small class="text-muted">Fixed: ${escapeHtml(pkg.name)}-${escapeHtml(pkg.version)}</small>`;
            } else if (fixedPkgs.length > 1) {
                // Show count with Bootstrap tooltip
                const pkgList = fixedPkgs.slice(0, 5).map(p => `${p.name}-${p.version}`).join('\n');
                const suffix = fixedPkgs.length > 5 ? `\n... and ${fixedPkgs.length - 5} more` : '';
                const tooltipContent = escapeHtml(pkgList + suffix).replace(/\n/g, '<br>');
                remediationHtml += `<br><small class="text-muted fixed-packages-tooltip" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="${tooltipContent}" style="cursor: help; text-decoration: underline dotted;">${fixedPkgs.length} packages fixed</small>`;
            }
        }
    } else if (vexData) {
        remediationHtml = '<span class="text-muted small">No fix matched</span>';
    } else {
        remediationHtml = '<span class="text-muted">-</span>';
    }
    
    // Build the vulnerability ID display
    // For RHSA-resolved findings: "CVE-xxx (via RHSA-xxx)"
    // For non-CVE findings with related CVEs: "GHSA-xxx (CVE-yyy)"
    let idDisplay = cveId;
    let idLink = `https://access.redhat.com/security/cve/${cveId}`;
    
    const originalRhsaId = f.original_rhsa_id;
    
    if (originalRhsaId) {
        // RHSA-resolved finding - show CVE with original RHSA reference
        idDisplay = `${cveId}<br><small class="text-muted">(via ${originalRhsaId})</small>`;
        idLink = `https://access.redhat.com/security/cve/${cveId}`;
    } else if (vulnIdType !== 'CVE' && relatedCves.length > 0) {
        const relatedCve = relatedCves[0];
        idDisplay = `${cveId}<br><small class="text-muted">(${relatedCve})</small>`;
        idLink = `https://access.redhat.com/security/cve/${relatedCve}`;
    } else if (vulnIdType === 'GHSA') {
        idLink = `https://github.com/advisories/${cveId}`;
    } else if (vulnIdType === 'RHSA') {
        // Unresolved RHSA - link to errata
        idLink = `https://access.redhat.com/errata/${cveId}`;
    }
    
    // Package display with version
    let packageHtml = '';
    if (packageName) {
        packageHtml = `<span class="font-monospace small">${escapeHtml(packageName)}</span>`;
        if (packageVersion) {
            packageHtml += `<br><small class="text-muted">${escapeHtml(packageVersion)}</small>`;
        }
    } else {
        packageHtml = '<span class="text-muted">-</span>';
    }
    
    // Component info (OCP namespace/deployment or image name)
    const component = f.component;
    const affectedComponents = finding.affected_components || [];
    const ocpVersion = finding.ocp_version;
    const ocpReleaseUrl = finding.ocp_release_url;
    
    // Generate unique ID for expandable rows
    const rowId = `comp-${escapeHtml(cveId)}-${escapeHtml(packageName || 'unknown')}-${Math.random().toString(36).substr(2, 9)}`;
    
    let componentHtml = '';
    let expandableRow = '';
    
    if (component) {
        // OCP component (namespace/deployment)
        componentHtml = `<span class="font-monospace small text-primary" title="OCP Component">${escapeHtml(component)}</span>`;
        
        // Show count of total affected components if multiple - make it expandable
        if (affectedComponents.length > 1) {
            componentHtml += `<br><button class="btn btn-link btn-sm p-0 text-muted component-expand-btn" 
                type="button" 
                onclick="toggleComponentRow('${rowId}')"
                aria-expanded="false"
                id="${rowId}-btn">
                <i class="bi bi-chevron-right expand-icon"></i>
                ${affectedComponents.length} components
            </button>`;
            
            // Build expandable row with component list
            const componentListHtml = affectedComponents.map(comp => 
                `<span class="badge bg-light text-dark font-monospace me-1 mb-1" style="cursor: pointer;" onclick="navigator.clipboard.writeText('${escapeHtml(comp)}')" title="Click to copy">${escapeHtml(comp)}</span>`
            ).join('');
            
            expandableRow = `
                <tr class="component-detail-row" id="${rowId}-row" style="display: none;">
                    <td colspan="9" class="bg-light border-0 py-2 px-3">
                        <div class="d-flex align-items-start">
                            <strong class="me-2 text-nowrap">Affected components:</strong>
                            <div class="d-flex flex-wrap">${componentListHtml}</div>
                            <button class="btn btn-sm btn-outline-secondary ms-auto" onclick="copyAllComponents('${rowId}')" title="Copy all">
                                <i class="bi bi-clipboard"></i> Copy all
                            </button>
                        </div>
                        <input type="hidden" id="${rowId}-data" value="${escapeHtml(affectedComponents.join('\n'))}">
                    </td>
                </tr>
            `;
        }
        
        // Show OCP version if available
        if (ocpVersion) {
            let versionDisplay = `<small class="text-muted">${escapeHtml(ocpVersion)}</small>`;
            if (ocpReleaseUrl) {
                versionDisplay = `<a href="${escapeHtml(ocpReleaseUrl)}" target="_blank" class="text-decoration-none small">
                    ${escapeHtml(ocpVersion)}
                </a>`;
            }
            componentHtml += `<br>${versionDisplay}`;
        }
    } else if (imageName) {
        // Regular image - show image name
        let displayName = imageName;
        // Truncate if too long
        if (displayName.length > 30) {
            displayName = '...' + displayName.slice(-27);
        }
        componentHtml = `<span class="font-monospace small" title="${escapeHtml(imageName)}">${escapeHtml(displayName)}</span>`;
    } else {
        componentHtml = '<span class="text-muted">-</span>';
    }

    // Validation steps — deduplicate by (CVE, package, verdict)
    const validationSteps = finding.validation_steps || [];
    const pkgName = f.package_name || '';
    const stepsKey = `${cveId}|${pkgName}|${verdict}`;
    let stepsToggle = '';
    let stepsRow = '';
    if (validationSteps.length > 0 && !window._seenStepsKeys.has(stepsKey)) {
        window._seenStepsKeys.add(stepsKey);
        const rowId = `steps-${cveId.replace(/[^a-zA-Z0-9]/g, '-')}-${pkgName.replace(/[^a-zA-Z0-9]/g, '-')}`;
        stepsToggle = `<button class="btn btn-outline-secondary btn-sm mt-1" onclick="toggleSteps('${rowId}')" title="Show validation steps"><i class="bi bi-list-check"></i> ${validationSteps.length} step${validationSteps.length > 1 ? 's' : ''}</button>`;

        let stepsHtml = '<ol class="mb-0 ps-3">';
        validationSteps.forEach(step => {
            stepsHtml += `<li class="mb-2"><strong>${escapeHtml(step.title)}</strong>`;
            if (step.command) {
                stepsHtml += `<br><code class="text-success">$ ${escapeHtml(step.command)}</code>`;
            }
            if (step.expected) {
                stepsHtml += `<br><small class="text-muted"><strong>Expected:</strong> ${escapeHtml(step.expected)}</small>`;
            }
            if (step.fail_condition) {
                stepsHtml += `<br><small class="text-danger"><strong>Fail if:</strong> ${escapeHtml(step.fail_condition)}</small>`;
            }
            if (step.context) {
                stepsHtml += `<br><small class="text-secondary"><strong>Why:</strong> ${escapeHtml(step.context)}</small>`;
            }
            if (step.reference) {
                stepsHtml += `<br><small class="text-info"><strong>Ref:</strong> <a href="${escapeHtml(step.reference)}" target="_blank" class="text-info">${escapeHtml(step.reference)} <i class="bi bi-box-arrow-up-right"></i></a></small>`;
            }
            stepsHtml += '</li>';
        });
        stepsHtml += '</ol>';

        stepsRow = `<tr id="${rowId}" style="display:none;"><td colspan="7" class="bg-light border-start border-4 border-warning ps-3">${stepsHtml}</td></tr>`;
    }

    return `
        <tr>
            <td>
                <a href="${idLink}" target="_blank" class="text-decoration-none">
                    ${idDisplay}
                    <i class="bi bi-box-arrow-up-right ms-1 small"></i>
                </a>
                ${stepsToggle}
            </td>
            <td>${packageHtml}</td>
            <td>${componentHtml}</td>
            <td><span class="severity-${scannerSev.toLowerCase()}">${scannerSev}</span></td>
            <td>${vexData ? `<span class="severity-${rhSev.toLowerCase()}">${rhSev}</span>` : '<span class="text-muted">N/A</span>'}</td>
            <td>${remediationHtml}</td>
            <td>
                <div class="progress" style="height: 20px; min-width: 60px;">
                    <div class="progress-bar ${probClass}" style="width: ${prob}%">${prob.toFixed(0)}%</div>
                </div>
            </td>
            <td>${verdictBadge}</td>
            <td>${flagsHtml}</td>
        </tr>
        ${expandableRow}
        ${stepsRow}
    `;
}

// Escape HTML to prevent XSS
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Toggle component detail row visibility
function toggleComponentRow(rowId) {
    const row = document.getElementById(rowId + '-row');
    const btn = document.getElementById(rowId + '-btn');

    if (row && btn) {
        const isHidden = row.style.display === 'none';
        row.style.display = isHidden ? 'table-row' : 'none';
        btn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');

        // Update icon
        const icon = btn.querySelector('.expand-icon');
        if (icon) {
            icon.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
        }
    }
}

// Copy all components to clipboard
function copyAllComponents(rowId) {
    const dataInput = document.getElementById(rowId + '-data');
    if (dataInput) {
        navigator.clipboard.writeText(dataInput.value).then(() => {
            // Show brief feedback
            const btn = event.target.closest('button');
            const originalHtml = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check"></i> Copied!';
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-success');
            setTimeout(() => {
                btn.innerHTML = originalHtml;
                btn.classList.remove('btn-success');
                btn.classList.add('btn-outline-secondary');
            }, 1500);
        });
    }
}

// Normalize severity for display (capitalize properly)
function normalizeSeverity(severity) {
    if (!severity) return 'Unknown';
    // Capitalize first letter, lowercase rest
    return severity.charAt(0).toUpperCase() + severity.slice(1).toLowerCase();
}

// Toggle validation steps visibility
function toggleSteps(rowId) {
    const row = document.getElementById(rowId);
    if (row) {
        row.style.display = row.style.display === 'none' ? '' : 'none';
    }
}

// Track which validation step groups have already been rendered
window._seenStepsKeys = new Set();

// Load findings from API
async function loadFindings() {
    // Reset dedup tracker on each load/filter/page change
    window._seenStepsKeys = new Set();
    const offset = (currentPage - 1) * pageSize;
    const tbody = document.getElementById('findingsBody');

    try {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading...</td></tr>';
        
        let url = `/api/report/${reportId}/findings?filter_type=${currentFilter}&limit=${pageSize}&offset=${offset}`;
        if (currentSeverity) {
            url += `&severity=${currentSeverity}&severity_source=${currentSeveritySource}`;
        }
        const response = await fetch(url);
        const data = await response.json();
        
        filteredTotal = data.total;
        
        // Update count display
        const hasFilters = currentFilter || currentSeverity;
        document.getElementById('findingsCount').textContent = 
            hasFilters ? `(${filteredTotal} matching / ${reportSummary.total_findings} total)` : `(${filteredTotal} total)`;
        
        // Render findings
        if (data.findings.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4 text-muted">No findings match the selected filter</td></tr>';
        } else {
            tbody.innerHTML = data.findings.map(renderFindingRow).join('');
            
            // Initialize Bootstrap tooltips for newly rendered content
            const tooltipTriggerList = tbody.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
        }
        
        // Update pagination
        updatePagination();
        
    } catch (error) {
        console.error('Error loading findings:', error);
        tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4 text-danger">Error loading findings</td></tr>';
    }
}

// Update pagination controls
function updatePagination() {
    const totalPages = Math.ceil(filteredTotal / pageSize);
    const pagination = document.getElementById('pagination');
    const info = document.getElementById('paginationInfo');
    
    const start = Math.min((currentPage - 1) * pageSize + 1, filteredTotal);
    const end = Math.min(currentPage * pageSize, filteredTotal);
    info.textContent = `Showing ${start}-${end} of ${filteredTotal}`;
    
    let html = '';
    
    // Previous button
    html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="goToPage(${currentPage - 1}); return false;">«</a>
    </li>`;
    
    // Page numbers with ellipsis
    const maxVisible = 7;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
    let endPage = Math.min(totalPages, startPage + maxVisible - 1);
    
    if (endPage - startPage < maxVisible - 1) {
        startPage = Math.max(1, endPage - maxVisible + 1);
    }
    
    if (startPage > 1) {
        html += `<li class="page-item"><a class="page-link" href="#" onclick="goToPage(1); return false;">1</a></li>`;
        if (startPage > 2) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
    }
    
    for (let i = startPage; i <= endPage; i++) {
        html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
            <a class="page-link" href="#" onclick="goToPage(${i}); return false;">${i}</a>
        </li>`;
    }
    
    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
        html += `<li class="page-item"><a class="page-link" href="#" onclick="goToPage(${totalPages}); return false;">${totalPages}</a></li>`;
    }
    
    // Next button
    html += `<li class="page-item ${currentPage === totalPages || totalPages === 0 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="goToPage(${currentPage + 1}); return false;">»</a>
    </li>`;
    
    pagination.innerHTML = html;
}

// Go to specific page
function goToPage(page) {
    const totalPages = Math.ceil(filteredTotal / pageSize);
    if (page < 1 || page > totalPages) return;
    currentPage = page;
    loadFindings();
}

// Filter change handler
document.getElementById('filterSelect').addEventListener('change', function() {
    currentFilter = this.value;
    currentPage = 1;  // Reset to first page
    loadFindings();
});

// Severity filter change handler
document.getElementById('severitySelect').addEventListener('change', function() {
    currentSeverity = this.value;
    currentPage = 1;  // Reset to first page
    loadFindings();
});

// Severity source change handler
document.getElementById('severitySourceSelect').addEventListener('change', function() {
    currentSeveritySource = this.value;
    currentPage = 1;  // Reset to first page
    // Only reload if a severity is selected
    if (currentSeverity) {
        loadFindings();
    }
});

// Page size change handler
document.getElementById('pageSizeSelect').addEventListener('change', function() {
    pageSize = parseInt(this.value);
    currentPage = 1;  // Reset to first page
    loadFindings();
});

// Initial load
document.addEventListener('DOMContentLoaded', loadFindings);
</script>
{% endblock %}