<!-- [DEF:Navbar:Component] -->
<!--
@SEMANTICS: navbar, navigation, header, layout
@PURPOSE:   Main navigation bar for the application.
@LAYER:     UI
@RELATION:  USES -> $app/stores
-->
<script>
    import { page } from '$app/stores';
    import { t } from '$lib/i18n';
    import { LanguageSwitcher } from '$lib/ui';
</script>

<header class="bg-white shadow-md p-4 flex justify-between items-center">
    <a
        href="/"
        class="text-2xl font-bold text-gray-800 focus:outline-none"
    >
        Superset Tools
    </a>
    <nav class="flex items-center space-x-4">
        <a
            href="/"
            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
        >
            {$t.nav.dashboard}
        </a>
        <a
            href="/tasks"
            class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/tasks') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
        >
            {$t.nav.tasks}
        </a>
        <div class="relative inline-block group">
            <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
                {$t.nav.settings}
            </button>
            <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
                <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_general}</a>
                <a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_connections}</a>
                <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_git}</a>
            </div>
        </div>
        <LanguageSwitcher />
    </nav>
</header>
<!-- [/DEF:Navbar:Component] -->
