<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ title }} - Cron{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="/static/style.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-clock me-2"></i>Cron
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link{% if request.url.path == '/' %} active{% endif %}" href="/">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if request.url.path == '/prompts' %} active{% endif %}" href="/prompts">Prompts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if request.url.path == '/jobs' %} active{% endif %}" href="/jobs">Jobs</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="addDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-plus"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="addDropdown">
                            <li><a class="dropdown-item" href="/prompts#create"><i class="fas fa-file-alt me-2"></i>New Prompt</a></li>
                            <li><a class="dropdown-item" href="/jobs#create"><i class="fas fa-calendar-alt me-2"></i>New Job</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-palette" id="themeIcon"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
                            <li>
                                <a class="dropdown-item" href="#" onclick="setTheme('light')">
                                    <i class="fas fa-sun me-2"></i>Light Mode
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="setTheme('dark')">
                                    <i class="fas fa-moon me-2"></i>Dark Mode
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="setTheme('system')">
                                    <i class="fas fa-desktop me-2"></i>System
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Theme management
        const THEME_KEY = 'silica-cron-theme';
        
        function getStoredTheme() {
            return localStorage.getItem(THEME_KEY) || 'system';
        }
        
        function setStoredTheme(theme) {
            localStorage.setItem(THEME_KEY, theme);
        }
        
        function getSystemTheme() {
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        
        function getEffectiveTheme(theme) {
            if (theme === 'system') {
                return getSystemTheme();
            }
            return theme;
        }
        
        function updateThemeIcon(theme) {
            const icon = document.getElementById('themeIcon');
            if (!icon) return;
            
            // Update dropdown items active state
            document.querySelectorAll('#themeDropdown + .dropdown-menu .dropdown-item').forEach(item => {
                item.classList.remove('active');
            });
            
            let iconClass = 'fas fa-palette';
            let activeSelector = '';
            
            if (theme === 'light') {
                iconClass = 'fas fa-sun';
                activeSelector = '[onclick="setTheme(\'light\')"]';
            } else if (theme === 'dark') {
                iconClass = 'fas fa-moon';
                activeSelector = '[onclick="setTheme(\'dark\')"]';
            } else if (theme === 'system') {
                iconClass = 'fas fa-desktop';
                activeSelector = '[onclick="setTheme(\'system\')"]';
            }
            
            icon.className = iconClass;
            
            if (activeSelector) {
                const activeItem = document.querySelector(activeSelector);
                if (activeItem) {
                    activeItem.classList.add('active');
                }
            }
        }
        
        function applyTheme(theme) {
            const effectiveTheme = getEffectiveTheme(theme);
            
            // Set data-bs-theme attribute on html element for Bootstrap 5.3+ compatibility
            document.documentElement.setAttribute('data-bs-theme', effectiveTheme);
            
            // Also set class for custom CSS
            document.documentElement.className = document.documentElement.className
                .replace(/\btheme-\w+\b/g, '') + ` theme-${effectiveTheme}`;
            
            updateThemeIcon(theme);
        }
        
        function setTheme(theme) {
            setStoredTheme(theme);
            applyTheme(theme);
        }
        
        function initializeTheme() {
            const storedTheme = getStoredTheme();
            applyTheme(storedTheme);
            
            // Listen for system theme changes
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
                const currentTheme = getStoredTheme();
                if (currentTheme === 'system') {
                    applyTheme('system');
                }
            });
        }
        
        // Initialize theme on DOM content loaded
        document.addEventListener('DOMContentLoaded', initializeTheme);
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>