<ion-app>
  <app-header></app-header>
  @if(isSmartphone){
    <ion-header>
      <oe-system-outage-info></oe-system-outage-info>
    </ion-header>
  }
  @if (navigationService.position() !== null) {
    <ion-content>
      @if (navigationService.position() === 'disabled') {
        <ng-template *ngTemplateOutlet="sidemenu"></ng-template>
        <ng-template *ngTemplateOutlet="content"></ng-template>
      }
      @if (navigationService.position() === 'left') {
        <ion-split-pane style="--side-max-width: 15%; --side-width: 15%" when="xs" contentId="main">
          @if(navigationService.currentNode() !== null){
            <ng-container *ngTemplateOutlet="sidemenu"></ng-container>
          }
          <div id="main">
            <ng-template *ngTemplateOutlet="content"></ng-template>
          </div>
        </ion-split-pane>
      }
      @if (navigationService.position() === 'bottom') {
        <ng-container *ngTemplateOutlet="content"></ng-container>
      }
    </ion-content>
  }

  <oe-navigation></oe-navigation>
  @if (latestIncident !== null) {
    <oe-notification color="warning" [text]="latestIncident.message" [id]="latestIncident.id"></oe-notification>
  }
  <ng-container *ngTemplateOutlet="footer"></ng-container>
</ion-app>

<ng-template #content>
  @if (websocket.status === 'connecting' || websocket.status === 'failed') {
    <ion-grid>
      <ion-row class="ion-justify-content-center">
        <ion-col size="12" size-md="6">
          <ion-card>
            @switch (websocket.status) {
              <!-- Trying to connect to backend -->
              @case ('connecting') {
                <ion-item color="light">
                  <ion-icon slot="start" name="wifi-outline"></ion-icon>
                  <ion-label class="ion-text-wrap">
                    <h2 translate>INDEX.CONNECTION_IN_PROGRESS</h2>
                  </ion-label>
                </ion-item>
              }
              <!-- Connection failed -->
              @case ('failed') {
                <ion-item color="light">
                  <ion-icon slot="start" name="close-circle-outline"></ion-icon>
                  <ion-label class="ion-text-wrap">
                    <h2 translate [translateParams]="{value: environment.edgeShortName}">INDEX.CONNECTION_FAILED</h2>
                    <p color="light">{{ environment.url }}</p>
                  </ion-label>
                </ion-item>
              }
            }
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  }

  @if (isSystemLogEnabled) {
    <systemLog></systemLog>
  }

  <!-- Show Sub-Views -->
  <ion-router-outlet (activate)="onActivate($event)" id="content"></ion-router-outlet>
</ng-template>

<ng-template #sidemenu>
  <ion-menu menuId="main-menu" [contentId]="navigationService.position() === 'left' ? 'main': 'content'" [type]="navigationService.position() === 'left' ? '': 'overlay'" side="start" style="width: 100%; min-width: 20% !important">
    @if(navigationService.position() === 'disabled'){
      <ion-list class="ion-no-padding-bottom">
        @if ((service.metadata | async)?.user; as user) {
          <ion-item tabindex="0" button routerLinkActive="active" (keydown.enter)="navigateToUser()"
            (click)="navigateToUser()">
            <ion-icon style="margin-right: 5%" size="large" color="primary" slot="start" name="person-outline">
            </ion-icon>
            <ion-label>
              <p style="color:var(--ion-text-color); font-weight: bold;">
                {{ user.name }}
              </p>
              <ion-text>
                <p style="color:var(--ion-text-color-shade); ">
                  {{ user.id }}
                </p>
              </ion-text>
            </ion-label>
          </ion-item>
        }

        <!-- Show Link to Overview if more than one Edge is accessible or the globalRole is at least installer -->
        @if ((service.metadata | async); as service) {
          @if (isUserAllowedToSeeOverview) {
            <ion-item button lines="full" routerLinkActive="active" routerLink="/overview" (click)="menu.close()">
              <ion-label>{{"MENU.OVERVIEW" | translate}}</ion-label>
            </ion-item>
          }
        }

        @if (service.currentEdge(); as edge) {
          <nav>
            <ion-item button lines="inset" routerLink="/device/{{ edge.id }}/settings" (click)="menu.close()">
              <ion-label>{{"MENU.EDGE_SETTINGS" | translate}}</ion-label>
            </ion-item>
          </nav>
        }
      </ion-list>
    }
    <ion-content class="ion-no-padding-top">
      <ion-list style="overflow-y: auto;" class="ion-no-padding-top">

        @if (!isSmartphone && navigationService.position() === "left" && navigationService.currentNode() !== null) {
          <oe-navigation-chips (navigate)="navigationService.navigateTo($event)"
            (navigateAbsolute)="navigationService.navigateAbsolute($event)">
          </oe-navigation-chips>
        }
      </ion-list>
    </ion-content>
  </ion-menu>
</ng-template>

<ng-template #footer>
  @if (!isSmartphone) {
    <ion-footer>
        <oe-system-outage-info></oe-system-outage-info>
    </ion-footer>
  }
  @if (isUserAllowedToSeeFooter && !isHistoryDetailView) {
    <oe-footer #appFooter slot="fixed"></oe-footer>
  }
</ng-template>
