<div
  class="d-flex a-i-center j-c-center p-4"
  *ngIf="!(switcherService.finishedLoading$ | async)"
>
  <c8y-loading></c8y-loading>
</div>
<ng-container *ngIf="switcherService.oneCloudApps$ | async as oneCloudApps">
  <div
    class="app-switcher-sagcloud"
    *ngIf="oneCloudApps.length > 0"
  >
    <a
      class="appLink"
      title="{{ app.name | humanizeAppName | async }}"
      *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
    class="appLink"
    title="{{ app.name | humanizeAppName | async }}"
    [ngClass]="(app | isActiveApp | async) ? 'active' : ''"
    *ngFor="let app of apps"
    [href]="app | appHref : true"
    [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>