@auth
    <x-admin.header />
@endauth


<header class="site-header" x-on:click.outside="nav = false">
    <x-frontend.container>
        <x-frontend.animation type="fade-down">

            <div class="flex h-[80px] items-center justify-between gap-4 xl:h-[120px]">
                <div>
                    <h1><a href="/{{ app()->getLocale() }}">
                            <img src="{{ asset('images/logo.svg') }}" alt="{{ __('Vadvirág Residence') }}" width="222"
                                height="64"></a></h1>
                </div>
                <div class="hidden xl:block">
                    <nav class="nav-desktop">
                        <x-frontend.nav />
                    </nav>
                </div>
                <div class="flex items-center gap-4">
                    <div>
                        <div class="xl:hidden">
                            <a href="tel:+36704545119">
                                <x-frontend.icons.phone />
                            </a>
                        </div>
                        <div class="hidden xl:block">
                            <a href="tel:+36704545119" class="hover:text-mantis">+36 70 454 5119</a>
                        </div>
                    </div>
                    {{--
                    <div>
                        <ul class="flex items-center gap-2 text-sm uppercase">
                            <li><a href="/hu" @class(['text-mantis' => app()->getLocale() == 'hu'])>Hu</a></li>
                            <li class="text-iron/20">|</li>
                            <li><a href="/en" @class(['text-mantis' => app()->getLocale() == 'en'])>En</a></li>
                        </ul>
                    </div>
                     --}}
                    <div class="xl:hidden">
                        <button x-on:click="nav = !nav">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor" class="size-8">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <nav x-cloak x-collapse x-show="nav" class="nav-mobile">
                <x-frontend.nav />
            </nav>

        </x-frontend.animation>
    </x-frontend.container>
</header>