<!DOCTYPE html>
<html lang="en" data-theme="{{ theme }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ title }}{% endblock %}</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

    <!-- Plotly.js for waveform visualization -->
    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>

    <style>
        :root[data-theme="dark"] {
            --bs-body-bg: #1a1a1a;
            --bs-body-color: #e0e0e0;
            --bs-border-color: #333;
            --bs-card-bg: #2a2a2a;
            --bs-primary: #00d9ff;
            --bs-secondary: #6c757d;
            --bs-success: #28a745;
            --bs-danger: #dc3545;
        }

        :root[data-theme="light"] {
            --bs-body-bg: #ffffff;
            --bs-body-color: #212529;
            --bs-border-color: #dee2e6;
            --bs-card-bg: #f8f9fa;
            --bs-primary: #0d6efd;
            --bs-secondary: #6c757d;
            --bs-success: #28a745;
            --bs-danger: #dc3545;
        }

        body {
            background-color: var(--bs-body-bg);
            color: var(--bs-body-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .navbar {
            background-color: var(--bs-card-bg);
            border-bottom: 1px solid var(--bs-border-color);
        }

        .card {
            background-color: var(--bs-card-bg);
            border: 1px solid var(--bs-border-color);
        }

        .btn-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .dropzone {
            border: 2px dashed var(--bs-border-color);
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dropzone:hover, .dropzone.drag-over {
            border-color: var(--bs-primary);
            background-color: rgba(0, 217, 255, 0.1);
        }

        .progress-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }

        .session-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 500;
        }

        .status-processing {
            background-color: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }

        .status-complete {
            background-color: rgba(40, 167, 69, 0.2);
            color: #28a745;
        }

        .status-error {
            background-color: rgba(220, 53, 69, 0.2);
            color: #dc3545;
        }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="bi bi-cpu"></i> Oscura Dashboard
            </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" href="/">
                            <i class="bi bi-house"></i> Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/sessions">
                            <i class="bi bi-list-task"></i> Sessions
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/protocols">
                            <i class="bi bi-diagram-3"></i> Protocols
                        </a>
                    </li>
                </ul>
                <div class="d-flex">
                    <button class="btn btn-outline-secondary btn-sm" onclick="toggleTheme()">
                        <i class="bi bi-moon-stars" id="theme-icon"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container-fluid py-4">
        {% block content %}{% endblock %}
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Theme Toggle -->
    <script>
        function toggleTheme() {
            const html = document.documentElement;
            const currentTheme = html.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', newTheme);

            // Update icon
            const icon = document.getElementById('theme-icon');
            icon.className = newTheme === 'dark' ? 'bi bi-moon-stars' : 'bi bi-sun';

            // Save preference
            localStorage.setItem('theme', newTheme);
        }

        // Load saved theme preference
        const savedTheme = localStorage.getItem('theme') || '{{ theme }}';
        document.documentElement.setAttribute('data-theme', savedTheme);

        // Update icon
        const icon = document.getElementById('theme-icon');
        icon.className = savedTheme === 'dark' ? 'bi bi-moon-stars' : 'bi bi-sun';
    </script>

    {% block extra_scripts %}{% endblock %}
</body>
</html>
