<script setup>
import {Head, Link, router} from "@inertiajs/vue3";
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
</script>

<template>
    <Head title="Practice">
        <meta name="description" content="Tailwind CSS Practice">
    </Head>

    <Disclosure as="nav" class="bg-green-800" v-slot="{ open }">
        <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
            <div class="relative flex h-16 items-center justify-between">
                <div class="flex items-center px-2 lg:px-0">
                    <div class="shrink-0">
                        <img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
                    </div>
                    <div class="hidden lg:ml-6 lg:block">
                        <div class="flex space-x-4">
                            <!-- Current: "bg-green-900 text-white", Default: "text-green-300 hover:bg-green-700 hover:text-white" -->
                            <Link :href="route('dashboard')" class="rounded-md bg-green-700 px-3 py-2 text-sm font-medium text-white">Dashboard</Link>
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-green-100 hover:bg-green-700 hover:text-white">Team</a>
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-green-100 hover:bg-green-700 hover:text-white">Projects</a>
                            <a href="#" class="rounded-md px-3 py-2 text-sm font-medium text-green-100 hover:bg-green-700 hover:text-white">Calendar</a>
                        </div>
                    </div>
                </div>
                <div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
                    <div class="grid w-full max-w-lg grid-cols-1 lg:max-w-xs">
                        <input type="search" name="search" aria-label="Search" class="col-start-1 row-start-1 block w-full rounded-md bg-green-700 py-1.5 pl-10 pr-3 text-base text-white outline-none placeholder:text-green-100 focus:bg-white focus:text-green-500 focus:placeholder:text-green-400 sm:text-sm/6" placeholder="Search" />
                        <MagnifyingGlassIcon class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-green-400" aria-hidden="true" />
                    </div>
                </div>
                <div class="flex lg:hidden">
                    <!-- Mobile menu button -->
                    <DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-green-100 hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                        <span class="absolute -inset-0.5" />
                        <span class="sr-only">Open main menu</span>
                        <Bars3Icon v-if="!open" class="block size-6" aria-hidden="true" />
                        <XMarkIcon v-else class="block size-6" aria-hidden="true" />
                    </DisclosureButton>
                </div>
                <div class="hidden lg:ml-4 lg:block">
                    <div class="flex items-center">
                        <button type="button" class="relative shrink-0 rounded-full bg-green-800 p-1 text-green-100 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-800">
                            <span class="absolute -inset-1.5" />
                            <span class="sr-only">View notifications</span>
                            <BellIcon class="size-6" aria-hidden="true" />
                        </button>

                        <!-- Profile dropdown -->
                        <Menu as="div" class="relative ml-4 shrink-0">
                            <div>
                                <MenuButton class="relative flex rounded-full bg-green-800 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-800">
                                    <span class="absolute -inset-1.5" />
                                    <span class="sr-only">Open user menu</span>
                                    <img class="size-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
                                </MenuButton>
                            </div>
                            <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
                                <MenuItems 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/5 focus:outline-none">
                                    <MenuItem v-slot="{ active }">
                                        <a href="#" :class="[active ? 'bg-green-100 outline-none' : '', 'block px-4 py-2 text-sm text-green-700']">Your Profile</a>
                                    </MenuItem>
                                    <MenuItem v-slot="{ active }">
                                        <a href="#" :class="[active ? 'bg-green-100 outline-none' : '', 'block px-4 py-2 text-sm text-green-700']">Settings</a>
                                    </MenuItem>
                                    <MenuItem v-slot="{ active }">
                                        <a href="#" :class="[active ? 'bg-green-100 outline-none' : '', 'block px-4 py-2 text-sm text-green-700']">Sign out</a>
                                    </MenuItem>
                                </MenuItems>
                            </transition>
                        </Menu>
                    </div>
                </div>
            </div>
        </div>

        <DisclosurePanel class="lg:hidden">
            <div class="space-y-1 px-2 pb-3 pt-2">
                <!-- Current: "bg-green-900 text-white", Default: "text-green-300 hover:bg-green-700 hover:text-white" -->
                <DisclosureButton as="a" href="#" class="block rounded-md bg-green-900 px-3 py-2 text-base font-medium text-white">Dashboard</DisclosureButton>
                <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-300 hover:bg-green-700 hover:text-white">Team</DisclosureButton>
                <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-300 hover:bg-green-700 hover:text-white">Projects</DisclosureButton>
                <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-300 hover:bg-green-700 hover:text-white">Calendar</DisclosureButton>
            </div>
            <div class="border-t border-green-700 pb-3 pt-4">
                <div class="flex items-center px-5">
                    <div class="shrink-0">
                        <img class="size-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
                    </div>
                    <div class="ml-3">
                        <div class="text-base font-medium text-white">Tom Cook</div>
                        <div class="text-sm font-medium text-green-100">tom@example.com</div>
                    </div>
                    <button type="button" class="relative ml-auto shrink-0 rounded-full bg-green-800 p-1 text-green-100 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-green-800">
                        <span class="absolute -inset-1.5" />
                        <span class="sr-only">View notifications</span>
                        <BellIcon class="size-6" aria-hidden="true" />
                    </button>
                </div>
                <div class="mt-3 space-y-1 px-2">
                    <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-100 hover:bg-green-700 hover:text-white">Your Profile</DisclosureButton>
                    <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-100 hover:bg-green-700 hover:text-white">Settings</DisclosureButton>
                    <DisclosureButton as="a" href="#" class="block rounded-md px-3 py-2 text-base font-medium text-green-100 hover:bg-green-700 hover:text-white">Sign out</DisclosureButton>
                </div>
            </div>
        </DisclosurePanel>
    </Disclosure>

</template>

<style scoped>

</style>
