<c8y-message-banner
  class="c8y-message-banner"
></c8y-message-banner>

<div
  [class.head-open]="headerService.headerOpen"
  *ngIf="showMainView$ | async; else setupView"
>
  <c8y-header-bar
    *ngIf="!headerService.hideHeader"
    #header
  ></c8y-header-bar>
  <c8y-drawer-outlet
    [tabindex]="(headerService.navigatorOpen$ | async) ? '0' : '-1'"
    role="region"
    position="left"
    data-cy="bootstrap.template--c8y-drawer-outlet"
    [open]="headerService.navigatorOpen$ | async"
  ></c8y-drawer-outlet>

  <div class="alerts">
    <c8y-alert-outlet></c8y-alert-outlet>
  </div>
  <c8y-tabs-outlet
    role="navigation"
    #tabsComponent
    [tabs]="tabs.items$ | async"
    [hasHeader]="tabsComponent.hasHeader"
    [navigatorOpen]="headerService.navigatorOpen$ | async"
    [orientation]="tabs.orientation$ | async"
  ></c8y-tabs-outlet>
  <c8y-action-bar
    role="group"
    #actionBarComponent
    [navigatorOpen]="headerService.navigatorOpen$ | async"
    [hasTabs]="tabsComponent.hasTabs"
    [hasHeader]="tabsComponent.hasHeader"
    [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,
      'has-header': headerService.hideHeader
    }"
  >
    <main
      class="container-fluid"
      id="main-content"
      tabindex="-1"
    >
      <router-outlet></router-outlet>
      <ng-content select="#c8y-legacy-view"></ng-content>
      <!-- legacy ng-view, will not be migrated atm -->
    </main>
  </div>
</div>

<ng-template #setupView>
  <div>
    <c8y-header-bar
      *ngIf="!headerService.hideHeader"
      [simple]="true"
    ></c8y-header-bar>
    <div class="alerts">
      <c8y-alert-outlet></c8y-alert-outlet>
    </div>
    <div
      class="mcontainer"
      role="main"
    >
      <div class="container-fluid">
        <c8y-setup></c8y-setup>
      </div>
    </div>
  </div>
</ng-template>

<c8y-cookie-banner></c8y-cookie-banner>