@php
    $unreadMessages = auth()->user()->can('messages.view')
        ? \App\Models\ContactMessage::query()->unread()->count()
        : 0;
@endphp

<header class="sticky top-0 z-20 flex h-16 items-center gap-4 border-b border-border bg-surface px-4 sm:px-6 lg:px-8">
    <button type="button" @click="sidebarOpen = true"
            class="rounded-lg p-2.5 text-text-secondary transition hover:bg-surface-muted lg:hidden"
            aria-label="{{ __('Open menu') }}">
        <x-icon name="menu" class="size-5" />
    </button>

    <h1 class="truncate font-display text-base font-semibold text-text">
        @hasSection('heading')
            @yield('heading')
        @else
            @yield('title', __('Dashboard'))
        @endif
    </h1>

    <div class="ml-auto flex items-center gap-2">
        @can('messages.view')
            <a href="{{ route('admin.messages.index') }}"
               class="relative rounded-lg p-2.5 text-text-secondary transition hover:bg-surface-muted"
               aria-label="{{ trans_choice(':count unread message|:count unread messages', $unreadMessages, ['count' => $unreadMessages]) }}">
                <x-icon name="inbox" class="size-5" />
                @if ($unreadMessages)
                    <span class="absolute right-1 top-1 flex size-4 items-center justify-center rounded-full bg-error text-[0.5625rem] font-semibold text-white">
                        {{ min($unreadMessages, 99) }}
                    </span>
                @endif
            </a>
        @endcan

        <div x-data="{ open: false }" class="relative">
            <button type="button" @click="open = !open" :aria-expanded="open"
                    class="flex items-center gap-2.5 rounded-lg px-2 py-1.5 transition hover:bg-surface-muted">
                @if (auth()->user()->avatar)
                    <img src="{{ asset_path(auth()->user()->avatar) }}" alt="" class="size-8 rounded-full object-cover">
                @else
                    <span class="flex size-8 items-center justify-center rounded-full bg-primary text-xs font-semibold text-white">
                        {{ auth()->user()->initials() }}
                    </span>
                @endif
                <span class="hidden text-sm font-medium text-text sm:block">{{ auth()->user()->name }}</span>
                <x-icon name="chevron-down" class="size-3.5 text-text-muted" />
            </button>

            <div x-show="open" x-cloak @click.outside="open = false" x-transition.opacity
                 class="absolute right-0 top-full mt-1 w-56 rounded-xl border border-border bg-surface py-2 shadow-raised">

                <div class="border-b border-border px-4 pb-2.5">
                    <p class="truncate text-sm font-medium text-text">{{ auth()->user()->name }}</p>
                    <p class="truncate text-xs text-text-muted">{{ auth()->user()->getRoleNames()->implode(', ') }}</p>
                </div>

                <a href="{{ route('admin.profile.edit') }}" class="block px-4 py-2.5 text-sm text-text-secondary transition hover:bg-surface-muted">
                    {{ __('My profile') }}
                </a>

                @can('settings.view')
                    <a href="{{ route('admin.settings.edit') }}" class="block px-4 py-2.5 text-sm text-text-secondary transition hover:bg-surface-muted">
                        {{ __('Site settings') }}
                    </a>
                @endcan

                <form action="{{ route('logout') }}" method="POST" class="mt-1 border-t border-border pt-1">
                    @csrf
                    <button type="submit" class="block w-full px-4 py-2.5 text-left text-sm text-error transition hover:bg-error/5">
                        {{ __('Sign out') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>