<c8y-login *ngIf="!(ui.currentUser | async)"></c8y-login>

<div
  *ngIf="(ui.currentUser | async) && !(isSetupNeeded$ | async)"
  [class.head-open]="headerService.headerOpen"
>
  <c8y-header-bar #header></c8y-header-bar>
  <c8y-navigator-outlet
    [nodes]="navigator.items$ | async"
    [open]="headerService.navigatorOpen$ | async"
  >
    <header class="title navigator-slot-top">
      <div class="tenant-brand"></div>
      <c8y-app-icon
        [name]="(ui.state$ | async).app.name"
        [contextPath]="(ui.state$ | async).app.contextPath"
      ></c8y-app-icon>
      <span>{{ (ui.state$ | async).app | humanizeAppName | async }}</span>
    </header>
    <div class="powered-by navigator-slot-bottom" *ngIf="showPoweredBy">
      <p translate>powered by Cumulocity</p>
    </div>
  </c8y-navigator-outlet>

  <div class="alerts">
    <c8y-alert-outlet></c8y-alert-outlet>
  </div>
  <c8y-tabs-outlet
    #tabsComponent
    [tabs]="tabs.items$ | async"
    [navigatorOpen]="headerService.navigatorOpen$ | async"
    [orientation]="tabs.orientation$ | async"
  >
  </c8y-tabs-outlet>
  <c8y-action-bar
    #actionBarComponent
    [navigatorOpen]="headerService.navigatorOpen$ | async"
    [hasTabs]="tabsComponent.hasTabs"
    [isTabsHorizontal]="tabsComponent?.isHorizontal"
    [items$]="actionBar.items$"
  >
  </c8y-action-bar>

  <div
    class="mcontainer"
    [ngClass]="{
      open: headerService.navigatorOpen$ | async,
      'no-apps-margin': noAppsMargin$ | async,
      'horizontal-tabs': tabsComponent.isHorizontal,
      'vertical-tabs': !tabsComponent.isHorizontal,
      'has-tabs': tabsComponent.hasTabs,
      'has-action-bar': !actionBarComponent?.hidden
    }"
  >
    <div class="container-fluid">
      <router-outlet></router-outlet>
      <ng-content select="#c8y-legacy-view"></ng-content>
      <!-- legacy ng-view, will not be migrated atm -->
    </div>
  </div>
</div>

<div *ngIf="(ui.currentUser | async) && (isSetupNeeded$ | async)">
  <c8y-header-bar [simple]="true"></c8y-header-bar>
  <div class="mcontainer">
    <div class="container-fluid">
      <c8y-setup></c8y-setup>
    </div>
  </div>
  <c8y-cookie-banner></c8y-cookie-banner>
</div>