<nav id="navigation-menu" class="bg-theme-background shadow-md border-b border-theme-primary fixed top-0 left-0 right-0 z-50" x-data="{ open: false }">
    @if(auth()->guest() || request()->routeIs('goodbye-deleted-user'))
        <!-- Primary Navigation Menu -->
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex h-16 items-center justify-between">
                <!-- Logo -->
                <div class="flex shrink-0 items-center">
                    <a href="{{ route('welcome') }}">
                        <x-jetstream.application-mark class="block h-9 w-auto" />
                    </a>
                </div>

                <!-- Language selector ---->
                <!-- This changes the session('locale') and by the Middleware StoreUserLangPreference this locale
                    is stored as the lang_preference in the user table -->
                @php
                    $languages = Illuminate\Support\Facades\DB::table('languages')->orderBy('lang_code', 'asc')->get();
                    $supportedLocales = LaravelLocalization::getSupportedLocales();
                    // Sort the supported locales alphabetically by the language name
                    uasort($supportedLocales, function ($a, $b) {
                        return strcmp($a['native'], $b['native']);
                    });
                @endphp
                <div class="flex ml-auto items-center">
                    <x-jetstream.dropdown>
                        <x-slot name="trigger">
                            <span class="inline-flex rounded-md">
                                <button class="inline-flex items-center  py-2 text-sm font-medium leading-4 text-theme-primary hover:text-theme-secondary focus:bg-theme-surface focus:outline-none active:bg-theme-surface"
                                        type="button">
                                    <x-icon name="globe-alt" class="w-6 h-5" outline />
                                </button>
                            </span>
                        </x-slot>
                        <x-slot name="content">
                            <div class="w-60">
                                @foreach ($supportedLocales as $localeCode => $properties)
                                    @php
                                        $language = $languages->firstWhere('lang_code', strtolower($localeCode));
                                    @endphp
                                    @if ($language)
                                        <div class="block px-4 py-2">
                                            <a class="text-theme-primary transition hover:text-theme-secondary focus:border-theme-primary focus:text-theme-secondary"
                                            href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}"
                                            hreflang="{{ $localeCode }}" rel="alternate">
                                                {{ $language->flag }}
                                                <span class="ml-3 text-theme-primary hove:text-theme-secondary">{{ Lang::get($language->name, [], $localeCode) }}</span>
                                            </a>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </x-slot>
                    </x-jetstream.dropdown>
                </div>
                
                @if (Route::has('login'))
                    <div class="flex items-center space-x-2 ml-4">
                        @if (Route::has('register'))
                            <a href="{{ route('register') }}"
                            class="text-theme-primary hover:text-theme-secondary py-2 text-sm font-medium focus:outline-none">
                                {{ __('Register') }}
                            </a>
                        @endif
                        <a href="{{ route('login') }}"
                        class="text-theme-primary hover:text-theme-secondary pl-3 py-2 text-sm font-medium focus:outline-none">
                            {{ __('Log in') }}
                        </a>
                    </div>
                @endif

            </div>
        </div>
    @endif
</nav>