<div
  class="app-switcher-dropdown"
  dropdown
  #appSwitcherDropdown="bs-dropdown"
  [cdkTrapFocus]="appSwitcherDropdown.isOpen"
>
  <button
    class="main-header-button c8y-dropdown dropdown-toggle"
    id="appSwitcherDropdown"
    dropdownToggle
    title="{{ 'Application switcher' | translate }}"
    type="button"
  >
    <i c8yIcon="th" class="icon-2x"></i>
  </button>
  <div
    *dropdownMenu
    class="app-switcher-dropdown-menu dropdown-menu"
    aria-labelledby="appSwitcherDropdown"
    role="group"
  >
    <div
      *ngIf="!(switcherService.finishedLoading$ | async)"
      class="d-flex a-i-center j-c-center p-4"
    >
      <c8y-loading></c8y-loading>
    </div>
    <ng-container *ngIf="switcherService.oneCloudApps$ | async as oneCloudApps">
      <div class="app-switcher-sagcloud" *ngIf="oneCloudApps.length > 0">
        <a
          title="{{ app.name | humanizeAppName | async }}"
          class="appLink"
          *ngFor="let app of oneCloudApps"
          [href]="app | appHref"
          c8yProductExperience
          [actionName]="'appSwitched'"
          [actionData]="{ applicationName: app && app.name }"
        >
          <c8y-app-icon
            [app]="app"
            [name]="app.name"
            [contextPath]="app.contextPath"
          ></c8y-app-icon>
          <span class="text-truncate-wrap">{{ app | humanizeAppName | async }}</span>
        </a>
      </div>
    </ng-container>
    <div class="app-switcher" *ngIf="switcherService.apps$ | async as apps">
      <a
        title="{{ app.name | humanizeAppName | async }}"
        class="appLink"
        [ngClass]="(app | isActiveApp | async) ? 'active' : ''"
        *ngFor="let app of apps"
        [href]="app | appHref"
        [rel]="app.type === 'EXTERNAL' ? 'noopener noreferrer' : ''"
        c8yProductExperience
        [actionName]="'appSwitched'"
        [actionData]="{ applicationName: app && app.name }"
      >
        <c8y-app-icon [app]="app" [name]="app.name" [contextPath]="app.contextPath"></c8y-app-icon>
        <span class="text-truncate-wrap">{{ app | humanizeAppName | async }}</span>
      </a>
    </div>
  </div>
</div>