@if ((isTopless$ | async) === false) {
<div id="globalBar" class="#globalBar
  bg-linear-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]
       group hover:text-gray-400 active: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') {
          <fast-svg [size]="24" class="text-white group-hover:text-gray-400 group-active:text-highlight transition-colors duration-200" icon="menu"
            [strokeWidth]="3" [strokeColor]="'initial'" [fillColor]="'initial'"></fast-svg>
          }
          <!-- main category -->
          @if (item.type === 'category') {
          <div class="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 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>
      <fast-autocomplete type="global-bar" #autoComplete [data]="screenItems$ | async" [placeholder]="'Screen Search'" [valueField]="'name'"
        (valueChange)="valueChange($event)" (filterChange)="filterChange($event)" [(ngModel)]="searchText" [tabindex]="-1" [listHeight]="400">
        <ng-template #itemTemplate let-dataItem="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>
      </fast-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 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
      group hover:text-highlight active:brightness-60
        hover:shadow-[0_0_2px_3px_var(--color-highlight)_inset]" title="Favorites" (click)="toggleFavorites()">
        <fast-svg class="text-white my-2 mx-5 group-hover:text-highlight transition-colors duration-200" icon="star" [size]="16" [strokeColor]="'currentColor'"
          [fillColor]="'currentColor'"></fast-svg>
      </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>
}

@if (promptMessage()) {
<fast-prompt [promptType]="promptType()" [customButtons]="promptCustomButtons()" (promptResult)="setPromptResult($event)" [title]="promptTitle()"
  [content]="promptMessage()" [minHeight]="150" />
}