<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PatchLeaks - Product Analysis</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
.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);
}

: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, .form-select {
    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, .form-select: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);
}

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

.input-group-text {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--primary-blue);
}

#shareLink {
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
}

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);
}
pre {
    color: #f8f9fa;
}
    </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 active" 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">Product Analysis</h2>
                <p class="lead text-muted">Compare security patches between product versions</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="mb-3 d-flex justify-content-start">
            <a href="/manage-products" class="btn btn-outline-primary">
                <i class="fas fa-cogs me-2"></i>Manage Products
            </a>
        </div>

        <div class="row g-4">
            <div class="col-xl-6">
                <div class="card shadow h-100">
                    <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-0" id="singleProductForm">
                            <input type="hidden" name="form_type" value="single">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Select Product</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cube text-primary"></i>
                                        </span>
                                        <select class="form-select" name="product" id="productSelect">
                                            <option value="" {{if not .Product}}selected{{end}}>None</option>
                                            <option value="magento" {{if eq .Product "magento"}}selected{{end}}>Magento</option>
                                            {{range .Products}}
                                                {{if ne . "magento"}}
                                                <option value="{{.}}" {{if eq $.Product .}}selected{{end}}>{{.}}</option>
                                                {{end}}
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3 version-group" style="display: {{if .Product}}block{{else}}none{{end}};">
                                    <label class="form-label">Old Version</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-code-branch text-primary"></i>
                                        </span>
                                        <select class="form-select" name="old_version" id="oldVersion">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-3 version-group" style="display: {{if .Product}}block{{else}}none{{end}};">
                                    <label class="form-label">New Version</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-code-branch text-primary"></i>
                                        </span>
                                        <select class="form-select" name="new_version" id="newVersion">
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">File Extension Filter</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <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">
                                            <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">
                                            <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 w-100">
                                        <i class="fas fa-search me-2"></i>Analyze Versions
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-xl-6">
                <div class="card shadow h-100">
                    <div class="card-body p-4 d-flex flex-column">
                        <div class="mb-3">
                            <h5 class="mb-1 text-white">Bulk Product Analysis</h5>
                            <p class="text-muted small mb-0">Automatically download the latest releases and queue sequential comparisons.</p>
                        </div>
                        <form method="post" id="bulkProductForm" class="mt-auto">
                            <input type="hidden" name="form_type" value="bulk">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Select Product</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cubes text-primary"></i>
                                        </span>
                                        <select class="form-select" name="product" id="bulkProductSelect">
                                            <option value="" {{if not .BulkProduct}}selected{{end}}>None</option>
                                            <option value="magento" {{if eq .BulkProduct "magento"}}selected{{end}}>Magento</option>
                                            {{range .Products}}
                                                {{if ne . "magento"}}
                                                <option value="{{.}}" {{if eq $.BulkProduct .}}selected{{end}}>{{.}}</option>
                                                {{end}}
                                            {{end}}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Comparisons to Generate</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-layer-group text-primary"></i>
                                        </span>
                                        <input type="number" min="1" step="1" name="count" id="bulkCount"
                                               class="form-control" value="{{if gt .BulkCount 0}}{{.BulkCount}}{{else}}3{{end}}">
                                    </div>
                                    <small class="text-muted">A count of 3 compares release N vs N-1, N-1 vs N-2, and N-2 vs N-3.</small>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">File Extension Filter</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-filter text-primary"></i>
                                        </span>
                                        <input type="text" name="extension" class="form-control"
                                               value="{{.BulkExtension}}" placeholder=".php, .js, etc">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">CVE IDs (comma-separated)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-bug text-primary"></i>
                                        </span>
                                        <input type="text" name="cve_ids" class="form-control"
                                               value="{{.BulkCVEIDs}}" placeholder="CVE-2021-44855, CVE-2022-1234">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="enable_ai"
                                               id="bulkEnableAI" {{if eq .BulkEnableAI "on"}}checked{{end}}>
                                        <label class="form-check-label" for="bulkEnableAI">Enable AI Analysis</label>
                                    </div>
                                    <label class="form-label">Search Keywords</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-search text-primary"></i>
                                        </span>
                                        <input type="text" name="special_keywords" class="form-control"
                                               value="{{.BulkSpecialKeywords}}" placeholder="sanitize, escape_html">
                                    </div>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">Upcoming Comparisons Preview</label>
                                    <div class="p-3 rounded-3" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);">
                                        <div id="bulkPreviewEmpty" class="text-muted small">Select a product and count to preview comparisons.</div>
                                        <ul class="list-unstyled mb-0" id="bulkPreviewList"></ul>
                                    </div>
                                </div>

                                <div class="col-12 mt-3">
                                    <button type="submit" class="btn btn-success w-100">
                                        <i class="fas fa-bolt me-2"></i>Queue Bulk Analysis
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    <script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>

    <script>
    $(document).ready(function() {
        const versionCache = {};
        const pendingLoads = {};
        const initialOldVersion = {{json .OldVersion}};
        const initialNewVersion = {{json .NewVersion}};
        const singleOldVersion = initialOldVersion || "";
        const singleNewVersion = initialNewVersion || "";

        function loadVersions(product, onSuccess, onError) {
            if (!product) {
                if (typeof onSuccess === 'function') {
                    onSuccess([]);
                }
                return;
            }
            if (versionCache[product]) {
                if (typeof onSuccess === 'function') {
                    onSuccess(versionCache[product]);
                }
                return;
            }
            if (!pendingLoads[product]) {
                pendingLoads[product] = [];
            }
            pendingLoads[product].push({onSuccess, onError});
            if (pendingLoads[product].length > 1) {
                return;
            }
            fetch(`/get_versions/${product}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}`);
                    }
                    return response.json();
                })
                .then(versions => {
                    if (!Array.isArray(versions)) {
                        versions = [];
                    }
                    versionCache[product] = versions;
                    (pendingLoads[product] || []).forEach(handler => {
                        if (typeof handler.onSuccess === 'function') {
                            handler.onSuccess(versions);
                        }
                    });
                    delete pendingLoads[product];
                })
                .catch(error => {
                    console.error('Error fetching versions:', error);
                    (pendingLoads[product] || []).forEach(handler => {
                        if (typeof handler.onError === 'function') {
                            handler.onError(error);
                        }
                    });
                    delete pendingLoads[product];
                });
        }

        function populateVersionDropdowns(product, versions) {
            const oldSelect = $('#oldVersion');
            const newSelect = $('#newVersion');
            if (!Array.isArray(versions) || versions.length === 0) {
                oldSelect.html('<option value="">No versions found</option>').prop('disabled', true);
                newSelect.html('<option value="">No versions found</option>').prop('disabled', true);
                return;
            }
            const options = versions.map(v => `<option value="${v}">${v}</option>`).join('');
            oldSelect.html(options).prop('disabled', false);
            newSelect.html(options).prop('disabled', false);

            if (singleNewVersion && versions.includes(singleNewVersion)) {
                newSelect.val(singleNewVersion);
            }
            if (singleOldVersion && versions.includes(singleOldVersion)) {
                oldSelect.val(singleOldVersion);
            }

            if (!newSelect.val()) {
                newSelect.val(versions[0]);
            }
            if (!oldSelect.val()) {
                const fallbackIndex = Math.min(1, versions.length - 1);
                oldSelect.val(versions[fallbackIndex]);
            }
        }

        function updateBulkPreview() {
            const product = $('#bulkProductSelect').val();
            const count = parseInt($('#bulkCount').val(), 10);
            const previewList = $('#bulkPreviewList');
            const previewEmpty = $('#bulkPreviewEmpty');

            previewList.empty();
            previewEmpty.removeClass('text-warning text-danger').addClass('text-muted');

            if (!product) {
                previewEmpty.text('Select a product and count to preview comparisons.');
                return;
            }
            if (!versionCache[product]) {
                previewEmpty.text('Loading latest releases...');
                loadVersions(product, function() {
                    updateBulkPreview();
                }, function() {
                    previewEmpty.removeClass('text-muted').addClass('text-danger').text('Failed to load releases for this product.');
                });
                return;
            }
            if (!count || count < 1) {
                previewEmpty.text('Enter how many comparisons you want to queue.');
                return;
            }
            const versions = versionCache[product];
            if (versions.length < count + 1) {
                previewEmpty.removeClass('text-muted').addClass('text-warning')
                    .text(`Only ${versions.length} releases found. Need at least ${count + 1} to run ${count} comparisons.`);
                return;
            }

            previewEmpty.text('');
            for (let i = 0; i < count; i++) {
                const newer = versions[i];
                const older = versions[i + 1];
                const item = $('<li class="d-flex align-items-center mb-1 text-white-50"></li>');
                $('<i class="fas fa-code-branch me-2 text-primary"></i>').appendTo(item);
                $('<span class="text-white"></span>').text(`${newer} \u2192 ${older}`).appendTo(item);
                item.appendTo(previewList);
            }
        }

        function handleSingleProductChange(product) {
            if (product) {
                $('.version-group').show();
                loadVersions(product, function(versions) {
                    populateVersionDropdowns(product, versions);
                    updateBulkPreview();
                }, function() {
                    $('#oldVersion, #newVersion').html('<option value="">Unable to load versions</option>').prop('disabled', true);
                });
            } else {
                $('.version-group').hide();
                $('#oldVersion, #newVersion').html('').prop('disabled', true);
            }
        }

        const initialSingleProduct = $('#productSelect').val();
        if (initialSingleProduct) {
            handleSingleProductChange(initialSingleProduct);
        }

        const initialBulkProduct = $('#bulkProductSelect').val();
        if (initialBulkProduct && initialBulkProduct !== initialSingleProduct) {
            loadVersions(initialBulkProduct, function() {
                updateBulkPreview();
            });
        }

        $('#productSelect').on('change', function() {
            handleSingleProductChange($(this).val());
        });

        $('#bulkProductSelect').on('change', function() {
            const product = $(this).val();
            if (product) {
                loadVersions(product, function() {
                    updateBulkPreview();
                }, function() {
                    $('#bulkPreviewEmpty').removeClass('text-muted').addClass('text-danger').text('Failed to load releases for this product.');
                });
            } else {
                updateBulkPreview();
            }
        });

        $('#bulkCount').on('input', function() {
            updateBulkPreview();
        });

        $('#bulkProductForm').on('submit', function(e) {
            const product = $('#bulkProductSelect').val();
            const count = parseInt($('#bulkCount').val(), 10);
            if (!product || !count || count < 1) {
                e.preventDefault();
                updateBulkPreview();
                alert('Please select a product and enter a comparison count of at least 1.');
                return;
            }
            const versions = versionCache[product];
            if (!versions || versions.length < count + 1) {
                e.preventDefault();
                updateBulkPreview();
                alert('Not enough releases are available for that bulk request yet.');
                return;
            }
        });

        updateBulkPreview();
    });

    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>
