{{--  backdrop-blur --}}
<header id="header" x-data="{ openHeader: false }"  class="w-full fixed top-0 left-0 h-auto z-[9999] shadow-md backdrop-blur bg-[#191919]">
    <div class="w-[1160px] mx-auto flex items-center gap-4 justify-between">
        <div>
            <a href="/" wire:navigate class="block w-16 h-16">
                <x-application-logo class="w-full h-full text-gray-500" />
            </a>
        </div>

        <ul class="nav">

            <li>
                <a href="/">{{ __("Home") }}</a>
            </li>

            <li>
                <a href="https://discord.gg/mfRBxdnc3T">Discord</a>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __("info") }}</a>
                <ul class="">
                    <li><a href="{{ route('server.information') }}">{{ __("server_info") }}</a></li>
                    <li><a href="{{ route('server.server-update') }}">{{ __("server_update") }}</a></li>
                </ul>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __("caracteristique") }}</a>
                <ul class="">
                    <li><a href="{{ route('game.content') }}">{{ __("game_content") }}</a></li>
                    <li><a href="{{ route('alya.style') }}">{{ __("alya_style") }}</a></li>
                </ul>
            </li>

            <li class="sub-menu">
                <a href="#">{{ __('MY_ACCOUNT') }}</a>
                <ul class="">
                    @auth
                        <li><a href="{{ route("my.account") }}">{{ __('Profile') }}</a></li>
                        <li><a href="#" class="">Donation</a></li>
                        <li>
                            <!-- Authentication -->
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf

                                <x-dropdown-link :href="route('logout')"
                                        onclick="event.preventDefault();
                                                    this.closest('form').submit();">
                                    {{ __('Log Out') }}
                                </x-dropdown-link>
                            </form>
                        </li>
                    @else
                        <li><a href="{{ route('register') }}">{{ __("Register") }}</a></li>
                        <li><a href="{{ route('login') }}">{{ __("Login") }}</a></li>
                    @endauth
                </ul>
            </li>

            <li>
                <a href="https://www.rotopserv.net/serveurs/alyaro/vote">Voter</a>
            </li>

            <li class="hidden" style="display: none!important;">
                <a href="#">{{ __('lang.language') }}</a>
                <ul class="flex flex-col gap-1 justify-center">
                    <li><button class="" onclick="setLang('fr')">{{ __('lang.fr') }}</button></li>
                    <li><button class="" onclick="setLang('en')">{{ __('lang.en') }}</button></li>
                </ul>
            </li>

        </ul>

    </div>

</header>