{{--
 * Blade Template
 *
 * Usage:       <x-globals::navigation-menu />
 *
 * @version     1.0.$Revision:$
 * @version     SVN: $Id:$
 * @package     bplan-base/globals
 * @subpackage  Blades
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
--}}

<nav class="bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
    <div class="max-w-screen-xl flex items-center justify-between mx-auto px-4 py-3">

        {{-- Branding --}}
        <a href="{{ route('home') }}" class="flex items-center gap-3">
            <x-globals::global.application-mark class="block h-9 w-auto" />
            <span class="text-lg font-semibold text-gray-900 dark:text-white">
                {{ config('app.name') }}
            </span>
        </a>

        {{-- Right side --}}
        <div class="flex items-center gap-3" x-data="{ open: false }">

            {{-- Dark-mode toggle --}}
            <x-globals::global.dark-switch />

            {{-- Language switch (only when multiple locales configured) --}}
            @if (count(\Registry::get('core.tenantLocales', [])) >= 2)
                <x-globals::global.language-switch languageContext="{{ \BplanBase\Globals\Enums\LanguageContext::Backend }}" />
            @endif

            {{-- User dropdown --}}
            <div class="relative">
                <button
                    type="button"
                    x-on:click="open = !open"
                    x-on:click.outside="open = false"
                    class="flex items-center gap-2 rounded-full border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-300 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700"
                >
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                    </svg>
                    <span>{{ auth()->user()->name }}</span>
                    <svg class="h-4 w-4 opacity-60" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7" />
                    </svg>
                </button>

                <div
                    x-show="open"
                    x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    class="absolute right-0 mt-2 w-52 rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-700 dark:ring-white/10"
                    style="display: none;"
                >
                    <div class="border-b border-gray-100 px-4 py-3 dark:border-gray-600">
                        <p class="text-sm font-medium text-gray-900 dark:text-white">{{ auth()->user()->name }}</p>
                        <p class="truncate text-xs text-gray-500 dark:text-gray-400">{{ auth()->user()->email }}</p>
                    </div>

                    <ul class="py-1">
                        <li>
                            <a
                                href="{{ route('profile.show') }}"
                                class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                            >
                                {{ __('globals::global.user-menu.profile') }}
                            </a>
                        </li>
                        <li>
                            <form method="POST" action="{{ route('logout') }}" x-data>
                                @csrf
                                <a
                                    href="{{ route('logout') }}"
                                    x-on:click.prevent="$root.submit()"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                                >
                                    {{ __('globals::global.user-menu.logout') }}
                                </a>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</nav>
