<!doctype html>
<html lang="de" data-theme="{theme ?? 'auto'}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{title} | Admin Panel</title>
    <meta name="description" content="{description}">
    <meta property="og:type" content="website">

    <!-- Theme Meta -->
    <meta name="color-scheme" content="light dark">
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
    <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">

    <!-- Admin CSS (ITCSS Architecture) - Vite Built -->
    <link rel="stylesheet" href="/assets/css/admin-U1y6JHpV.css">

    <!-- Main Application Assets -->
    <link rel="stylesheet" href="/assets/css/main-DN7LWXEn.css">
    <script src="/assets/js/main-DReViZUb.js" type="module"></script>
</head>
<body>
    <!-- Skip to main content (Accessibility) -->
    <a href="#main-content" class="admin-skip-link">Skip to main content</a>

    <!-- Admin Layout Grid -->
    <div class="admin-layout">
        <!-- Sidebar Navigation -->
        <x-admin-sidebar currentPath="{current_path}" />

        <!-- Header with Search & User Menu -->
        <x-admin-header pageTitle="{page_title}" />

        <!-- Main Content Area -->
        <main class="admin-content" id="main-content" role="main">
            {content}
        </main>
    </div>

    <!-- Admin JavaScript (Mobile Menu, Theme Toggle, Dropdowns) -->
    <script>
        // Mobile Menu Toggle
        document.addEventListener('DOMContentLoaded', () => {
            const mobileToggle = document.querySelector('[data-mobile-menu-toggle]');
            const sidebar = document.querySelector('.admin-sidebar');
            const overlay = document.querySelector('[data-mobile-menu-overlay]');

            if (mobileToggle && sidebar && overlay) {
                const toggleMenu = () => {
                    const isOpen = sidebar.dataset.mobileMenuOpen === 'true';
                    sidebar.dataset.mobileMenuOpen = !isOpen;
                    overlay.dataset.mobileMenuOpen = !isOpen;
                    mobileToggle.setAttribute('aria-expanded', !isOpen);
                };

                mobileToggle.addEventListener('click', toggleMenu);
                overlay.addEventListener('click', toggleMenu);
            }

            // Theme Toggle with Dark Mode Detection
            const themeToggle = document.querySelector('[data-theme-toggle]');
            const htmlElement = document.documentElement;
            const storageKey = 'admin-theme-preference';

            if (themeToggle) {
                // Detect system preference
                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

                // Initialize theme
                const initTheme = () => {
                    const savedTheme = localStorage.getItem(storageKey) || 'auto';

                    if (savedTheme === 'auto') {
                        // Use system preference when auto
                        htmlElement.dataset.theme = prefersDark.matches ? 'dark' : 'light';
                    } else {
                        // Use saved preference
                        htmlElement.dataset.theme = savedTheme;
                    }

                    // Update icon visibility
                    updateThemeIcon(savedTheme === 'auto' ? (prefersDark.matches ? 'dark' : 'light') : savedTheme);
                };

                // Update theme icon
                const updateThemeIcon = (theme) => {
                    document.querySelectorAll('[data-theme-icon]').forEach(icon => {
                        icon.style.display = icon.dataset.themeIcon === theme ? 'block' : 'none';
                    });
                };

                // Listen for system theme changes
                prefersDark.addEventListener('change', (e) => {
                    const savedTheme = localStorage.getItem(storageKey);
                    if (!savedTheme || savedTheme === 'auto') {
                        htmlElement.dataset.theme = e.matches ? 'dark' : 'light';
                        updateThemeIcon(e.matches ? 'dark' : 'light');
                    }
                });

                // Theme toggle click handler
                themeToggle.addEventListener('click', () => {
                    const currentTheme = localStorage.getItem(storageKey) || 'auto';
                    const nextTheme = currentTheme === 'light' ? 'dark' :
                                     currentTheme === 'dark' ? 'auto' : 'light';

                    localStorage.setItem(storageKey, nextTheme);

                    if (nextTheme === 'auto') {
                        htmlElement.dataset.theme = prefersDark.matches ? 'dark' : 'light';
                        updateThemeIcon(prefersDark.matches ? 'dark' : 'light');
                    } else {
                        htmlElement.dataset.theme = nextTheme;
                        updateThemeIcon(nextTheme);
                    }
                });

                // Initialize on load
                initTheme();
            }

            // Dropdown Menus
            document.querySelectorAll('[data-dropdown-trigger]').forEach(trigger => {
                const dropdownId = trigger.dataset.dropdownTrigger;
                const dropdown = trigger.closest('[data-dropdown]');

                trigger.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isOpen = dropdown.dataset.open === 'true';

                    // Close all other dropdowns
                    document.querySelectorAll('[data-dropdown]').forEach(dd => {
                        if (dd !== dropdown) {
                            dd.dataset.open = 'false';
                        }
                    });

                    dropdown.dataset.open = !isOpen;
                });
            });

            // Close dropdowns on outside click
            document.addEventListener('click', () => {
                document.querySelectorAll('[data-dropdown]').forEach(dropdown => {
                    dropdown.dataset.open = 'false';
                });
            });
        });
    </script>
</body>
</html>