@php
    $user = auth()->user();
    $roleName = $user->role->nama ?? '-';
    $initials = collect(explode(' ', $user->name ?? '?'))->map(fn ($w) => mb_substr($w, 0, 1))->take(2)->implode('');
@endphp

<header class="topbar">
    <button class="topbar__burger" id="sidebarBurger" aria-label="Buka menu" aria-expanded="false">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
    </button>

    <div class="topbar__title">
        <h1>@yield('page-title', 'Dashboard')</h1>
        @hasSection('page-subtitle')
            <p class="topbar__breadcrumb">@yield('page-subtitle')</p>
        @endif
    </div>

    <div class="topbar__user">
        <button class="user-menu__trigger" id="userMenuTrigger" aria-haspopup="true" aria-expanded="false">
            <span class="user-menu__avatar">{{ mb_strtoupper($initials) ?: 'U' }}</span>
            <span class="user-menu__meta">
                <span class="user-menu__name">{{ $user->name ?? 'Pengguna' }}</span>
                <span class="user-menu__role">{{ $roleName }}</span>
            </span>
            <svg class="user-menu__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6" /></svg>
        </button>

        <div class="user-menu__dropdown" id="userMenuDropdown">
            <a href="{{ route('profile.show') }}" class="user-menu__item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.5" /><path d="M4.5 20a7.5 7.5 0 0 1 15 0" /></svg>
                <span>Profil Saya</span>
            </a>
            <a href="{{ route('profile.change-password') }}" class="user-menu__item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9" rx="1.5" /><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3" /></svg>
                <span>Ubah Kata Sandi</span>
            </a>
            <div class="user-menu__divider"></div>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="user-menu__item user-menu__item--danger">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 17l5-5-5-5M20 12H9M12 4H6.5A1.5 1.5 0 0 0 5 5.5v13A1.5 1.5 0 0 0 6.5 20H12" /></svg>
                    <span>Keluar</span>
                </button>
            </form>
        </div>
    </div>
</header>