{# Header component with logo, title, and dark mode toggle #}
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 transition-colors">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <!-- Logo and Title -->
        <div class="flex items-center space-x-3">
            <svg class="w-8 h-8 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <div>
                <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
                    {% block header_title %}OpenAdapt Viewer{% endblock %}
                </h1>
                {% block header_subtitle %}
                <p class="text-sm text-gray-500 dark:text-gray-400">ML Dashboard & Benchmark Viewer</p>
                {% endblock %}
            </div>
        </div>

        <!-- Header Actions -->
        <div class="flex items-center space-x-4">
            {% block header_actions %}{% endblock %}

            <!-- Dark Mode Toggle -->
            <button
                @click="darkMode = !darkMode; localStorage.setItem('darkMode', darkMode)"
                class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300
                       hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                :title="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
            >
                <!-- Sun icon (shown in dark mode) -->
                <svg x-show="darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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 (shown in light mode) -->
                <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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>
    </div>
</header>