@php($user = auth()->user())
<header class="no-print sticky top-0 z-30 flex h-16 shrink-0 items-center gap-3 border-b border-slate-200 bg-white/90 px-4 backdrop-blur supports-[backdrop-filter]:bg-white/75 sm:px-6 lg:px-8">
    <button type="button" class="btn-icon -ml-2 lg:hidden" x-data x-on:click="$store.layout.openMobile()">
        <x-icon name="bars-3" class="size-6" /><span class="sr-only">Open navigation</span>
    </button>

    <div class="flex min-w-0 flex-1 items-center gap-3">
        @if ($user->organization)
            <div class="hidden min-w-0 items-center gap-2 rounded-lg bg-slate-100 px-3 py-1.5 sm:flex" title="Current organization">
                <x-icon name="building-office" class="size-4 shrink-0 text-slate-500" />
                <span class="truncate text-sm font-medium text-slate-700">{{ $user->organization->name }}</span>
                <x-ui.badge :tone="$user->organization->type->tone()">{{ $user->organization->type->label() }}</x-ui.badge>
            </div>
        @else
            <div class="hidden items-center gap-2 rounded-lg bg-violet-50 px-3 py-1.5 sm:flex" title="Platform administration">
                <x-icon name="shield-check" class="size-4 text-violet-600" />
                <span class="text-sm font-medium text-violet-800">Platform Administration</span>
            </div>
        @endif
    </div>

    <livewire:notifications.bell />

    <x-ui.dropdown width="w-64">
        <x-slot:trigger>
            <button type="button" class="flex items-center gap-3 rounded-lg p-1.5 hover:bg-slate-100" aria-haspopup="menu">
                <span class="flex size-8 items-center justify-center rounded-full bg-brand-600 text-xs font-semibold text-white" aria-hidden="true">{{ $user->initials() }}</span>
                <span class="hidden text-left md:block">
                    <span class="block max-w-40 truncate text-sm font-medium text-slate-800">{{ $user->name }}</span>
                    <span class="block max-w-40 truncate text-xs text-slate-500">{{ $user->role?->label }}</span>
                </span>
                <x-icon name="chevron-down" class="hidden size-4 text-slate-400 md:block" />
                <span class="sr-only">Open user menu</span>
            </button>
        </x-slot:trigger>

        <div class="border-b border-slate-100 px-3.5 pb-2.5 pt-1.5">
            <p class="truncate text-sm font-medium text-slate-900">{{ $user->name }}</p>
            <p class="truncate text-xs text-slate-500">{{ $user->email }}</p>
        </div>
        <div class="py-1">
            <x-ui.dropdown-item :href="route('profile')" icon="user-circle">My profile &amp; security</x-ui.dropdown-item>
            <x-ui.dropdown-item :href="route('notifications.index')" icon="bell">Notifications</x-ui.dropdown-item>
        </div>
        <div class="border-t border-slate-100 pt-1">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <x-ui.dropdown-item type="submit" icon="arrow-right-start-on-rectangle">Sign out</x-ui.dropdown-item>
            </form>
        </div>
    </x-ui.dropdown>
</header>