@if (title$ | async) {<ng-container></ng-container> }
@if (userInfo$ | async) {<ng-container></ng-container> }
@if (themeCode$ | async) {<ng-container></ng-container> }

@if ((isTopless$ | async) === false) {
<div id="globalBar" class="t-client-globalBar">
  <div class="leftContainer">
    <a kendoTooltip class="homeImage" href="{{homeUrl$ | async}}" tabindex="-1" title="Home">
      <img src="images/app-company-logo.webp" />
    </a>
    <span class="company"><b>{{companyHeaderStr$ | async}}</b></span>
  </div>
  <div class="midContainer">
    <kendo-menu kendoTooltip #screenTip="kendoTooltip" class="mainMenu" [items]="modulesMenus$ | async"
      (select)="onMenuSelect($event)" [hoverDelay]="0" [animate]="false" [openOnClick]="{ toggle: 'click' }"
      title="Screens" (open)="menuOpened($event)" (close)="menuClosed($event)">
      <ng-template kendoMenuItemLinkTemplate let-item="item" let-index="index">
        <div [kendoMenuItemLink]="index">
          <!--menu entry-->
          @if (item.type === 'entry') {
          <kendo-svg-icon [icon]="icons.menuIcon"></kendo-svg-icon>
          }
          <!--main category-->
          @if (item.type === 'category') {
          <div class="global-bar-category global-bar-item">
            <span>{{ item.text }}</span><span [kendoMenuExpandArrow]="index"></span>
          </div>
          }
          <!--page link-->
          @if (item.type === 'item') {
          <span class="fakeLink global-bar-item">{{ item.text }}</span>
          }
        </div>
      </ng-template>
    </kendo-menu>
    <div class="searchContainer">
      <div kendoTooltip class="searchTipAnchor" #searchTip="kendoTooltip" #searchAnchor
        [title]="'(type at least ' + minFilterLength + ' letters)'" [showOn]="'none'" [position]="'bottom'">
      </div>
      <kendo-autocomplete #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="global-bar fakeLink">
            <span class="searchName">{{ dataItem.name }}</span>
          </div>
        </ng-template>
      </kendo-autocomplete>
      @if (selectedScreenItem$ | async) {<ng-container></ng-container> }
    </div>
    <a [routerLink]="[]" class="signOut leftBuffer" (click)="signOut()" tabindex="-1">Sign Out</a>
  </div>
  <div class="flexContainer"></div>
  <div class="rightContainer" (mouseover)="setMouseOver(true)" (mouseout)="setMouseOver(false)">
    @if ((isDashModule$ | async) === false) {
    <div class="favoritesContainer" [class.areOpen]="areFavoritesOpen$ | async">
      <div kendoTooltip class="favoritesStar" title="Favorites">
        <kendo-svg-icon [icon]="icons.starIcon" (click)="toggleFavorites()"></kendo-svg-icon>
      </div>
      <global-favorites [isOverlay]="true"></global-favorites>
    </div>
    }
    <div class="palettePlaceholder"></div>
  </div>
</div>
}

@if (errorText$ | async; as errorText) {
<kendo-dialog class="utilError" (close)="closeError()" [width]="800">
  <kendo-dialog-titlebar>
    Error
    <button type="button" class="k-button button-tiny" (click)="copyError()">
      <kendo-svg-icon [icon]="icons.copyIcon"></kendo-svg-icon>
    </button>
  </kendo-dialog-titlebar>
  <textarea #copyErrorElem readonly rows="12" class="k-textbox">{{errorText}}</textarea>
  <kendo-dialog-actions>
    <button type="button" class="k-button k-primary" (click)="closeError()">OK</button>
  </kendo-dialog-actions>
</kendo-dialog>
}

@if (infoText$ | async; as infoText) {
<kendo-dialog class="utilInfo" (close)="closeInfo()" [width]="800">
  <kendo-dialog-titlebar>
    Info
    <button type="button" class="k-button button-tiny" (click)="copyInfo()">
      <kendo-svg-icon [icon]="icons.copyIcon"></kendo-svg-icon>
    </button>
  </kendo-dialog-titlebar>
  <textarea #copyInfoElem readonly rows="12" class="k-textbox">{{infoText}}</textarea>
  <kendo-dialog-actions>
    <button type="button" class="k-button k-primary" (click)="closeInfo()">OK</button>
  </kendo-dialog-actions>
</kendo-dialog>
}