@if ((isTopless$ | async) === false) {
<div id="globalBar" class="#globalBar
  bg-gradient-to-b
  from-global-bar-light
  via-global-bar-light
  to-global-bar-dark
  flex justify-between pb-px whitespace-nowrap min-h-10 text-sm">
  <div class="leftContainer flex color-white pl-1 basis-1/4">
    <a href="{{homeUrl()}}" fast-tip="Home" tipPosition="bottom" class="homeImage flex items-center"
      (click)="onHomeClick()" tabindex="-1">
      <img class="max-w-none" src="images/app-company-logo.webp" width="89" height="40" />
    </a>
    <span class="flex items-center pl-4 pr-0 leading-0"><b class="text-white">{{companyHeaderStr()}}</b></span>
  </div>
  <div class="midContainer flex basis-1/2">
    <kendo-menu class="k-menu text-sm flex rounded p-0 m-0
       hover:shadow-[0_0_0_3px_var(--color-highlight)_inset]
       [&:hover_.k-svg-i-menu]:text-gray-400
       [&:hover:active_.k-svg-i-menu]:text-highlight
       [&_.k-menu.k-menu-horizontal]:p-0" fast-tip="Screens" tipPosition="bottom" [items]="modulesMenus()"
      (select)="onMenuSelect($event)" [hoverDelay]="0" [animate]="false" [openOnClick]="{ toggle: 'click' }"
      title="Screens">
      <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
        <div [kendoMenuItemLink]="index">
          <!-- menu entry -->
          @if (item.type === 'entry') {
          <kendo-svg-icon class="w-5 text-white" [icon]="icons.menuIcon"></kendo-svg-icon>
          }
          <!-- main category -->
          @if (item.type === 'category') {
          <div class="flex-grow cursor-default flex items-center py-5 pr-10 pl-2 h-7
            [&_.k-menu-expand-arrow]:right-12
            [&_.k-menu-expand-arrow]:absolute">
            <img class="dark:invert max-w-8 max-h-10 mr-3" [src]="item.text | globalBarIconPipe" />
            <span> {{ item.text }}</span><span [kendoMenuExpandArrow]="index"></span>
          </div>
          }
          <!-- page link -->
          @if (item.type === 'item') {
          <span class="flex items-center pl-2 pr-2 pt-5 pb-5 h-3 cursor-pointer underline">{{ item.text }}</span>
          }
        </div>
      </ng-template>
    </kendo-menu>
    <div class="searchContainer flex flex-grow flex-col basis-200 justify-center">
      <div #searchTip="fast-tip" #searchAnchor [fast-tip]="'(type at least ' + minFilterLength + ' letters)'"
        class="w-0 h-10 absolute" [tipPosition]="'bottom'">
      </div>
      <kendo-autocomplete class="border-transparent bg-transparent
        [&_.k-input-inner]:text-white
        [&_.k-input-inner]:font-bold
        [&_.k-input-inner::placeholder]:text-white/50" #autoComplete [data]="screenItems$ | async" [filterable]="true"
        [placeholder]="'Screen Search'" [valueField]="'name'" (valueChange)="valueChange($event)"
        (filterChange)="filterChange($event)" [(ngModel)]="searchText" [tabindex]="-1" [listHeight]="400">
        <ng-template kendoAutoCompleteItemTemplate let-dataItem>
          <!--fake link since we don't want double navigation from selection of the autocomplete item and the link click-->
          <div class="leading-8 underline">
            <span class="searchName">{{ dataItem.name }}</span>
          </div>
        </ng-template>
      </kendo-autocomplete>
      @if (selectedScreenItem$ | async) {}
    </div>
    <a [routerLink]="[]" class="signOut flex items-center pl-1 pr-1 ml-1 text-white
      hover:text-highlight
      active:brightness-60" (click)="signOut()" tabindex="-1">Sign Out</a>
  </div>
  <div class="flexContainer flex flex-grow"></div>
  <div class="rightContainer flex basis-1/4 justify-end max-w-75" (mouseover)="setMouseOver(true)"
    (mouseout)="setMouseOver(false)">
    @if (!isDashModule()) {
    <div class="favoritesContainer flex
    [&:not(.areOpen)_global-favorites]:invisible
    [&:not(.areOpen)_global-favorites]:opacity-1
    [&.areOpen_global-favorites]:visible
    [&.areOpen_global-favorites]:opacity-100" [class.areOpen]="areFavoritesOpen$ | async">
      <div fast-tip="Favorites" tipPosition="bottom" class="favoritesStar flex items-center justify-end cursor-pointer
      [&:hover_svg]:text-highlight
      [&:active_svg]:brightness-60
        hover:shadow-[0_0_2px_3px_var(--color-highlight)_inset]" title="Favorites" (click)="toggleFavorites()">
        <kendo-svg-icon class="text-white opacity-100 my-2 mx-5" [icon]="icons.starIcon"></kendo-svg-icon>
      </div>
      <global-favorites class="transition-opacity duration-250 ease-in-out" [isOverlay]="true"></global-favorites>
    </div>
    }
    <div class="min-w-9"></div>
  </div>
</div>
}


@if (errorText$ | async; as errorText) {
<fast-window type="error" [width]="800" [height]="400" [width]="800" (close)="closeError()" [title]="'Error'">
  {{errorText}}
</fast-window>
}

@if (infoText$ | async; as infoText) {
<fast-window type="info" [height]="400" [width]="800" (close)="closeInfo()" [title]="'Info'">
  {{infoText}}
</fast-window>
}