<div
  class="app-main-header"
  [ngClass]="{
    open: (headerService.navigatorOpen$ | async) && !simple,
    drawerOpen: headerService.rightDrawerOpen$ | async
  }"
>
  <div
    class="header-bar"
    role="banner"
  >
    @if ((headerService.canToggleNavigator$ | async) && !simple) {
      <button
        class="navigator-toggle main-header-button"
        title="{{ 'Toggle navigation bar' | translate }}"
        [attr.aria-expanded]="headerService.navigatorOpen$ | async"
        [attr.aria-controls]="'navigator'"
        type="button"
        data-cy="header-bar--main-header-button"
        (click)="headerService.toggleNavigator()"
      >
        @if (!(headerService.navigatorOpen$ | async)) {
          <i [c8yIcon]="'outdent'"></i>
        }
        @if (headerService.navigatorOpen$ | async) {
          <i [c8yIcon]="'dedent-right'"></i>
        }
      </button>
    }
    <div class="app-view">
      <c8y-app-icon
        [name]="(appState$ | async).app?.name"
        [contextPath]="(appState$ | async).app?.contextPath"
        [app]="(app$ | async) || (appState$ | async).app"
      ></c8y-app-icon>

      <span class="page-header">
        <c8y-title-outlet></c8y-title-outlet>
        @if (!simple) {
          <c8y-breadcrumb-outlet
            class="app-breadcrumbs"
            [breadcrumbs]="breadcrumbService.items$ | async"
          ></c8y-breadcrumb-outlet>
        }
      </span>
    </div>
    @if (!simple) {
      <c8y-search-outlet
        class="main-header-item"
        [search]="searchService.items$ | async"
      ></c8y-search-outlet>
    }
    @if (!simple) {
      <c8y-action-outlet [items]="actionService.items$ | async"></c8y-action-outlet>
    }
    @if (appState.currentUser.value) {
      <c8y-app-switcher
        class="main-header-item"
        title="{{ 'Application switcher' | translate }}"
      ></c8y-app-switcher>
    }
    @if (showNotification$ | async) {
      <button
        class="main-header-button drawer-toggle"
        [attr.aria-label]="appState.currentUser | async | shortenUserName"
        tooltip="{{ appState.currentUser | async | shortenUserName }}
{{ 'New features available' | translate }}"
        placement="left"
        [attr.aria-expanded]="headerService.rightDrawerOpen$ | async"
        [attr.aria-controls]="'right-drawer'"
        type="button"
        [delay]="500"
        (click)="toggleDrawer()"
        [attr.data-cy]="'right-drawer-toggle-button'"
      >
        @if (appState.currentUser | async) {
          <span
            class="user-dot user-dot-notification"
            data-cy="header-bar--user-dot"
          >
            {{ appState.currentUser | async | userNameInitials }}
          </span>
        }
        <span class="close-dot">&times;</span>
      </button>
      @if (!(headerService.rightDrawerOpen$ | async)) {
        <div
          class="p-relative a-s-stretch no-pointer"
          style="order: 4"
        >
          @if (showNotification$ | async) {
            <span class="c8y-pulse c8y-pulse--md active"></span>
          }
        </div>
      }
    } @else {
      <button
        class="main-header-button drawer-toggle"
        [attr.aria-label]="appState.currentUser | async | shortenUserName"
        tooltip="{{ appState.currentUser | async | shortenUserName }}"
        placement="left"
        [attr.aria-expanded]="headerService.rightDrawerOpen$ | async"
        [attr.aria-controls]="'right-drawer'"
        type="button"
        [delay]="500"
        (click)="toggleDrawer()"
        [attr.data-cy]="'right-drawer-toggle-button'"
      >
        @if (appState.currentUser | async) {
          <span
            class="user-dot user-dot-notification"
            data-cy="header-bar--user-dot"
          >
            {{ appState.currentUser | async | userNameInitials }}
          </span>
        }
        <span class="close-dot">&times;</span>
      </button>
    }
  </div>
  <div class="head-toggler">
    <button
      title="{{ 'Toggle' | translate }}"
      type="button"
      data-cy="header-bar--toggle"
      (click)="headerService.toggle()"
    >
      <i [c8yIcon]="'angle-right'"></i>
    </button>
  </div>
  <c8y-drawer-outlet
    id="right-drawer"
    [tabindex]="(headerService.rightDrawerOpen$ | async) ? '0' : '-1'"
    [attr.aria-hidden]="!(headerService.rightDrawerOpen$ | async)"
    position="right"
    [open]="headerService.rightDrawerOpen$ | async"
  ></c8y-drawer-outlet>
  <div
    class="loading-bar"
    [ngClass]="loadingClass$ | async"
  ></div>
</div>