@php
    $roleLabel = auth()->user()->roleModel?->name
        ?? \Illuminate\Support\Str::of(auth()->user()->roleSlug() ?? 'user')->replace('-', ' ')->title();
@endphp

<div class="admin-topbar">
    <div class="admin-topbar__header">
        <span class="admin-chip">CMS Workspace</span>
        <div>
            <p class="admin-topbar__title">@yield('title', 'Admin')</p>
            <p class="admin-topbar__subtitle">@yield('subtitle', 'Manage content, inquiries, media, and analytics from one place.')</p>
        </div>
    </div>

    <div class="admin-topbar__actions">
        <div class="relative" x-data="{ open: false }">
            <button type="button" class="admin-icon-button" @click="open = !open" aria-label="Quick create">
                <span class="admin-icon-button__glyph">+</span>
            </button>
            <div x-show="open" x-cloak @click.outside="open = false" x-transition class="absolute right-0 top-14 z-30 w-64 admin-card admin-card--compact">
                <div class="grid gap-2">
                    @if(auth()->user()->isAdmin() || auth()->user()->isEditor())
                        <a href="{{ route('admin.pages.create') }}" class="admin-button admin-button--ghost">New page</a>
                        <a href="{{ route('admin.blog-posts.create') }}" class="admin-button admin-button--ghost">New blog post</a>
                        <a href="{{ route('admin.services.create') }}" class="admin-button admin-button--ghost">New service</a>
                    @endif
                    @if(auth()->user()->isAdmin())
                        <a href="{{ route('admin.media.index') }}" class="admin-button admin-button--ghost">Open media</a>
                    @endif
                </div>
            </div>
        </div>

        <div class="relative" x-data="{ open: false }">
            <button type="button" class="admin-icon-button" @click="open = !open" aria-label="Notifications">
                <span class="admin-icon-button__glyph">i</span>
                @if($adminUnreadContactCount > 0)
                    <span class="notification-badge">{{ $adminUnreadContactCount }}</span>
                @endif
            </button>
            <div x-show="open" x-cloak @click.outside="open = false" x-transition class="absolute right-0 top-14 z-30">
                @include('admin.partials.notification-menu')
            </div>
        </div>

        <div class="relative" x-data="{ open: false }">
            <button type="button" class="admin-user-pill" @click="open = !open">
                <span class="text-left">
                    <span class="block text-sm font-semibold">{{ auth()->user()->name }}</span>
                    <span class="block text-xs text-slate-500">{{ $roleLabel }}</span>
                </span>
                <span class="admin-user-pill__avatar">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</span>
            </button>

            <div x-show="open" x-cloak @click.outside="open = false" x-transition class="absolute right-0 top-16 z-30 w-56 admin-card admin-card--compact">
                <div class="grid gap-2">
                    <a href="{{ route('profile.edit') }}" class="admin-button admin-button--ghost">Profile settings</a>
                    <a href="{{ route('home') }}" class="admin-button admin-button--secondary">Open website</a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="admin-button admin-button--danger w-full">Log out</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
