<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <!-- Status Bar -->
    {{ $status := partial "check-open-status.html" . }}
    <div id="status-bar" class="{{ if $status.isOpen }}bg-status-green{{ else }}bg-status-red{{ end }} transition-colors duration-300">
        <div class="container mx-auto px-4">
            <div class="flex justify-center items-center h-8 sm:h-10">
                <div id="status-text" class="text-xs sm:text-sm text-white font-medium">
                    {{ if $status.isOpen }}
                        {{ i18n "open" }}
                    {{ else }}
                        {{ i18n "closed" }}
                    {{ end }}
                </div>
                <div class="ml-2 text-xs sm:text-sm text-white">
                    (<span id="current-time">{{ now.Format "15:04" }}</span> {{ i18n "time_suffix" }})
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="bg-white dark:bg-pizza-darker shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16 sm:h-20">
                <!-- Logo -->
                <div class="flex-shrink-0">
                    <a href="{{ .Site.Home.RelPermalink }}" class="flex items-center">
                        <img src="/images/logo.webp" 
                             alt="{{ .Site.Title }}" 
                             class="h-12 sm:h-16 w-auto transition-transform duration-300 hover:scale-105">
                    </a>
                </div>

                <!-- Desktop Navigation Links -->
                <div class="hidden md:flex items-center space-x-8">
                    {{ range .Site.Menus.main }}
                    <a href="{{ .URL | relLangURL }}" 
                       class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                        {{ .Name }}
                    </a>
                    {{ end }}
                </div>

                <!-- Language Switcher - Desktop -->
                <div class="hidden md:flex items-center space-x-4">
                    {{ if eq .Site.Language.Lang "de" }}
                    <a href="{{ relLangURL "en" }}" 
                       class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                        English
                    </a>
                    {{ else }}
                    <a href="/"
                       class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                        Deutsch
                    </a>
                    {{ end }}
                </div>

                <!-- Dark mode toggle - Desktop -->
                <div class="hidden md:flex items-center">
                    <button id="darkModeToggle" 
                            class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
                        <!-- Sun icon -->
                        <svg class="h-6 w-6 text-gray-700 dark:text-gray-200 hidden dark:block" 
                             fill="none" 
                             viewBox="0 0 24 24" 
                             stroke="currentColor">
                            <path stroke-linecap="round" 
                                  stroke-linejoin="round" 
                                  stroke-width="2" 
                                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        <!-- Moon icon -->
                        <svg class="h-6 w-6 text-gray-700 dark:text-gray-200 block dark:hidden" 
                             fill="none" 
                             viewBox="0 0 24 24" 
                             stroke="currentColor">
                            <path stroke-linecap="round" 
                                  stroke-linejoin="round" 
                                  stroke-width="2" 
                                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                    </button>
                </div>

                <!-- Mobile Controls -->
                <div class="md:hidden flex items-center space-x-3">
                    <!-- Dark mode toggle - Mobile -->
                    <button id="darkModeToggle" 
                            onclick="toggleTheme()"
                            class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
                        <!-- Sun icon -->
                        <svg class="h-6 w-6 text-gray-700 dark:text-gray-200 hidden dark:block" 
                             fill="none" 
                             viewBox="0 0 24 24" 
                             stroke="currentColor">
                            <path stroke-linecap="round" 
                                  stroke-linejoin="round" 
                                  stroke-width="2" 
                                  d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                        </svg>
                        <!-- Moon icon -->
                        <svg class="h-6 w-6 text-gray-700 dark:text-gray-200 block dark:hidden" 
                             fill="none" 
                             viewBox="0 0 24 24" 
                             stroke="currentColor">
                            <path stroke-linecap="round" 
                                  stroke-linejoin="round" 
                                  stroke-width="2" 
                                  d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                        </svg>
                    </button>

                    <!-- Mobile Menu Button -->
                    <button type="button" 
                            id="mobile-menu-button"
                            class="text-gray-700 dark:text-gray-100 hover:text-pizza-red p-2">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu -->
            <div id="mobile-menu" class="md:hidden hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-pizza-darker border-t border-gray-200 dark:border-gray-700">
                    {{ range .Site.Menus.main }}
                    <a href="{{ .URL | relLangURL }}" 
                       class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                        {{ .Name }}
                    </a>
                    {{ end }}
                    
                    <!-- Language Options in Mobile Menu -->
                    <div class="border-t border-gray-200 dark:border-gray-700 mt-2 pt-2">
                        {{ if eq .Site.Language.Lang "de" }}
                        <a href="{{ relLangURL "en" }}" 
                           class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                            English
                        </a>
                        {{ else }}
                        <a href="/" 
                           class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
                            Deutsch
                        </a>
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>

<!-- Mobile Menu JavaScript -->
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function() {
    const mobileMenu = document.getElementById('mobile-menu');
    mobileMenu.classList.toggle('hidden');
});
</script> 
