{{--
    NREMS Header Partial — wireframe v12's `.main-header` (CR-2, spec §12).

    Left:  the drawer burger, the page title, the breadcrumb trail.
    Right: the notifications bell and the user avatar.

    That is the whole of v12's header. Three things differ, each on purpose:

      * The wireframe's avatar is a static <div> with two letters in it, and its
        pages have no dropdown anywhere. Signing out has to be a POST, so the
        avatar is a <button> that discloses a small panel (.user-menu-panel,
        styled in the app-additions tail) holding the identity, the two
        not-yet-built account links and the logout form. The panel follows the
        same tokens as .card and .modal-content, so it reads as part of the same
        system rather than as a Bootstrap dropdown.

      * The bell is a real <button> disclosing the same kind of panel. v12 draws
        a `.badge-dot` on it unconditionally; there is no notification feed yet,
        so claiming an unread item would be a lie and the dot is left out until
        one exists. The panel says so.

      * The Metronic topbar's search button is gone. v12 has no search in the
        header, and the button opened nothing.

    The breadcrumb comes from the page: a view declares
    @section('breadcrumbs') <x-breadcrumbs :items="…" /> @endsection and the
    section is captured before this layout renders. A page that declares none
    (the dashboard, matching index.html) gets the Home-only trail below.

    Both panels are `role="group"`, not `role="menu"`. A menu promises the
    keyboard behaviour of one — arrow keys between items, Home/End, typeahead —
    and this is a disclosure that toggles a box of ordinary links and one submit
    button, which Tab already walks correctly. Claiming the role without the
    behaviour is worse for a screen-reader user than not claiming it, because it
    changes what they are told to expect. For the same reason the children carry
    no `role="menuitem"` (which is only meaningful inside a menu) and the
    triggers carry no `aria-haspopup="menu"`; `aria-expanded` plus
    `aria-controls` is the honest description of what these buttons do.

    @yield('subtitle') is deliberately not rendered here — see the layout.
--}}
@php
    $user = auth()->user();

    // Two letters, the way the wireframe writes them ("VK"): the initial of the
    // first word and of the last, or the first two characters of a single-word
    // name. mb_* because a name is user data and need not be ASCII.
    $words = preg_split('/\s+/', trim((string) ($user?->name ?? '')), -1, PREG_SPLIT_NO_EMPTY) ?: [];

    $initials = match (count($words)) {
        0 => '?',
        1 => mb_strtoupper(mb_substr($words[0], 0, 2)),
        default => mb_strtoupper(mb_substr($words[0], 0, 1).mb_substr(end($words), 0, 1)),
    };
@endphp

<div class="header-left">

    <!--begin::Sidebar drawer toggle (mobile only — see .sidebar-toggle)-->
    <button type="button"
            class="btn-icon sidebar-toggle"
            id="nrems_sidebar_toggle"
            aria-label="{{ __('layout.topbar.open_sidebar') }}"
            aria-controls="nrems_sidebar"
            aria-expanded="false">
        <i class="fa-solid fa-bars" aria-hidden="true"></i>
    </button>
    <!--end::Sidebar drawer toggle-->

    {{-- v12's burger pages wrap the title and the trail in a plain <div>
         beside the button; its projects pages have no burger and lay the two
         out flat, side by side. This is that wrapper, laid out as the flat row
         at desktop and stacking below 768px (nrems-wireframe.css). Without it
         `.header-left` had three flex children, would not shrink, and pushed
         the bell and the avatar off a phone-width viewport. --}}
    <div class="header-title-group">
        {{-- v12's burger pages write these two as <div>s. Kept as <h1> and
             <nav>: the page needs exactly one first-level heading, and the
             trail is navigation. Same classes, so the same rules reach them. --}}
        <h1 class="page-title">@yield('title')</h1>

        @hasSection('breadcrumbs')
            @yield('breadcrumbs')
        @else
            <nav class="breadcrumb-nav" aria-label="{{ __('nrems.breadcrumb.label') }}">
                <a href="{{ route('dashboard') }}">{{ __('nrems.breadcrumb.home') }}</a>
            </nav>
        @endif
    </div>

</div>

<div class="header-right">

    {{--
        Page-supplied header actions (CR-14 §3.1).

        Most v12 management pages put their primary "Add …" button in the
        CONTENT region, on an action bar above the listing card — which is what
        projects, brokers and users all render, because that is where their
        wireframes draw it. **role-management.html draws it in the header
        instead** (line 62, between the title block and the bell), and the
        client asked for pixel fidelity to the pack, so the shell grows one
        optional slot rather than that one page being moved to a shape its
        wireframe does not have.

        A page that declares no `header_actions` section yields nothing here and
        the header is byte-for-byte what it was — which is every screen in the
        application but the roles listing today.
    --}}
    @yield('header_actions')

    <!--begin::Notifications-->
    <div class="user-menu">
        <button type="button"
                class="header-icon"
                id="nrems_notifications_toggle"
                data-nrems-disclosure="nrems_notifications_panel"
                aria-label="{{ __('layout.topbar.notifications') }}"
                aria-controls="nrems_notifications_panel"
                aria-expanded="false">
            <i class="fa-solid fa-bell" aria-hidden="true"></i>
        </button>
        <div class="user-menu-panel" id="nrems_notifications_panel" role="group"
             aria-label="{{ __('layout.topbar.notifications_menu') }}" hidden>
            {{-- No feed yet; the empty state keeps the panel honest. --}}
            <div class="user-menu-item">{{ __('layout.topbar.no_notifications') }}</div>
        </div>
    </div>
    <!--end::Notifications-->

    <!--begin::User menu-->
    <div class="user-menu">
        <button type="button"
                class="user-avatar"
                id="nrems_user_toggle"
                data-nrems-disclosure="nrems_user_panel"
                aria-label="{{ __('layout.topbar.user_menu') }}"
                aria-controls="nrems_user_panel"
                aria-expanded="false">{{ $initials }}</button>

        <div class="user-menu-panel" id="nrems_user_panel" role="group"
             aria-label="{{ __('layout.topbar.user_account') }}" hidden>
            <div class="user-menu-identity">
                <div class="name">{{ $user?->name }}</div>
                <div class="email">{{ $user?->email }}</div>
            </div>

            {{-- Not built yet. `aria-disabled` states it, and `tabindex="-1"`
                 enforces it: the CSS takes the pointer away with
                 `pointer-events: none`, which does nothing to the Tab key, so
                 without this a keyboard user lands on two links that go
                 nowhere. --}}
            <a href="#" class="user-menu-item" aria-disabled="true" tabindex="-1">{{ __('layout.topbar.my_profile') }}</a>
            <a href="#" class="user-menu-item" aria-disabled="true" tabindex="-1">{{ __('layout.topbar.settings') }}</a>

            {{-- Signing out is a state change, so it is a POST form and never a
                 link. :novalidate="false" because the form has no fields to
                 validate — see <x-form.open>. --}}
            <x-form.open id="nrems_logout_form" :action="route('logout')" :novalidate="false" />
                <button type="submit" class="user-menu-item">{{ __('layout.topbar.sign_out') }}</button>
            <x-form.close />
        </div>
    </div>
    <!--end::User menu-->

</div>