<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PatchLeaks - Library</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;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

.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;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

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

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #c0392b);
    border: none;
    box-shadow: 0 4px 15px rgba(231,76,60,0.3);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(231,76,60,0.4);
}

.btn-info {
    background: linear-gradient(135deg, var(--info-color), #2980b9);
    border: none;
    box-shadow: 0 4px 15px rgba(52,152,219,0.3);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
}

.btn-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(52,152,219,0.4);
}

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

.alert-success {
    border-left-color: var(--success-color);
    background: rgba(0,184,148,0.1);
}

.alert-info {
    border-left-color: var(--info-color);
    background: rgba(52,152,219,0.1);
}

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

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

.badge-success {
    background: var(--success-color);
    color: white;
}

.badge-danger {
    background: var(--danger-color);
    color: white;
}

.badge-warning {
    background: var(--warning-color);
    color: white;
}

.badge-info {
    background: var(--info-color);
    color: white;
}

.repo-card {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.repo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.repo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.repo-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-blue);
}

.repo-url {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.repo-meta {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.repo-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-active {
    background: var(--success-color);
    animation: pulse 2s infinite;
}

.status-inactive {
    background: var(--danger-color);
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: rgba(255,255,255,0.7);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.repo-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

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

@media (max-width: 768px) {
    .repo-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .repo-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .repo-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .main-content {
        padding: 1rem;
    }
}
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" href="/products">Product Analysis</a></li>
                    <li class="nav-item"><a class="nav-link active" 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">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="display-5 fw-bold mb-3">
                            <i class="fas fa-books me-3"></i>Repository Library
                        </h2>
                        <p class="lead text-muted">Manage repositories for automatic security analysis</p>
                    </div>
                    <div>
                        <form method="POST" action="/library/check-now" class="d-inline">
                            <button type="submit" class="btn btn-info">
                                <i class="fas fa-sync-alt me-2"></i>Check Now
                            </button>
                        </form>
                    </div>
                </div>
            </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">

                
                <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-plus me-2"></i>Add Repository
                            </h5>
                        </div>
                        <div class="card-body">
                            <form method="POST">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="name" class="form-label">Repository Name</label>
                                            <input type="text" class="form-control" id="name" name="name" 
                                                   placeholder="e.g., Rocket.Chat" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="repo_url" class="form-label">Repository URL</label>
                                            <input type="url" class="form-control" id="repo_url" name="repo_url" 
                                                   placeholder="https://github.com/owner/repo" required>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="ai_service" class="form-label">AI Service</label>
                                            <select class="form-select" id="ai_service" name="ai_service" required>
                                                <option value="ollama">Ollama</option>
                                                <option value="openai">OpenAI</option>
                                                <option value="deepseek">DeepSeek</option>
                                                <option value="claude">Claude</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="mb-3">
                                            <label for="cpe" class="form-label">CPE (Optional)</label>
                                            <input type="text" class="form-control" id="cpe" name="cpe" 
                                                   placeholder="cpe:2.3:a:rocket.chat:rocket.chat:*">
                                            <small class="form-text text-muted">For CVE-based analysis</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-plus me-2"></i>Add Repository
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    
                    {{if .LibraryRepos}}
                        <div class="row">
                            {{range .LibraryRepos}}
                                <div class="col-12">
                                    <div class="repo-card">
                                        <div class="repo-header">
                                            <div>
                                                <div class="repo-name">
                                                    <span class="status-indicator {{if .AutoScan}}status-active{{else}}status-inactive{{end}}"></span>
                                                    {{.Name}}
                                                </div>
                                                <div class="repo-url">
                                                    <i class="fab fa-github me-2"></i>
                                                    <a href="{{.RepoURL}}" target="_blank" class="text-decoration-none">
                                                        {{.RepoURL}}
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="repo-actions">
                                                <form method="POST" action="/library/toggle/{{.ID}}" class="d-inline">
                                                    <button type="submit" class="btn btn-sm btn-{{if .AutoScan}}warning{{else}}success{{end}}">
                                                        <i class="fas fa-{{if .AutoScan}}pause{{else}}play{{end}} me-1"></i>
                                                        {{if .AutoScan}}Pause{{else}}Resume{{end}}
                                                    </button>
                                                </form>
                                                <form method="POST" action="/library/delete/{{.ID}}" class="d-inline">
                                                    <button type="submit" class="btn btn-sm btn-danger" 
                                                            onclick="return confirm('Are you sure you want to remove this repository?')">
                                                        <i class="fas fa-trash me-1"></i>Remove
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                        
                                        <div class="repo-meta">
                                            <div class="repo-meta-item">
                                                <i class="fas fa-robot"></i>
                                                <span>AI: {{.AIService}}</span>
                                            </div>
                                            <div class="repo-meta-item">
                                                <i class="fas fa-tag"></i>
                                                <span>Version: {{if .LastVersion}}{{.LastVersion}}{{else}}Not checked{{end}}</span>
                                            </div>
                                            {{if .CPE}}
                                            <div class="repo-meta-item">
                                                <i class="fas fa-shield-alt"></i>
                                                <span>CPE: {{.CPE}}</span>
                                            </div>
                                            {{end}}
                                            <div class="repo-meta-item">
                                                <i class="fas fa-clock"></i>
                                                <span>Last checked: </span>
                                            </div>
                                            <div class="repo-meta-item">
                                                <i class="fas fa-calendar-plus"></i>
                                                <span>Added: </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {{end}}
                        </div>
                    {{else}}
                        <div class="empty-state">
                            <i class="fas fa-books"></i>
                            <h3>No repositories in library</h3>
                            <p>Add repositories to start automatic security analysis when new versions are released.</p>
                        </div>
                    {{end}}
                </div>
            </div>
        </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="#library">Library</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 listItems = document.querySelectorAll('.list-group-item');
        listItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            item.style.transition = 'all 0.3s ease';
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
    </script>
</body>
</html>
