<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ brand_name }}{% endblock %}</title>
    <link rel="stylesheet" href="/static/style.css">
    <script>
    // Apply theme immediately to prevent flash of wrong theme
    (function() {
        var pref = localStorage.getItem('ownmail-theme') || 'auto';
        var dark = pref === 'dark' || (pref === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
        if (dark) document.documentElement.classList.add('ownmail-dark');
    })();
    </script>
</head>
<body>
    <div class="ownmail-loading-overlay" id="ownmail-loading-overlay">
        <div class="ownmail-loading-spinner"></div>
    </div>
    <div class="ownmail-header">
        <div class="ownmail-hamburger" id="ownmail-hamburger">
            <button class="ownmail-hamburger-btn" onclick="toggleHamburger(event)" title="Menu">☰</button>
            <div class="ownmail-hamburger-dropdown" id="ownmail-hamburger-dropdown">
                <span class="ownmail-hamburger-info">{{ stats.total_emails | default(0) | int }} emails archived</span>
                <hr class="ownmail-hamburger-divider">
                <a href="#" class="ownmail-hamburger-theme" onclick="toggleTheme(); return false;">
                    <span id="ownmail-hamburger-theme-icon">☀️</span>
                    <span id="ownmail-hamburger-theme-label">Switch to light mode</span>
                </a>
                <hr class="ownmail-hamburger-divider">
                <a href="/settings">Settings</a>
                <a href="/help">Search help</a>
            </div>
        </div>
        <h1><a href="/">{{ brand_name }}</a></h1>
    </div>
    {% block content %}{% endblock %}
    <script>
    // Theme: reads localStorage preference (auto/light/dark)
    function isDarkMode() {
        var pref = localStorage.getItem('ownmail-theme') || 'auto';
        return pref === 'dark' || (pref === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches);
    }
    function applyTheme() {
        var dark = isDarkMode();
        document.documentElement.classList.toggle('ownmail-dark', dark);
        updateThemeIcon(dark);
        if (typeof updateEmailDarkMode === 'function') updateEmailDarkMode(dark);
    }
    function updateThemeIcon(dark) {
        var icon = document.getElementById('ownmail-hamburger-theme-icon');
        var label = document.getElementById('ownmail-hamburger-theme-label');
        if (icon) icon.textContent = dark ? '☀️' : '🌙';
        if (label) label.textContent = dark ? 'Switch to light mode' : 'Switch to dark mode';
    }
    function toggleTheme() {
        var dark = isDarkMode();
        localStorage.setItem('ownmail-theme', dark ? 'light' : 'dark');
        applyTheme();
    }
    function toggleHamburger(event) {
        event.stopPropagation();
        var dropdown = document.getElementById('ownmail-hamburger-dropdown');
        dropdown.classList.toggle('ownmail-show');
    }
    // Listen for OS theme changes (matters when pref is 'auto')
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
        applyTheme();
    });
    applyTheme();

    function showLoading(event) {
        // Don't show loading overlay for cmd+click or ctrl+click (new tab)
        if (event && (event.metaKey || event.ctrlKey)) {
            return;
        }
        document.getElementById('ownmail-loading-overlay').classList.add('ownmail-active');
    }
    function hideLoading() {
        document.getElementById('ownmail-loading-overlay').classList.remove('ownmail-active');
    }
    // Hide loading overlay when page is shown (handles back/forward navigation)
    // This fires when page is restored from bfcache (back-forward cache)
    window.addEventListener('pageshow', function(event) {
        hideLoading();
    });
    // Also hide on regular page load just in case
    window.addEventListener('load', function() {
        hideLoading();
    });
    // Close hamburger menu when clicking outside
    document.addEventListener('click', function(event) {
        var hamburger = document.getElementById('ownmail-hamburger');
        var dropdown = document.getElementById('ownmail-hamburger-dropdown');
        if (hamburger && dropdown && !hamburger.contains(event.target)) {
            dropdown.classList.remove('ownmail-show');
        }
    });
    // Show loading on form submit
    document.querySelectorAll('form').forEach(function(form) {
        form.addEventListener('submit', function(e) {
            showLoading(e);
        });
    });
    // Show loading on email item click
    document.querySelectorAll('.ownmail-email-item a').forEach(function(link) {
        link.addEventListener('click', function(e) {
            showLoading(e);
        });
    });
    // Show loading on pagination click
    document.querySelectorAll('.ownmail-pagination a').forEach(function(link) {
        link.addEventListener('click', function(e) {
            showLoading(e);
        });
    });
    </script>
</body>
</html>
