<nav x-data="{ open: false }"
    class="bg-white/30 dark:bg-neutral-950/40 border-b border-gray-200 dark:border-neutral-700 fixed xs:absolute sm:fixed w-[100%] z-50 backdrop-blur">
    <!-- Primary Navigation Menu -->
    <div class="max-w-[100%] xl:max-w-[95%] 2xl:max-w-[84%] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button
                            class="inline-flex items-center px-3 py-2 border text-sm leading-4 font-medium rounded-md text-gray-700 border-neutral-300/50 dark:text-gray-200 bg-white/20 dark:bg-neutral-950/20 dark:border-neutral-800/50 hover:text-gray-800 dark:hover:text-gray-100 focus:outline-none transition ease-in-out duration-150">

                            <div class="shrink-0 flex items-center">
                                <img src="/images/cropped-HS-1-192x192.webp" class="h-8 mr-3" alt="hstream.moe Logo" />
                                <span class="self-center text-2xl font-semibold whitespace-nowrap">hstream.moe</span>
                            </div>

                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">

                        <x-dropdown-link :href="route('home.index')">
                            <i class="fa-solid fa-house"></i> {{ __('nav.home') }}
                        </x-dropdown-link>

                        <x-dropdown-link :href="route('hentai.search')">
                            <i class="fa-solid fa-magnifying-glass"></i> {{ __('nav.search') }}
                        </x-dropdown-link>

                        <x-dropdown-link :href="route('playlist.index')">
                            <i class="fa-solid fa-rectangle-list"></i> {{ __('nav.public-playlists') }}
                        </x-dropdown-link>

                        @auth
                            <x-dropdown-link :href="route('download.search')">
                                <i class="fa-solid fa-download"></i> {{ __('nav.downloads') }}
                            </x-dropdown-link>
                        @endauth

                        <x-dropdown-link :href="config('discord.invite_link')">
                            <i class="fa-brands fa-discord"></i> {{ __('nav.our-discord-server') }}
                        </x-dropdown-link>

                        <x-dropdown-link :href="route('join.matrix')">
                            <div class="flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24"  height="24" viewBox="0 0 24 24" fill="none" 
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 
                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-matrix pr-1">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M4 3h-1v18h1" />
                                    <path d="M20 21h1v-18h-1" />
                                    <path d="M7 9v6" />
                                    <path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
                                    <path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
                                </svg>
                                Join our Matrix
                            </div>
                        </x-dropdown-link>

                        <x-dropdown-link>
                            <div class="grid grid-cols-2">
                                <p class="cursor-default">{{ __('nav.theme') }}</p>
                                <div class="flex items-center">
                                    <div class="absolute right-6">
                                        @include('partials.themeswitcher')
                                    </div>
                                </div>
                            </div>
                        </x-dropdown-link>

                        {{-- Expiremental --}}
                        <x-dropdown-link>
                            @include('partials.blurswitcher')
                        </x-dropdown-link>
                    </x-slot>
                </x-dropdown>
            </div>

            <div class="items-center hidden md:flex">
                @livewire('nav-live-search')
                <div class="hidden lg:block pl-4">
                    <div class="flex flex-col items-center bg-gray-50/20 dark:bg-neutral-900/40 rounded-md">
                        <a href="{{ route('hentai.random') }}"
                            class="cursor-pointer px-4 py-2 text-sm font-medium dark:hover:text-white text-gray-500 dark:text-white/90 focus:outline-none flex flex-col items-center md:flex-row">
                            <i class="fa-solid fa-shuffle"></i>
                            <p class="md:pl-1 pl-0">Random</p>
                        </a>
                    </div>
                </div>
            </div>

            @auth
                @php $notAvailable = Auth::user()->unreadNotifications()->count() > 0; @endphp
            @else
                @php $notAvailable = false; @endphp
            @endauth

            <!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button
                            class="inline-flex items-center px-3 py-2 border text-sm leading-4 font-medium rounded-md text-gray-500 border-neutral-300/50 dark:text-gray-400 bg-white/20 dark:bg-neutral-950/20 dark:border-neutral-800/50 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                            @auth
                                <img class="h-8 w-8 rounded-full object-cover mr-2"
                                    src="{{ Auth::user()->getAvatar() }}" 
                                    alt="{{ Auth::user()->name }}" />
                            @else
                                <img class="h-8 w-8 rounded-full object-cover mr-2" src="/images/default-avatar.webp"
                                    alt="Guest" />
                            @endauth

                            @auth
                                <div style="display: flex; flex-direction: row; align-items: flex-start;">
                                    {{ Auth::user()->name }}
                                    @if ($notAvailable)
                                        <i class="fa-solid fa-bell text-rose-600"></i>
                                    @endif
                                </div>
                            @else
                                <div style="display: flex; flex-direction: column; align-items: flex-start;">
                                    Guest
                                    <small>{{ __('nav.please-login') }}</small>
                                </div>
                            @endauth

                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        @auth
                            <x-dropdown-link :href="route('profile.show')">
                                <i class="fa-solid fa-user"></i> {{ __('Profile') }}
                            </x-dropdown-link>

                            @if ($notAvailable)
                                <x-dropdown-link :href="route('profile.notifications')">
                                    <i class="fa-solid fa-bell animate-bounce text-rose-600"></i> Notifications
                                </x-dropdown-link>
                            @else
                                <x-dropdown-link :href="route('profile.notifications')">
                                    <i class="fa-solid fa-bell"></i> Notifications
                                </x-dropdown-link>
                            @endif

                            <x-dropdown-link :href="route('profile.comments')">
                                <i class="fa-solid fa-comment"></i> {{ __('nav.comments') }}
                            </x-dropdown-link>

                            <x-dropdown-link :href="route('profile.likes')">
                                <i class="fa-solid fa-heart"></i> {{ __('nav.likes') }}
                            </x-dropdown-link>

                            <x-dropdown-link :href="route('profile.playlists')">
                                <i class="fa-solid fa-rectangle-list"></i> {{ __('nav.playlists') }}
                            </x-dropdown-link>

                            <x-dropdown-link :href="route('user.watched')">
                                <i class="fa-solid fa-eye"></i> {{ __('nav.watched') }}
                            </x-dropdown-link>

                            <x-dropdown-link :href="route('profile.settings')">
                                <i class="fa-solid fa-gear"></i> {{ __('nav.settings') }}
                            </x-dropdown-link>

                            @if (Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                                <x-dropdown-link href="{{ route('admin.upload.index') }}">
                                    <i class="fa-solid fa-user-tie"></i> Admin
                                </x-dropdown-link>
                            @endif
                        @endauth

                        <!-- Authentication -->
                        @auth
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf

                                <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                    <i class="fa-solid fa-right-from-bracket"></i> {{ __('nav.logout') }}
                                </x-dropdown-link>
                            </form>
                        @endauth

                        @guest
                            <x-dropdown-link :href="route('login')">
                                <div
                                    class="relative bg-rose-700 hover:bg-rose-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
                                    <i class="fa-solid fa-arrow-right-to-bracket"></i> {{ __('nav.login') }}
                                </div>
                            </x-dropdown-link>
                        @endguest
                    </x-slot>
                </x-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open"
                    class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-neutral-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-neutral-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    @if ($notAvailable)
                        <span class="absolute mb-4 ml-4 flex h-3 w-3 float-right">
                            <span
                                class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                        </span>
                    @endif
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    @auth
        <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
            <div class="pt-2 pb-3 space-y-1">
                @include('partials.mobilesearch')
            </div>

            <!-- Responsive Settings Options -->
            <div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-600 dark:bg-neutral-900/30">

                <div class="flex justify-center">
                    <img class="h-8 w-8 rounded-full object-cover mr-2"
                        src="{{ Auth::user()->getAvatar() }}"
                        alt="{{ Auth::user()->name }}" />
                    <span class="font-medium text-base text-gray-800 dark:text-neutral-200">
                        {{ Auth::user()->name }}
                    </span>
                </div>


                <div class="mt-3 space-y-1">
                    <x-responsive-nav-link :href="route('profile.show')" :active="request()->routeIs('user.show')">
                        <i class="fa-solid fa-user pr-4"></i> {{ __('nav.profile') }}
                    </x-responsive-nav-link>

                    @if ($notAvailable)
                        <x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
                            <i class="fa-solid fa-bell pr-4"></i> Notifications
                            <span class="relative flex h-3 w-3 float-right top-[6px]">
                                <span
                                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                            </span>
                        </x-responsive-nav-link>
                    @else
                        <x-responsive-nav-link :href="route('profile.notifications')" :active="request()->routeIs('profile.notifications')">
                            <i class="fa-solid fa-bell pr-4"></i> Notifications
                        </x-responsive-nav-link>
                    @endif

                    <x-responsive-nav-link :href="route('profile.comments')" :active="request()->routeIs('profile.comments')">
                        <i class="fa-solid fa-comment pr-4"></i> {{ __('nav.comments') }}
                    </x-responsive-nav-link>

                    <x-responsive-nav-link :href="route('profile.likes')" :active="request()->routeIs('profile.likes')">
                        <i class="fa-solid fa-heart pr-4"></i> {{ __('nav.likes') }}
                    </x-responsive-nav-link>

                    <x-responsive-nav-link :href="route('profile.playlists')" :active="request()->routeIs('profile.playlists')">
                        <i class="fa-solid fa-rectangle-list pr-4"></i> {{ __('nav.playlists') }}
                    </x-responsive-nav-link>

                    <x-responsive-nav-link :href="route('user.watched')" :active="request()->routeIs('user.watched')">
                        <i class="fa-solid fa-eye pr-4"></i> {{ __('nav.watched') }}
                    </x-responsive-nav-link>

                    <!-- Authentication -->
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf

                        <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault();
                                        this.closest('form').submit();">
                            <i class="fa-solid fa-right-from-bracket pr-4"></i> {{ __('nav.logout') }}
                        </x-responsive-nav-link>
                    </form>
                </div>
            </div>
        </div>
    @else
        <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">
            <!-- Search Form Mobile -->
            <div class="pt-2 pb-3 space-y-1">
                @include('partials.mobilesearch')

                <div class="pb-1 text-center w-full">
                    <x-responsive-nav-link :href="route('login')">
                        <div
                            class="relative bg-rose-700 hover:bg-rose-600 text-white font-bold px-4 h-10 rounded text-center p-[10px]">
                            <i class="fa-solid fa-arrow-right-to-bracket"></i> {{ __('nav.login') }}
                        </div>
                    </x-responsive-nav-link>
                </div>
            </div>
        </div>
    @endauth
</nav>
