<!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 - API Keys</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') }}">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <!-- Sidebar content (keep as is) -->
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="page active" id="api-keys-settings">
                <div class="page-header">
                    <div class="results-header">
                        <h1>API Keys Configuration</h1>
                        <div class="results-actions">
                            <a href="{{ url_for('research.settings_page') }}" class="btn btn-outline">
                                <i class="fas fa-arrow-left"></i> Back to Settings
                            </a>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-content">
                        <h2>API Keys Configuration File</h2>
                        <p>To edit your API keys configuration, open this file with your preferred text editor. Note that files beginning with a dot or located in configuration directories may be hidden by default in your file explorer. You may need to enable "Show Hidden Files" in your file explorer settings to view it.</p>
                        <div class="file-path">{{ secrets_file_path }}</div>
                        
                        <button onclick="openFileLocation('{{ secrets_file_path }}')" class="btn btn-primary">
                            <i class="fas fa-folder-open"></i> Open Containing Folder
                        </button>
                        
                        <h3 class="mt-4">Configuration Example</h3>
                        <pre class="config-example">
# API Keys for Deep Research System
# This file contains sensitive information and should not be shared.

# LLM Service API Keys
ANTHROPIC_API_KEY = "your-anthropic-api-key-here"
OPENAI_API_KEY = "your-openai-api-key-here"

# Search Service API Keys
GOOGLE_API_KEY = "your-google-api-key-here"
SERP_API_KEY = "your-serp-api-key-here"
GUARDIAN_API_KEY = "your-guardian-api-key-here"
GOOGLE_PSE_API_KEY = "your-google-pse-api-key-here"
GOOGLE_PSE_ENGINE_ID = "your-google-pse-engine-id-here"
                        </pre>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        function openFileLocation(filePath) {
            // Create a hidden form and submit it to a route that will open the file location
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "{{ url_for('research.open_file_location') }}";
            
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'file_path';
            input.value = filePath;
            
            form.appendChild(input);
            document.body.appendChild(form);
            form.submit();
        }
    </script>
</body>
</html>