<header class="next-view-header" ...attributes>
    <div class="next-view-header-left">
        <LinkToExternal @route="console" class="logo navbar-logo mr-4">
            <LogoIcon @brand={{@brand}} @size="8" />
        </LinkToExternal>
        {{#if (and @showSidebarToggle (not (media "isMobile")))}}
            <Layout::Header::SidebarToggle class="mr-2" @onToggle={{@onSidebarToggle}} @disabled={{eq @sidebarToggleEnabled false}} />
        {{/if}}
        {{#unless (media "isMobile")}}
            {{!--
                SmartNavMenu replaces the static `next-catalog-menu-items` div.
                It implements the Priority+ overflow pattern: up to `@maxVisible`
                (default 5) extensions are shown inline; the rest collapse into a
                "More" dropdown.  A gear icon opens the customiser panel where
                users can pin and reorder their favourite extensions.

                Pass `@maxVisible={{n}}` to override the default cap of 5.
                Pass `@mutateMenuItems={{fn}}` to mutate items before rendering
                (same contract as the previous static implementation).
            --}}
            <Layout::Header::SmartNavMenu class="next-catalog-menu-items mr-4" @maxVisible={{or @maxVisibleNavItems 5}} @mutateMenuItems={{@mutateMenuItems}} />
        {{/unless}}
        <div id="view-header-left-content-a"></div>
        {{yield}}
        <div id="view-header-left-content-b"></div>
    </div>
    <div class="next-view-header-right">
        <Layout::Header::LoadingIndicator />
        <div id="view-header-actions"></div>
        <div class="flex items-center justify-between">
            <div id="view-header-tray-items" class="flex-1 flex items-center pr-1 gap-1">
                <RegistryYield @registry="header-tray-items" as |RegistryComponent|>
                    <RegistryComponent @header={{this}} />
                </RegistryYield>
                <LocaleSelectorTray />
                <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                <ChatTray />
            </div>
            <div class="flex-1 flex items-center pr-1">
                <Layout::Header::Dropdown @items={{this.organizationMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                    <div class="next-org-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                        <div class="org-badge">
                            {{first-char this.currentUser.companyName}}
                        </div>
                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{this.currentUser.companyName}}</div>
                    </div>
                </Layout::Header::Dropdown>
            </div>
            <div class="flex-1 flex items-center justify-end">
                <Layout::Header::Dropdown @items={{this.userMenuItems}} @onAction={{@onAction}} class="flex-shrink-0" @triggerClass="flex-shrink-0" as |dd|>
                    <div class="next-user-button-trigger flex-shrink-0 {{if dd.isOpen 'is-open'}}">
                        <Image
                            class="rounded-full h-5 w-5 shadow-sm flex-shrink-0"
                            height="20"
                            width="20"
                            src={{this.currentUser.avatarUrl}}
                            @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
                            alt={{this.currentUser.name}}
                        />
                    </div>
                </Layout::Header::Dropdown>
            </div>
        </div>
    </div>
</header>