{{--
    The theme's top bar: a breadcrumb on the left, the page's controls and the
    account menu on the right.

    The account menu is Alpine (bundled with Livewire), not the theme's
    data-tw-toggle dropdown, which dist/js/app.js binds once on page load and
    would lose on the first wire:navigate.
--}}
@props(['home', 'section', 'title', 'logout', 'avatar' => null, 'role' => null])

<div
    class="top-bar-boxed h-17.5 md:h-16.25 z-51 border-b border-white/8 mt-12 md:mt-0 -mx-3 sm:-mx-8 md:-mx-0 px-3 md:border-b-0 relative md:fixed md:inset-x-0 md:top-0 sm:px-8 md:px-10 md:pt-10 md:bg-linear-to-b md:from-slate-100 md:to-transparent">
    <div class="h-full flex items-center">
        <nav aria-label="breadcrumb" class="-intro-x h-11.25 mr-auto">
            <ol class="breadcrumb breadcrumb-light">
                <li class="breadcrumb-item"><a href="{{ $home }}" wire:navigate>{{ $section }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>

        <div class="flex items-center gap-4 sm:gap-6">
            {{ $slot }}

            <div class="intro-x relative w-8 h-8" x-data="{ open: false }" @click.outside="open = false"
                @keydown.escape.window="open = false">
                <button type="button" @click="open = !open" :aria-expanded="open"
                    class="block w-8 h-8 rounded-full overflow-hidden shadow-lg zoom-in scale-110 bg-white/20 text-white text-sm font-medium">
                    @if ($avatar)
                        <img src="{{ storage_url($avatar) }}" alt="{{ auth()->user()->name }}"
                            class="w-full h-full object-cover">
                    @else
                        {{ mb_strtoupper(mb_substr(auth()->user()->name, 0, 1)) }}
                    @endif
                </button>

                <div x-show="open" x-cloak x-transition.opacity
                    class="absolute right-0 top-full mt-2 w-56 z-50 rounded-md bg-slate-900 p-2 text-white shadow-lg">
                    <div class="p-2">
                        <div class="font-medium truncate">{{ auth()->user()->name }}</div>
                        @if ($role)
                            <div class="text-xs text-white/60 mt-0.5">{{ $role }}</div>
                        @endif
                    </div>
                    <hr class="my-1 border-white/10">
                    <form method="POST" action="{{ $logout }}">
                        @csrf
                        <button type="submit"
                            class="flex w-full items-center rounded-md p-2 text-sm transition hover:bg-white/5">
                            <x-ui.icon name="log-out" class="w-4 h-4 mr-2" />
                            {{ __('Sign out') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>