<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PatchLeaks - Saved Reports</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-blue: #4169E1;
            --accent-color: #6c5ce7;
            --code-bg: #0a0e14;
            --section-spacing: 100px;
            --dark-bg: #0a0b10;
            --card-bg: #121520;
            --success-color: #00b894;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #3498db;
        }

        body {
            background: linear-gradient(135deg, var(--dark-bg) 0%, #16171d 100%);
            color: #f8f9fa;
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            overflow-x: hidden;
        }

        .navbar {
            background: rgba(10, 11, 16, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding: 1rem 2rem;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        .navbar.scrolled {
            padding: 0.5rem 2rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.7);
            margin: 0 0.5rem;
            position: relative;
            transition: all 0.3s ease;
        }

        .nav-link:hover {
            color: #fff;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-color));
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .main-container {
            padding-top: 6rem;
            padding-bottom: 3rem;
        }

        .card {
            background: var(--card-bg);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            box-shadow: 0 15px 30px -10px rgba(0,0,0,0.5);
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 20px 40px -15px rgba(0,0,0,0.6);
            transform: translateY(-5px);
            border-color: rgba(65,105,225,0.2);
        }

        .card-header {
            background: rgba(255,255,255,0.03);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding: 1.2rem 1.5rem;
        }

        .form-control {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #f8f9fa;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            background: rgba(255,255,255,0.08);
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.25rem rgba(65,105,225,0.2);
            color: #fff;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            border: none;
            box-shadow: 0 4px 15px rgba(65,105,225,0.3);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(65,105,225,0.4);
        }

        .btn-outline-primary {
            border: 2px solid var(--primary-blue);
            color: var(--primary-blue);
            background: transparent;
            transition: all 0.3s ease;
        }

        .btn-outline-primary:hover {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(65,105,225,0.4);
            color: #fff;
        }

        .section-bg-accent {
            position: absolute;
            width: 30vw;
            height: 30vw;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary-blue), var(--accent-color));
            filter: blur(120px);
            opacity: 0.1;
            z-index: -1;
        }

        .section-bg-accent.left {
            left: -15vw;
            top: 5%;
        }

        .section-bg-accent.right {
            right: -15vw;
            bottom: 5%;
        }

        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.05);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(65,105,225,0.5);
        }

        .report-card {
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
        }

        .report-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            background: rgba(255,255,255,0.05);
        }

        .report-header {
            padding: 1.2rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            background: rgba(255,255,255,0.02);
        }

        .report-body {
            padding: 1.2rem;
        }

        .report-footer {
            padding: 1rem;
            border-top: 1px solid rgba(255,255,255,0.05);
            background: rgba(255,255,255,0.02);
        }

        .report-title {
            color: #fff;
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .report-meta {
            color: rgba(255,255,255,0.6);
            font-size: 0.85rem;
        }

        .report-stats {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .stat-item {
            background: rgba(255,255,255,0.05);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stat-item i {
            color: var(--primary-blue);
        }

        .badge-ai {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-color));
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-folder {
            background: linear-gradient(135deg, var(--info-color), #45aaf2);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-library {
            background: linear-gradient(135deg, #9b59b6, #e056fd);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .badge-product {
            background: linear-gradient(135deg, var(--success-color), #20bf6b);
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .search-container {
            position: relative;
            margin-bottom: 2rem;
        }

        .search-container i {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255,255,255,0.5);
        }

        .search-input {
            padding-left: 2.5rem;
            height: 3rem;
            font-size: 1rem;
            border-radius: 8px;
        }

        .filter-btn {
            border: 2px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.7);
            background: transparent;
            transition: all 0.3s ease;
            border-radius: 8px;
            padding: 0.5rem 1rem;
        }

        .filter-btn:hover, .filter-btn.active {
            background: rgba(228, 206, 233, 0.1);
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }

        .badge-glow {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
            display: inline-block;
        }

        .badge-glow:hover {
            max-width: none;
            white-space: normal;
            overflow: visible;
        }

        .fw-bold, .report-title, h1, h2, h3, h4, h5, h6 {
            color: #fff;
        }
        
        .nav-link.active {
            color: var(--primary-blue) !important;
            font-weight: 500;
        }

        .nav-link.active::after {
            width: 100%;
            background: var(--primary-blue);
        }

        .text-muted {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        footer {
            background: linear-gradient(180deg, rgba(18, 21, 32, 0) 0%, rgba(18, 21, 32, 1) 100%);
            position: relative;
            overflow: hidden;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0));
        }

        .footer-heading {
            color: white;
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 0.75rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.2s ease;
            font-size: 0.9rem;
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--primary-blue);
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.05);
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--primary-blue);
            color: white;
            transform: translateY(-3px);
        }

        .footer-newsletter {
            background: rgba(65, 105, 225, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(65, 105, 225, 0.1);
        }

        .footer-bottom {
            font-size: 0.85rem;
        }

        @media (max-width: 767.98px) {
            .footer-heading {
                margin-bottom: 1rem;
                font-size: 0.95rem;
            }
            
            .footer-links li {
                margin-bottom: 0.5rem;
            }
            
            .footer-links a {
                font-size: 0.85rem;
            }
            
            .footer-newsletter {
                padding: 1.5rem !important;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <i class="fas fa-shield-alt me-2 text-primary"></i>
                <span class="fw-bold text-white">PatchLeaks</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars text-light"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/dashboard">Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/folder">Folder Analysis</a></li>
                    <li class="nav-item"><a class="nav-link" href="/products">Product Analysis</a></li>
                    <li class="nav-item"><a class="nav-link" href="/library">Library</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ai-settings">AI Analysis</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/reports">Reports</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="section-bg-accent left"></div>
    <div class="section-bg-accent right"></div>

    <div class="container main-container">
        <div class="row mb-4">
            <div class="col-lg-8 col-md-10 mx-auto">
                <h2 class="display-5 fw-bold mb-3">Saved Reports</h2>
                <p class="lead text-muted">View and manage your saved security patch analyses</p>
            </div>
        </div>

        
        {{if .FlashMessages}}
        <div class="container mb-4">
            {{range .FlashMessages}}
            <div class="alert alert-{{if eq .Category "error"}}danger{{else}}{{.Category}}{{end}} alert-dismissible fade show">
                <i class="fas fa-{{if or (eq .Category "error") (eq .Category "danger")}}exclamation-triangle{{else if eq .Category "success"}}check-circle{{else}}info-circle{{end}} me-2"></i>
                {{.Message}}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
            {{end}}
        </div>
        {{end}}

        <div class="row mb-4">
            <div class="col-12">
            <div class="search-container">
            <i class="fas fa-search"></i>
            <input type="text" class="form-control search-input" id="searchReports" placeholder="Search reports by name, product, or folder path...">
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex gap-2 flex-wrap">
            <button class="filter-btn active" data-filter="all">All Reports</button>
            <button class="filter-btn" data-filter="product">Product Analysis</button>
            <button class="filter-btn" data-filter="library">Library Analysis</button>
            <button class="filter-btn" data-filter="folder">Folder Analysis</button>
            <button class="filter-btn" data-filter="ai">AI Enabled</button>
            <button type="button" class="btn btn-outline-info filter-btn" data-filter="cve">CVE Match</button>
        </div>
    </div>
</div>

<div class="row" id="reportsContainer">
    {{range .Reports}}
    <div class="col-lg-6 mb-4" 
         data-type="{{if (index .Meta.Params "product")}}product{{else if or (eq .Meta.Source "library") (eq .Meta.Source "library_auto")}}library{{else}}folder{{end}}"
         data-ai="{{if .Meta.AIEnabled}}yes{{else}}no{{end}}"
         data-cve="{{if (index .Meta.Params "cve_ids")}}yes{{else}}no{{end}}"
         data-search="{{.Meta.Params}}">
        <div class="report-card">
            <div class="report-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        {{if (index .Meta.Params "product")}}
                        <span class="badge-product me-2">
                            <i class="fas fa-cube me-1"></i>Product
                        </span>
                        {{if eq .Meta.Source "products_bulk"}}
                        <span class="badge bg-info text-dark me-2">
                            <i class="fas fa-layer-group me-1"></i>Bulk
                        </span>
                        {{end}}
                        {{else if or (eq .Meta.Source "library") (eq .Meta.Source "library_auto")}}
                        <span class="badge-library me-2">
                            <i class="fas fa-book me-1"></i>Library
                        </span>
                        {{else}}
                        <span class="badge-folder me-2">
                            <i class="fas fa-folder me-1"></i>Folder
                        </span>
                        {{end}}
                        
                        {{if .Meta.AIEnabled}}
                        <span class="badge-ai">
                            <i class="fas fa-robot me-1"></i>AI Enabled
                        </span>
                        {{end}}
                    </div>
                    <div class="report-meta">
                        <i class="far fa-calendar-alt me-1"></i>
                        {{if eq .Meta.Status "running"}}
                        <span class="badge bg-warning text-dark ms-2"><i class="fas fa-spinner fa-spin me-1"></i>In Progress</span>
                        {{else}}
                        <span class="badge bg-success ms-2"><i class="fas fa-check-circle me-1"></i>Completed</span>
                        {{end}}
                    </div>
                </div>
            </div>
            <div class="report-body">
                <h5 class="report-title">
                    {{if or (eq .Meta.Source "library_auto") (eq .Meta.Source "cve_auto")}}
                        <span class="badge bg-info me-2"><i class="fas fa-sync-alt me-1"></i>Periodic</span>
                        {{(index .Meta.Params "repo_name")}}
                        <small class="d-block text-muted mt-1">
                            {{ (index .Meta.Params "old_version") }} → {{ (index .Meta.Params "new_version") }}
                        </small>
                    {{else if (index .Meta.Params "product")}}
                        {{(index .Meta.Params "product")}} Analysis
                        {{if eq .Meta.Source "products_bulk"}}
                        <small class="d-block text-muted mt-1">
                            {{length (index .Meta.Params "bulk_pairs")}} comparisons aggregated
                        </small>
                        {{else}}
                        <small class="d-block text-muted mt-1">
                            {{ (index .Meta.Params "old_version") }} → 
                            {{ (index .Meta.Params "new_version") }}
                        </small>
                        {{end}}
                    {{else}}
                        Folder Analysis
                        <small class="d-block text-muted mt-1">
                            {{(index .Meta.Params "old_folder")}} → 
                            {{(index .Meta.Params "new_folder")}}
                        </small>
                    {{end}}
                </h5>
            
            <div class="report-stats">
                <div class="stat-item">
                    <i class="fas fa-file-code"></i>
                    <span>{{length .Results}} Files</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-bug"></i>
                    <span>{{.VulnCount}} Vulnerabilities</span>
                </div>
                {{if (index .Meta.Params "cve_ids")}}
                <div class="stat-item">
                    <i class="fas fa-bug text-danger"></i>
                    <span class="badge bg-danger badge-glow">{{ (index .Meta.Params "cve_ids") }}</span>
                </div>
                {{end}}
                {{if (index .Meta.Params "extension")}}
                <div class="stat-item">
                    <i class="fas fa-filter"></i>
                    <span>{{ (index .Meta.Params "extension") }}</span>
                </div>
                {{end}}
            </div>

            {{if eq .Meta.Source "products_bulk"}}
            {{with index .Meta.Params "bulk_summary"}}
            <div class="mt-4">
                <h6 class="text-white-50 mb-3"><i class="fas fa-layer-group me-2"></i>Comparison Details</h6>
                {{range .}}
                <div class="stat-item">
                    <span class="stat-name">
                        <i class="fas fa-code-branch text-primary me-2"></i>
                        {{index . "new_version"}} → {{index . "old_version"}}
                    </span>
                    {{if eq (index . "status") "completed"}}
                    <span class="stat-value">
                        {{index . "file_count"}} files / {{index . "vuln_count"}} vulns
                    </span>
                    {{else if eq (index . "status") "error"}}
                    <span class="stat-value text-warning">
                        Error
                    </span>
                    {{else}}
                    <span class="stat-value text-muted">
                        {{index . "status"}}
                    </span>
                    {{end}}
                </div>
                {{if and (eq (index . "status") "error") (index . "error")}}
                <p class="text-warning small ms-2 mb-2">{{index . "error"}}</p>
                {{end}}
                {{end}}
            </div>
            {{end}}
            {{end}}
        </div>
        <div class="report-footer">
            <div class="d-flex justify-content-between align-items-center">
                <a href="/analysis/{{.ID}}" class="btn btn-outline-primary">
                    <i class="fas fa-eye me-2"></i>View Report
                </a>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-secondary copy-link" data-id="{{.ID}}">
                        <i class="fas fa-link me-1"></i>Copy Link
                    </button>
                    <form method="POST" action="/delete-analysis/{{.ID}}" style="display:inline;">
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this analysis?');">
                            <i class="fas fa-trash me-1"></i>Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{end}}

{{if not .Reports}}
<div class="col-12 text-center py-5">
    <i class="fas fa-folder-open text-muted mb-3" style="font-size: 4rem;"></i>
    <h4 class="text-muted">No saved reports found</h4>
    <p class="text-muted">Run an analysis and save it to see it here</p>
</div>
{{end}}
</div>
</div>

<footer class="py-5 mt-5">
<div class="container">
<div class="row g-4">
    <div class="col-lg-4 col-md-6">
        <div class="footer-brand mb-4">
            <a href="#" class="d-flex align-items-center text-decoration-none">
                <i class="fas fa-shield-alt fs-3 me-2 text-primary"></i>
                <span class="fs-4 fw-bold text-white">PatchLeaks</span>
            </a>
        </div>
        <p class="text-muted mb-4">Advanced security patch analysis system for enterprise applications. Detect vulnerabilities before they become threats.</p>
        <div class="footer-social d-flex gap-3">
            <a href="#" class="social-link" aria-label="GitHub">
                <i class="fab fa-github"></i>
            </a>
            <a href="#" class="social-link" aria-label="Twitter">
                <i class="fab fa-twitter"></i>
            </a>
            <a href="#" class="social-link" aria-label="LinkedIn">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="#" class="social-link" aria-label="Discord">
                <i class="fab fa-discord"></i>
            </a>
        </div>
    </div>
    
    <div class="col-lg-2 col-md-6 col-6">
        <h5 class="footer-heading">Products</h5>
        <ul class="footer-links">
            <li><a href="#folder-analysis">Folder Analysis</a></li>
            <li><a href="#product-analysis">Product Analysis</a></li>
            <li><a href="#ai-analysis">AI Analysis</a></li>
            <li><a href="#reports">Reports</a></li>
        </ul>
    </div>
    
    <div class="col-lg-2 col-md-6 col-6">
        <h5 class="footer-heading">Resources</h5>
        <ul class="footer-links">
            <li><a href="#">Documentation</a></li>
            <li><a href="#">API Reference</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
    
    <div class="col-lg-2 col-md-6 col-6">
        <h5 class="footer-heading">Company</h5>
        <ul class="footer-links">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Partners</a></li>
        </ul>
    </div>
    
    <div class="col-lg-2 col-md-6 col-6">
        <h5 class="footer-heading">Legal</h5>
        <ul class="footer-links">
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">Compliance</a></li>
        </ul>
    </div>
</div>

<div class="footer-newsletter mt-5 p-4">
    <div class="row align-items-center">
        <div class="col-lg-5 mb-4 mb-lg-0">
            <h5 class="text-white mb-1">Stay updated</h5>
            <p class="text-muted mb-0">Get the latest security updates and news</p>
        </div>
        <div class="col-lg-7">
            <form class="d-flex flex-column flex-sm-row gap-2">
                <input type="email" class="form-control" placeholder="Enter your email" aria-label="Email">
                <button type="submit" class="btn btn-primary">Subscribe</button>
            </form>
        </div>
    </div>
</div>

<div class="footer-bottom d-flex flex-column flex-md-row justify-content-between align-items-center mt-5 pt-4 border-top border-secondary">
    <p class="mb-3 mb-md-0 text-muted">© 2025 PatchLeaks. All rights reserved.</p>
    <div class="d-flex gap-3 flex-wrap">
        <a href="#" class="text-muted text-decoration-none small">Privacy Policy</a>
        <span class="text-muted d-none d-md-inline">•</span>
        <a href="#" class="text-muted text-decoration-none small">Terms of Service</a>
        <span class="text-muted d-none d-md-inline">•</span>
        <a href="#" class="text-muted text-decoration-none small">Cookie Settings</a>
    </div>
</div>
</div>
</footer>

<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/notifications.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
} else {
    navbar.classList.remove('scrolled');
}
});

const searchInput = document.getElementById('searchReports');
searchInput.addEventListener('input', filterReports);

document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', function() {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    this.classList.add('active');
    filterReports();
});
});

document.querySelectorAll('.copy-link').forEach(btn => {
btn.addEventListener('click', function() {
    const reportId = this.dataset.id;
    const url = `${window.location.origin}/analysis/${reportId}`;
    
    navigator.clipboard.writeText(url).then(() => {
        const originalText = this.innerHTML;
        this.innerHTML = '<i class="fas fa-check me-1"></i>Copied!';
        
        setTimeout(() => {
            this.innerHTML = originalText;
        }, 2000);
    });
});
});

function filterReports() {
const searchTerm = searchInput.value.toLowerCase();
const activeFilter = document.querySelector('.filter-btn.active').dataset.filter;

document.querySelectorAll('#reportsContainer > div').forEach(report => {
    const type = report.dataset.type;
    const ai = report.dataset.ai;
    const cve = report.dataset.cve;
    const searchText = report.dataset.search.toLowerCase();
    
    let showByFilter = true;
    if (activeFilter === 'product') {
        showByFilter = type === 'product';
    } else if (activeFilter === 'library') {
        showByFilter = type === 'library';
    } else if (activeFilter === 'folder') {
        showByFilter = type === 'folder';
    } else if (activeFilter === 'ai') {
        showByFilter = ai === 'yes';
    } else if (activeFilter === 'cve') {
        showByFilter = cve === 'yes';
    }
    
    const showBySearch = searchTerm === '' || searchText.includes(searchTerm);
    
    report.style.display = (showByFilter && showBySearch) ? 'block' : 'none';
});
}
});
</script>
</body>
</html>
