<div class="app-switcher-dropdown" dropdown>
  <button
    class="main-header-button c8y-dropdown dropdown-toggle"
    id="appSwitcherDropdown"
    dropdownToggle
    title="{{ 'Application switcher' | translate }}"
  >
    <i c8yIcon="th" class="icon-2x"></i>
  </button>
  <div
    *dropdownMenu
    class="app-switcher-dropdown-menu dropdown-menu"
    aria-labelledby="appSwitcherDropdown"
  >
    <div class="app-switcher-sagcloud" *ngIf="oneCloudApps && oneCloudApps.length > 0">
      <a
        title="{{ app.name | humanizeAppName | async }}"
        class="appLink"
        *ngFor="let app of oneCloudApps"
        [href]="getHref(app)"
        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 class="app-switcher">
      <a
        title="{{ app.name | humanizeAppName | async }}"
        class="appLink"
        [ngClass]="isActive(app) ? 'active' : ''"
        *ngFor="let app of apps"
        [href]="getHref(app)"
        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>