<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 @showSidebarToggle}}
            <Layout::Header::SidebarToggle class="mr-2" @onToggle={{@onSidebarToggle}} @disabled={{not @sidebarToggleEnabled}} />
        {{/if}}
        {{#unless (media "isMobile")}}
            <div role="menu" class="next-catalog-menu-items flex mr-4">
                {{#each @menuItems as |menuItem|}}
                    <LinkToExternal
                        @route={{menuItem.route}}
                        id={{concat (dasherize menuItem.route) "-header-button"}}
                        class="next-view-header-item truncate {{menuItem.class}}"
                        role="menuitem"
                    >
                        <div class="w-6">
                            {{#if menuItem.iconComponent}}
                                {{component menuItem.iconComponent options=menuItem.iconComponentOptions}}
                            {{else}}
                                <FaIcon @icon={{menuItem.icon}} @prefix={{menuItem.iconPrefix}} @size="sm" />
                            {{/if}}
                        </div>
                        <div>
                            <span>{{menuItem.title}}</span>
                        </div>
                    </LinkToExternal>
                {{/each}}
            </div>
        {{/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 class="flex-1 flex items-center pr-1 space-x-1">
                <LocaleSelectorTray />
                <NotificationTray @registerAPI={{@registerNotificationTrayApi}} @onClickNotification={{@onClickNotification}} />
                <ChatTray />
            </div>
            <div class="flex-1 flex items-center pr-1">
                <Layout::Header::Dropdown @items={{this.organizationNavigationItems}} @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 @user.company_name}}
                        </div>
                        <div class="text-sm w-10 md:w-14 lg:w-10/12 truncate flex-shrink-0 text-gray-800 dark:text-white">{{@user.company_name}}</div>
                    </div>
                </Layout::Header::Dropdown>
            </div>
            <div class="flex-1 flex items-center justify-end">
                <Layout::Header::Dropdown @items={{this.userNavigationItems}} @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={{@user.avatar_url}}
                            @fallbackSrc="https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png"
                            alt={{@user.name}}
                        />
                    </div>
                </Layout::Header::Dropdown>
            </div>
        </div>
    </div>
</header>