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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .service-config {
            background: rgba(255,255,255,0.02);
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1rem;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .service-icon {
            font-size: 1.5rem;
            margin-right: 0.5rem;
            color: var(--primary-blue);
        }

        .form-check-label {
            display: flex;
            align-items: center;
            font-weight: 500;
        }

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

        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" 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 active" 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">AI Settings</h2>
                <p class="lead text-muted">Configure AI services for security patch analysis</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">
                <form method="post" class="mb-4">
                    <div class="row g-4">
                        <div class="col-12">
                            <h5 class="mb-3 text-primary">Select AI Service</h5>
                            <div class="d-flex flex-wrap gap-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ai_service" value="ollama" id="ollama" {{if eq .Config.Service "ollama"}}checked{{end}}>
                                    <label class="form-check-label" for="ollama">
                                        <i class="fas fa-robot service-icon"></i>Ollama
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ai_service" value="openai" id="openai" {{if eq .Config.Service "openai"}}checked{{end}}>
                                    <label class="form-check-label" for="openai">
                                        <i class="fas fa-brain service-icon"></i>OpenAI
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ai_service" value="deepseek" id="deepseek" {{if eq .Config.Service "deepseek"}}checked{{end}}>
                                    <label class="form-check-label" for="deepseek">
                                        <i class="fas fa-search service-icon"></i>DeepSeek
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ai_service" value="claude" id="claude" {{if eq .Config.Service "claude"}}checked{{end}}>
                                    <label class="form-check-label" for="claude">
                                        <i class="fas fa-lightbulb service-icon"></i>Claude
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Temperature</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-temperature-high text-primary"></i>
                                </span>
                                <input type="number" step="0.1" name="temperature" class="form-control" value="{{index .Config.Parameters "temperature"}}" min="0" max="2" required>
                            </div>
                            <small class="text-muted">Controls randomness: lower values are more deterministic</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Context Window</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-expand-arrows-alt text-primary"></i>
                                </span>
                                <input type="number" name="num_ctx" class="form-control" value="{{index .Config.Parameters "num_ctx"}}" min="512" max="8192" required>
                            </div>
                            <small class="text-muted">Maximum tokens to consider for context</small>
                        </div>

                        <div class="col-12">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="enable_context_analysis" id="enableContextAnalysis" {{if index .Config.Parameters "enable_context_analysis"}}checked{{end}}>
                                <label class="form-check-label" for="enableContextAnalysis">
                                    <i class="fas fa-code-branch me-2 text-primary"></i>Enable Context Analysis
                                </label>
                            </div>
                            <small class="text-muted">Extract and include function definitions from codebase to provide AI with more context during analysis</small>
                        </div>

                        <div class="col-12 service-config" id="ollamaConfig" style="display: {{if eq .Config.Service "ollama"}}block{{else}}none{{end}};">
                            <h5 class="mb-3 text-primary">Ollama Configuration</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Ollama URL</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-link text-primary"></i>
                                        </span>
                                        <input type="url" name="ollama_url" class="form-control" value="{{index .Config.Ollama "url"}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Model</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cube text-primary"></i>
                                        </span>
                                        <input type="text" name="ollama_model" class="form-control" value="{{index .Config.Ollama "model"}}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 service-config" id="openaiConfig" style="display: {{if eq .Config.Service "openai"}}block{{else}}none{{end}};">
                            <h5 class="mb-3 text-primary">OpenAI Configuration</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">API Key</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-key text-primary"></i>
                                        </span>
                                        <input type="password" name="openai_key" class="form-control" value="{{index .Config.OpenAI "key"}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Model</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cube text-primary"></i>
                                        </span>
                                        <input type="text" name="openai_model" class="form-control" value="{{index .Config.OpenAI "model"}}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Base URL (Optional)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-link text-primary"></i>
                                        </span>
                                        <input type="url" name="openai_url" class="form-control" value="{{index .Config.OpenAI "base_url"}}" placeholder="https://api.openai.com/v1">
                                    </div>
                                    <small class="text-muted">Leave empty to use default OpenAI API endpoint</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 service-config" id="deepseekConfig" style="display: {{if eq .Config.Service "deepseek"}}block{{else}}none{{end}};">
                            <h5 class="mb-3 text-primary">DeepSeek Configuration</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">API Key</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-key text-primary"></i>
                                        </span>
                                        <input type="password" name="deepseek_key" class="form-control" value="{{index .Config.DeepSeek "key"}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Model</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cube text-primary"></i>
                                        </span>
                                        <input type="text" name="deepseek_model" class="form-control" value="{{index .Config.DeepSeek "model"}}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Base URL (Optional)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-link text-primary"></i>
                                        </span>
                                        <input type="url" name="deepseek_url" class="form-control" value="{{index .Config.DeepSeek "base_url"}}" placeholder="https://api.deepseek.com/v1">
                                    </div>
                                    <small class="text-muted">Leave empty to use default DeepSeek API endpoint</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 service-config" id="claudeConfig" style="display: {{if eq .Config.Service "claude"}}block{{else}}none{{end}};">
                            <h5 class="mb-3 text-primary">Claude Configuration</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">API Key</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-key text-primary"></i>
                                        </span>
                                        <input type="password" name="claude_key" class="form-control" value="{{index .Config.Claude "key"}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Model</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-cube text-primary"></i>
                                        </span>
                                        <input type="text" name="claude_model" class="form-control" value="{{index .Config.Claude "model"}}">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <label class="form-label">Base URL (Optional)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-link text-primary"></i>
                                        </span>
                                        <input type="url" name="claude_url" class="form-control" value="{{index .Config.Claude "base_url"}}" placeholder="https://api.anthropic.com/v1">
                                    </div>
                                    <small class="text-muted">Leave empty to use default Claude API endpoint</small>
                                </div>
                            </div>
                        </div>

                        <!-- NVD API Configuration -->
                        <div class="col-12 mt-4">
                            <h5 class="mb-3 text-primary">
                                <i class="fas fa-database me-2"></i>NVD API Configuration
                            </h5>
                            <p class="text-muted">Configure your National Vulnerability Database (NVD) API key for enhanced CVE information retrieval. Get your free API key at <a href="https://nvd.nist.gov/developers/request-an-api-key" target="_blank">NVD Developers</a>.</p>
                            
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">NVD API Key (Optional)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-shield-alt text-primary"></i>
                                        </span>
                                        <input type="password" name="nvd_api_key" class="form-control" value="{{if .Config.NVD}}{{index .Config.NVD "api_key"}}{{end}}" placeholder="Enter your NVD API key">
                                    </div>
                                    <small class="text-muted">Using an API key increases rate limits from 5 requests per 30 seconds to 50 requests per 30 seconds</small>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 mt-4">
                            <h5 class="mb-3 text-primary">
                                <i class="fas fa-edit me-2"></i>AI Prompts Configuration
                            </h5>
                            <p class="text-muted">Customize the prompts used by the AI for analysis. Use {file_path} and {diff_content} placeholders for the main analysis prompt, and {ai_response} and {cve_description} for the CVE analysis prompt.</p>
                            
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label">Main Analysis Prompt</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-comment-dots text-primary"></i>
                                        </span>
                                        <textarea name="main_analysis_prompt" class="form-control" rows="8" placeholder="Enter the main analysis prompt...">{{index .Config.Prompts "main_analysis"}}</textarea>
                                    </div>
                                    <small class="text-muted">This prompt is used for the main vulnerability analysis. Variables: {file_path}, {diff_content}</small>
                                </div>
                                
                                <div class="col-12">
                                    <label class="form-label">CVE Analysis Prompt</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-shield-alt text-primary"></i>
                                        </span>
                                        <textarea name="cve_analysis_prompt" class="form-control" rows="6" placeholder="Enter the CVE analysis prompt...">{{index .Config.Prompts "cve_analysis"}}</textarea>
                                    </div>
                                    <small class="text-muted">This prompt is used for CVE matching analysis. Variables: {ai_response}, {cve_description}</small>
                                </div>
                                
                                <div class="col-12">
                                    <label class="form-label">Article/Writeup Prompt (CVE Security Analysis)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-file-alt text-primary"></i>
                                        </span>
                                        <textarea name="cve_writeup_prompt" class="form-control" rows="10" placeholder="Enter the article/writeup prompt...">{{index .Config.Prompts "cve_writeup"}}</textarea>
                                    </div>
                                    <small class="text-muted">This prompt is used for generating comprehensive security analysis articles. Variables: {cve_id}, {cve_description}, {all_matching_files_analysis}</small>
                                </div>
                                
                                <div class="col-12">
                                    <div class="alert alert-info">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <strong>Tip:</strong> You can modify these prompts to better suit your specific use case. Make sure to keep the variable placeholders in the correct format.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Save Settings
                            </button>
                            <button type="button" class="btn btn-outline-warning ms-2" onclick="resetPrompts()">
                                <i class="fas fa-undo me-2"></i>Reset Prompts
                            </button>
                            <a href="/folder" class="btn btn-outline-secondary ms-2">
                                <i class="fas fa-arrow-left me-2"></i>Back to Scanner
                            </a>
                        </div>
                    </div>
                </form>
            </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="#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', () => {
        document.querySelectorAll('input[name="ai_service"]').forEach(radio => {
            radio.addEventListener('change', () => {
                document.querySelectorAll('.service-config').forEach(el => el.style.display = 'none');
                document.getElementById(`${radio.value}Config`).style.display = 'block';
            });
        });

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

    function resetPrompts() {
        if (confirm('Are you sure you want to reset all prompts to their default values? This action cannot be undone.')) {
            
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '/reset-prompts';
            document.body.appendChild(form);
            form.submit();
        }
    }
    </script>
</body>
</html>
