<header>
    <kendo-appbar positionMode='sticky' themeColor="inherit" class='k-bg-surface-alt' [style.z-index]="10000">
        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-gap-2">
            <button kendoButton [svgIcon]="menuIcon" fillMode="clear" title="Menu" (click)="onMenuClick()"></button>
            <a href="#" class="k-d-none k-d-sm-flex logo-link">
                <img src="assets/rbj-logo.svg" class="k-h-8" alt="RBJ ROLCC AC logo" />
                <span class="logo-text">ROLCC AC Portal</span>
            </a>
            <a href="#" class="k-d-flex k-d-sm-none">
                <img src="assets/rbj-logo.svg" class="k-h-8" alt="RBJ ROLCC AC compact logo" />
            </a>
        </kendo-appbar-section>
        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-center">
            <div class="k-d-flex k-d-md-none">
                <button kendoButton [svgIcon]="searchIcon" fillMode="clear" title="Search"></button>
            </div>
            <div class="k-d-none k-d-md-flex search-box-wrapper">
                <kendo-textbox class="search-box" placeholder="Search..." fillMode="flat">
                    <ng-template kendoTextBoxPrefixTemplate>
                        <kendo-svgicon [icon]="searchIcon"></kendo-svgicon>
                        <kendo-textbox-separator></kendo-textbox-separator>
                    </ng-template>
                </kendo-textbox>
            </div>
        </kendo-appbar-section>
        <kendo-appbar-section class="k-flex-basis-0 k-flex-grow k-justify-content-end k-gap-1.5">
            <kendo-badge-container>
                <button kendoButton [svgIcon]="bellIcon" fillMode="clear" title="Notifications"></button>
                <kendo-badge rounded="medium" position="inside" [align]="badgeAlign" themeColor="error"></kendo-badge>
            </kendo-badge-container>
            <span class="k-appbar-separator k-color-border k-d-none k-d-sm-inline"></span>
            <kendo-dropdownbutton [data]="userMenuItems" fillMode="clear" [svgIcon]="userIcon" [arrowIcon]="true"
                (itemClick)="onUserMenuClick($event)">
                <span class="k-d-none k-d-sm-inline">
                    {{ getDisplayName() || currentUser?.email || 'User' }}
                </span>
            </kendo-dropdownbutton>
        </kendo-appbar-section>
    </kendo-appbar>
</header>