<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PatchLeaks - Folder Analysis</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;
        }

        .code-block {
            background: var(--code-bg);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            padding: 1rem;
            font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.875rem;
            overflow: auto;
            white-space: pre-wrap;
            color: #f8f9fa;
        }

        .diff-add {
            color: #25c97c;
            background-color: rgba(37, 201, 124, 0.1);
            display: block;
            padding: 2px 4px;
        }

        .diff-remove {
            color: #ff5757;
            background-color: rgba(255, 87, 87, 0.1);
            display: block;
            padding: 2px 4px;
        }

        .context-line {
            color: #a2abb8;
            display: block;
            padding: 2px 4px;
        }

        .ellipsis {
            color: #8a93a2;
            font-style: italic;
            padding: 2px 4px;
            display: block;
        }

        .collapsible-header {
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .collapsible-header:hover {
            background-color: rgba(255,255,255,0.05);
        }

        .chevron {
            transition: transform 0.2s;
        }

        .collapsed .chevron {
            transform: rotate(180deg);
        }

        .ai-response {
            background: rgba(243, 156, 18, 0.1);
            border-left: 4px solid var(--warning-color);
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 4px;
        }

        .vuln-status-badge {
            font-size: 0.9rem;
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
        }

        .cve-result {
            background-color: rgba(108, 92, 231, 0.1);
            border-left: 4px solid var(--accent-color);
            padding: 1rem;
            margin-top: 1rem;
        }

        details summary {
            cursor: pointer;
            color: #a2abb8;
            transition: color 0.3s;
        }

        details summary:hover {
            color: #fff;
        }

        details[open] summary {
            margin-bottom: 0.5rem;
            color: var(--primary-blue);
        }

        .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;
        }

        .form-control:read-only {
            background: rgba(255,255,255,0.03);
        }

        .form-check-input {
            background-color: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.2);
        }

        .form-check-input:checked {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.25rem rgba(65,105,225,0.2);
        }

        .form-label {
            color: rgba(255,255,255,0.8);
        }
        pre {
        color: #f8f9fa;
        }

        .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;
        }

        .btn-outline-secondary {
            border: 2px solid rgba(255,255,255,0.2);
            color: rgba(255,255,255,0.7);
            background: transparent;
            transition: all 0.3s ease;
        }

        .btn-outline-secondary:hover {
            border-color: rgba(255,255,255,0.3);
            color: #fff;
            transform: translateY(-2px);
        }

        .btn-outline-secondary.active {
            background: rgba(255,255,255,0.1);
            color: #fff;
            border-color: rgba(255,255,255,0.3);
        }

        .btn-outline-info {
            border: 2px solid var(--info-color);
            color: var(--info-color);
            background: transparent;
            transition: all 0.3s ease;
        }
        
        .btn-outline-info:hover, 
        .btn-outline-info.active {
            background: rgba(52, 152, 219, 0.1);
            color: var(--info-color);
            transform: translateY(-2px);
        }

        .btn-outline-danger {
            border: 2px solid var(--danger-color);
            color: var(--danger-color);
            background: transparent;
            transition: all 0.3s ease;
        }
        
        .btn-outline-danger:hover,
        .btn-outline-danger.active {
            background: rgba(231, 76, 60, 0.1);
            color: var(--danger-color);
            transform: translateY(-2px);
        }

        .btn-success {
            background: linear-gradient(135deg, var(--success-color), #2ecc71);
            border: none;
            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
            transition: all 0.3s ease;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 184, 148, 0.4);
        }

        .btn-warning {
            background: linear-gradient(135deg, var(--warning-color), #e67e22);
            border: none;
            color: #fff;
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
            transition: all 0.3s ease;
        }

        .btn-warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
            color: #fff;
        }

        .alert {
            border: none;
            background: rgba(255,255,255,0.05);
            border-left: 4px solid transparent;
        }

        .alert-danger {
            border-left-color: var(--danger-color);
            background: rgba(231, 76, 60, 0.1);
        }

        .badge {
            padding: 0.5em 0.8em;
            font-weight: 500;
            border-radius: 6px;
        }

        .badge-glow {
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            0% { box-shadow: 0 0 5px rgba(65,105,225,0.5); }
            100% { box-shadow: 0 0 15px rgba(65,105,225,0.8); }
        }

        .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);
        }

        .spinner {
            width: 40px;
            height: 40px;
            position: relative;
            margin: 100px auto;
        }

        .double-bounce1, .double-bounce2 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: var(--primary-blue);
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            animation: sk-bounce 2.0s infinite ease-in-out;
        }

        .double-bounce2 {
            animation-delay: -1.0s;
            background-color: var(--accent-color);
        }

        @keyframes sk-bounce {
            0%, 100% { transform: scale(0.0); }
            50% { transform: scale(1.0); }
        }

        .filter-btn.active {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }
        
        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;
            }
        }
        .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;
        }

        .fw-bold, .report-title, h1, h2, h3, h4, h5, h6 {
            color: #fff;
        }

        .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-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);
        }
    </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 active" 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" 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">Folder Analysis</h2>
                <p class="lead text-muted">Compare security patches between local directories</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="card shadow">
            <div class="card-body p-4">
                {{if .Error}}
                <div class="alert alert-danger mb-4">
                    <i class="fas fa-exclamation-triangle me-2"></i> {{.Error}}
                </div>
                {{end}}

                <form method="post" class="mb-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Old Folder Path</label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-0">
                                    <i class="fas fa-folder text-primary"></i>
                                </span>
                                <input type="text" name="old_folder" class="form-control" value="{{.OldFolder}}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">New Folder Path</label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-0">
                                    <i class="fas fa-folder-open text-primary"></i>
                                </span>
                                <input type="text" name="new_folder" class="form-control" value="{{.NewFolder}}" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">File Extension Filter</label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-0">
                                    <i class="fas fa-filter text-primary"></i>
                                </span>
                                <input type="text" name="extension" class="form-control" value="{{.Extension}}" placeholder=".php, .js, etc">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">CVE IDs (comma-separated)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-0">
                                    <i class="fas fa-bug text-primary"></i>
                                </span>
                                <input type="text" name="cve_ids" class="form-control" value="{{.CVEIDs}}" placeholder="CVE-2021-44855, CVE-2022-1234">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="enable_ai" id="enableAI" {{if .EnableAI}}checked{{end}}>
                                <label class="form-check-label" for="enableAI">Enable AI Analysis</label>
                            </div>
                            <label class="form-label">Search Keywords</label>
                            <div class="input-group">
                                <span class="input-group-text bg-dark border-0">
                                    <i class="fas fa-search text-primary"></i>
                                </span>
                                <input type="text" name="special_keywords" class="form-control" value="{{.SpecialKeywords}}" placeholder="sanitize, escape_html">
                            </div>
                        </div>
                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-search me-2"></i>Analyze Diffs
                            </button>
                        </div>
                    </div>
                </form>
                        </div>
                    </div>
                </div>

<script

>
    document.addEventListener('DOMContentLoaded', () => {
        
        const filterBtns = document.querySelectorAll('.filter-btn');
        const aiSearchInput = document.getElementById('aiSearch');
        
        if (filterBtns.length > 0) {
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    const filter = this.dataset.filter;
                    const search = aiSearchInput ? aiSearchInput.value.toLowerCase() : '';
                    
                    document.querySelectorAll('[data-vuln-status]').forEach(card => {
                        const vulnStatus = card.dataset.vulnStatus;
                        const cveMatch = card.dataset.cveMatch;
                        const aiResponse = card.dataset.aiResponse || '';
                        
                        let show = false;
                        if(filter === 'all') {
                            show = search === '' || aiResponse.includes(search);
                        } 
                        else if(filter === 'cve') {
                            show = cveMatch === 'yes' && 
                                  (search === '' || aiResponse.includes(search));
                        }
                        else if(filter === 'vuln') {
                            show = vulnStatus === 'yes' && 
                                  (search === '' || aiResponse.includes(search));
                        }
                        
                        card.style.display = show ? 'block' : 'none';
                    });
                });
            });
        }

        if (aiSearchInput) {
            aiSearchInput.addEventListener('input', () => {
                const activeBtn = document.querySelector('.filter-btn.active');
                if (activeBtn) {
                    activeBtn.click();
                }
            });
        }

        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
    });

    function saveAnalysis() {
        const saveBtn = document.querySelector('#saveSection .btn-success');
        const originalContent = saveBtn.innerHTML;
        saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Saving...';
        saveBtn.disabled = true;
        
        const analysisData = {
            enable_ai: false,
            params: {},
            results: {}
        };

        fetch('/save-analysis', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(analysisData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                if (window.notifications) {
                    window.notifications.error(data.error);
                }
            } else {
                const url = `${window.location.origin}/analysis/${data.id}`;
                document.getElementById('analysisUrl').value = url;
                document.getElementById('shareLink').style.display = 'block';
                if (window.notifications) {
                    window.notifications.success('Analysis saved successfully!');
                }
            }
            
            saveBtn.innerHTML = originalContent;
            saveBtn.disabled = false;
        })
        .catch(error => {
            console.error('Error:', error);
            if (window.notifications) {
                window.notifications.error('Failed to save analysis. Please try again.');
            }
            saveBtn.innerHTML = originalContent;
            saveBtn.disabled = false;
        });
    }

    function copyLink() {
        const copyText = document.getElementById("analysisUrl");
        copyText.select();
        document.execCommand("copy");
        
        const copyBtn = document.querySelector('#shareLink .btn');
        const originalContent = copyBtn.innerHTML;
        copyBtn.innerHTML = '<i class="fas fa-check me-2"></i>Copied!';
        
        if (window.notifications) {
            window.notifications.success('Analysis link copied to clipboard!');
        }
        
        setTimeout(() => {
            copyBtn.innerHTML = originalContent;
        }, 2000);
    }
    </script>

<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="/">Home</a></li>
                    <li><a href="/products">Product Analysis</a></li>
                    <li><a href="/library">Library</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>

</body>
</html>
