<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deep Research System - Settings</title>
    <link rel="stylesheet" href="{{ url_for('research.serve_static', path='css/styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.ico') }}">
    <style>
        .settings-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        .settings-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .settings-card .card-content {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .settings-icon {
            font-size: 2rem;
            color: var(--accent-primary);
            margin-bottom: 1rem;
            text-align: center;
        }
        .settings-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        .settings-description {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            flex: 1;
        }
        .card-actions {
            margin-top: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2 id="logo-link" style="cursor: pointer;"><i class="fas fa-atom"></i> Deep Research</h2>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li data-page="new-research"><i class="fas fa-search"></i> <a href="{{ url_for('research.index') }}">New Research</a></li>
                    <li data-page="history"><i class="fas fa-history"></i> <a href="{{ url_for('research.index') }}#history">History</a></li>
                    <li class="active" data-page="settings"><i class="fas fa-cog"></i> Settings</li>
                </ul>
            </nav>
            <div class="sidebar-footer">
                <p>v0.1.0 | <i class="fas fa-brain"></i></p>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page active" id="settings">
                <div class="page-header">
                    <h1>Settings</h1>
                </div>
                
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <div class="settings-cards">
                    <!-- Main Configuration Card -->
                    <div class="card settings-card">
                        <div class="card-content">
                            <div class="settings-icon">
                                <i class="fas fa-search"></i>
                            </div>
                            <h3 class="settings-title">Search Settings</h3>
                            <p class="settings-description">
                                Configure search parameters, results limits, general behavior, and output settings for the research system.
                            </p>
                            <div class="card-actions">
                                <a href="{{ url_for('research.main_config_page') }}" class="btn btn-primary">
                                    <i class="fas fa-cog"></i> Configure
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- LLM Configuration Card -->
                    <div class="card settings-card">
                        <div class="card-content">
                            <div class="settings-icon">
                                <i class="fas fa-brain"></i>
                            </div>
                            <h3 class="settings-title">Language Model Settings</h3>
                            <p class="settings-description">
                                Set up the language models used for research, including model selection, parameters, and API settings.
                            </p>
                            <div class="card-actions">
                                <a href="{{ url_for('research.llm_config_page') }}" class="btn btn-primary">
                                    <i class="fas fa-code"></i> Edit Configuration
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Local Collections Card -->
                    <div class="card settings-card">
                        <div class="card-content">
                            <div class="settings-icon">
                                <i class="fas fa-folder"></i>
                            </div>
                            <h3 class="settings-title">Local Document Collections</h3>
                            <p class="settings-description">
                                Configure local document collections to search through your own files, papers, and research materials.
                            </p>
                            <div class="card-actions">
                                <a href="{{ url_for('research.collections_config_page') }}" class="btn btn-primary">
                                    <i class="fas fa-code"></i> Edit Configuration
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="card settings-card">
                        <div class="card-content">
                            <div class="settings-icon">
                                <i class="fas fa-key"></i>
                            </div>
                            <h3 class="settings-title">API Keys</h3>
                            <p class="settings-description">
                                Configure API keys for external services like OpenAI, Anthropic, and search providers.
                            </p>
                            <div class="card-actions">
                                <a href="{{ url_for('research.api_keys_config_page') }}" class="btn btn-primary">
                                    <i class="fas fa-cog"></i> Configure
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card settings-card">
                        <div class="card-content">
                            <div class="settings-icon">
                                <i class="fas fa-search-plus"></i>
                            </div>
                            <h3 class="settings-title">Search Engines Settings</h3>
                            <p class="settings-description">
                                Configure search engines, their parameters, and specify which search engines to use for different types of queries.
                            </p>
                            <div class="card-actions">
                                <a href="{{ url_for('research.search_engines_config_page') }}" class="btn btn-primary">
                                    <i class="fas fa-cog"></i> Configure
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Mobile Tab Bar -->
    <nav class="mobile-tab-bar">
        <ul>
            <li data-page="new-research">
                <a href="{{ url_for('research.index') }}">
                    <i class="fas fa-search"></i>
                    <span>Research</span>
                </a>
            </li>
            <li data-page="history">
                <a href="{{ url_for('research.index') }}#history">
                    <i class="fas fa-history"></i>
                    <span>History</span>
                </a>
            </li>
            <li class="active" data-page="settings">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </li>
        </ul>
    </nav>

    <script>
        // Make the logo clickable to go back to home
        document.getElementById('logo-link').addEventListener('click', function() {
            window.location.href = "{{ url_for('research.index') }}";
        });
    </script>
</body>
</html>
