@props(['title', 'breadcrumbItems'])

<nav class="flex flex-col fixed h-24 md:h-28 top-0 w-full bg-white z-40">

    <div class="flex gap-2 items-center grow justify-between border-b border-b-gray-300 px-2 md:px-10">
        <div class="flex gap-2 items-center">
            <button
                class="p-3 shadow inline-flex items-center text-sm text-gray-800 border rounded focus:outline-none hover:shadow-red-500 hover:border-red-500 transition-all duration-300"
                data-drawer-target="drawer-navigation" data-drawer-show="drawer-navigation"
                aria-controls="drawer-navigation">
                <i class="fas fa-columns"></i>
            </button>

            <h2 class="text-lg text-gray-800 font-semibold">{{ $title }}</h2>
        </div>

        <div class="flex items-center md:order-2">
            <button type="button"
                class="flex items-center gap-1 md:gap-2 text-gray-800 px-2 py-1 shadow border border-gray-300 rounded hover:shadow-red-500 hover:border-red-500 transition-all duration-300"
                id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown"
                data-dropdown-placement="bottom">
                <span class="sr-only">Open user menu</span>
                <div class="flex gap-1 items-center">
                    <div
                        class="bg-red-400 w-9 h-9 flex items-center justify-center font-semibold text-white rounded-full border border-white">
                        {{ auth()->user()->first_letter_of_name }}
                    </div>
                    <span class="text-sm font-semibold hidden md:block">{{ auth()->user()->name }}</span>
                </div>
                <i class="fas fa-angle-down"></i>
            </button>
            <div class="z-50 hidden my-4 text-base list-none bg-white divide-gray-100 rounded shadow border border-gray-300"
                id="user-dropdown">

                <ul class="py-2" aria-labelledby="user-menu-button">
                    <li>
                        <a href="{{ route('app.account-settings.edit') }}"
                            class="block px-4 py-2 text-sm text-gray-800 hover:bg-gray-50">
                            <i class="fas fa-user-cog w-4 text-center me-2"></i>Account Setting
                        </a>
                    </li>
                    <li class="border-t border-t-gray-300">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit"
                                class="text-sm text-left text-red-600 px-4 py-2 hover:bg-gray-100 w-full">
                                <i class="fas fa-sign-out-alt w-4 text-center me-2"></i>Logout
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <x-ui.breadcrumb class="px-10">
        @foreach ($breadcrumbItems as $key => $item)
            <x-ui.breadcrumb-item :last="$loop->last" :breadcrumbItem="$item" />
        @endforeach
    </x-ui.breadcrumb>

</nav>