@php use App\Settings;use Illuminate\Support\Facades\Auth; @endphp
{{--TODO Clean up mobile menu area--}}
<nav class="bg-indigo-600"
     x-data="{
            mobile_menu_open: false
        }"
     x-id="['mobile-dropdown']"
>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 items-center justify-between">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <img class="h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=300"
                         alt="Your Company">
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <x-layout.navbar.nav-link href="/dashboard" :active="request()->is('dashboard')">Dashboard
                        </x-layout.navbar.nav-link>
                        @if(Auth::user()->school_id)
                            <x-layout.navbar.nav-link href="/students" :active="request()->is('students')">Students
                            </x-layout.navbar.nav-link>
                            <x-layout.navbar.nav-link href="/entries" :active="request()->is('entries')">Entries
                            </x-layout.navbar.nav-link>
                        @endif
                        @if(Auth::user()->isJudge() AND Settings::get('judging_enabled'))
                            <x-layout.navbar.nav-link href="/judging" :active="request()->is('judging')">Judging
                            </x-layout.navbar.nav-link>
                        @endif
                        @if(Auth::user()->is_admin)
                            @include('components.layout.navbar.menus.admin')
                            @include('components.layout.navbar.menus.setup')
                        @endif
                        @if(Auth::user()->canTab())
                            @include('components.layout.navbar.menus.tabulation')
                        @endif
                    </div>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="ml-4 flex items-center md:ml-6">
                    <button type="button"
                            class="relative rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
                        <span class="absolute -inset-1.5"></span>
                        <span class="sr-only">View notifications</span>
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                             aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
                        </svg>
                    </button>

                    <!-- Profile dropdown -->
                    <div>
                        <a href="/test">TEST PAGE</a>
                    </div>
                    <div
                        x-data="{
                                open: false,
                                toggle() {
                                    this.open = this.open ? this.close() : true
                                },
                                close() {
                                    this.open = false
                                }

                            }"
                        x-id="['profile-dropdown']"
                        class="relative ml-3"
                    >
                        <div>
                            <button type="button"
                                    @click="toggle()"
                                    class="relative flex max-w-xs items-center rounded-full bg-indigo-600 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
                                    id="user-menu-button"
                                    :aria-expanded="open"
                                    :aria-controls="$id('profile-dropdown')"
                                    aria-haspopup="true">
                                <span class="absolute -inset-1.5"></span>
                                <span class="sr-only">Open user menu</span>
                                <img class="h-8 w-8 rounded-full" src="{{ Auth::user()->profile_image_url }}" alt="">
                                {{--                                <p class="text-white">{{ Auth::user()->full_name() }} &nbsp; &#9660;</p>--}}
                            </button>
                        </div>

                        <!--
                          Dropdown menu, show/hide based on menu state.

                          Entering: "transition ease-out duration-100"
                            From: "transform opacity-0 scale-95"
                            To: "transform opacity-100 scale-100"
                          Leaving: "transition ease-in duration-75"
                            From: "transform opacity-100 scale-100"
                            To: "transform opacity-0 scale-95"
                        -->
                        <div
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="transform opacity-0 scale-95"
                            x-transition:enter-end="transform opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="transform opacity-100 scale-100"
                            x-transition:leave-end="transform opacity-0 scale-95"
                            @click.outside="close()"
                            :id="$id('profile-dropdown')"
                            style="display: none;"
                            class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                            role="menu"
                            aria-orientation="vertical"
                            aria-labelledby="user-menu-button"
                            tabindex="-1">
                            <!-- Active: "bg-gray-100", Not Active: "" -->
                            <a href="/profile" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
                               tabindex="-1"
                               id="user-menu-item-0">Your Profile</a>
                            <a href="/my_school" class="block px-4 py-2 text-sm text-gray-700" role="menuitem"
                               tabindex="-1"
                               id="user-menu-item-1">Your School</a>
                            <form method="POST" action="/logout">
                                @csrf
                                <button
                                    class="block px-4 py-2 text-sm text-gray-700"
                                    role="menuitem"
                                    tabindex="-1"
                                    id="user-menu-item-2">
                                    Sign out
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="-mr-2 flex md:hidden">
                <!-- Mobile menu button -->
                <button type="button"
                        @click="mobile_menu_open = ! mobile_menu_open"
                        class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600"
                        :aria-controls="$id('mobile-dropdown')"
                        :aria-expanded="mobile_menu_open">
                    <span class="absolute -inset-0.5"></span>
                    <span class="sr-only">Open main menu</span>
                    <!-- Menu open: "hidden", Menu closed: "block" -->
                    <svg class=" h-6 w-6" :class="mobile_menu_open ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
                    </svg>
                    <!-- Menu open: "block", Menu closed: "hidden" -->
                    <svg class=" h-6 w-6" :class="mobile_menu_open ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24"
                         stroke-width="1.5"
                         stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

        </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div class="md:hidden" id="mobile-menu" x-show="mobile_menu_open">
        <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
            <!-- Current: "bg-indigo-700 text-white", Default: "text-white hover:bg-indigo-500 hover:bg-opacity-75" -->
            <a href="/dashboard" class="bg-indigo-700 text-white block rounded-md px-3 py-2 text-base font-medium"
               aria-current="page">Dashboard</a>
            <a href="/students"
               class="text-white hover:bg-indigo-500 hover:bg-opacity-75 block rounded-md px-3 py-2 text-base font-medium">Students</a>
        </div>
        <div class="border-t border-indigo-700 pb-3 pt-4">
            <div class="flex items-center px-5">
                <div class="flex-shrink-0">
                    <img class="h-10 w-10 rounded-full" src="{{ Auth::user()->profile_image_url }}" alt="">
                </div>
                <div class="ml-3">
                    <div class="text-base font-medium text-white">{{ Auth::user()->full_name() }}</div>
                    <div class="text-sm font-medium text-indigo-300">{{ Auth::user()->email }}</div>
                </div>
                <button type="button"
                        class="relative ml-auto flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
                    <span class="absolute -inset-1.5"></span>
                    <span class="sr-only">View notifications</span>
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                         aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0"/>
                    </svg>
                </button>
            </div>
            <div class="mt-3 space-y-1 px-2">
                <a href="/profile"
                   class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">Your
                    Profile</a>
                <a href="/my_school"
                   class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">Your
                    School</a>
                <form method="POST" action="/logout">
                    @csrf
                    <button
                        class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75"
                        role="menuitem"
                        tabindex="-1"
                        id="user-menu-item-2">
                        Sign out
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>