@php
    $user = auth()->user();
    $initials = collect(explode(' ', trim($user->name ?? '')))
        ->filter()
        ->take(2)
        ->map(fn ($part) => mb_substr($part, 0, 1))
        ->implode('') ?: 'U';
@endphp

<header class="topbar">
    <button
        type="button"
        class="topbar__toggle"
        data-sidebar-toggle
        aria-controls="sidebar"
        aria-expanded="false"
    >
        <i class="fa-solid fa-bars" aria-hidden="true"></i>
        <span class="u-visually-hidden">Toggle navigation</span>
    </button>

    <div class="topbar__title">@yield('title', 'Dashboard')</div>

    <div class="topbar__actions">
        <div class="usermenu">
            <button
                type="button"
                class="usermenu__trigger"
                data-usermenu-trigger
                aria-haspopup="true"
                aria-expanded="false"
            >
                <span class="usermenu__avatar" aria-hidden="true">{{ $initials }}</span>
                <span class="usermenu__name">{{ $user->name }}</span>
                <i class="usermenu__caret fa-solid fa-chevron-down" aria-hidden="true"></i>
            </button>

            <div class="usermenu__panel" data-usermenu-panel hidden>
                <div class="usermenu__header">
                    <strong>{{ $user->name }}</strong>
                    <span>{{ $user->email }}</span>
                </div>

                <a class="usermenu__item" href="{{ url('/change_password') }}">
                    <i class="fa-solid fa-key" aria-hidden="true"></i>
                    Change password
                </a>

                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button type="submit" class="usermenu__item usermenu__item--danger">
                        <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
                        Sign out
                    </button>
                </form>
            </div>
        </div>
    </div>
</header>