<ion-app>
  <ion-content>
    <ion-split-pane
      [disabled]="!showMenu"
      (ionSplitPaneVisible)="splitPaneVisible($event)"
      contentId="main-content"
    >
      <ion-menu contentId="main-content" type="overlay">
        <ion-content color="light" scrollY="false">
          <div style="text-align: center" class="ion-padding">
            <img
              style="width: 45%; cursor: pointer"
              src="assets/img/logo.png"
              (click)="goToWebsite()"
            />
          </div>
          <div class="divider"></div>
          <ion-item-group style="padding: 30px 0px">
            <ion-menu-toggle
              auto-hide="false"
              *ngFor="let page of appPages; let i = index"
            >
              <ion-item
                style="padding-left: 10px"
                color="transparent"
                button
                (click)="selectedIndex = i"
                routerDirection="root"
                [routerLink]="[page.url]"
                lines="none"
                detail="false"
                *ngIf="
                  page.url !== '/developer' ||
                  (localStorageService.showDevTools$ | async)
                "
              >
                <ion-icon
                  slot="start"
                  [name]="page.icon"
                  [class]="selectedIndex === i ? 'bold' : 'dim'"
                ></ion-icon>
                <ion-label
                  style="font-family: 'Montserrat'"
                  [class]="selectedIndex === i ? 'bold' : 'dim'"
                >
                  {{ page.title }}
                </ion-label>
                <ng-container *ngIf="page.url === '/embassy'">
                  <ion-icon
                    *ngIf="eosService.updateAvailable$ | async"
                    color="success"
                    size="small"
                    name="rocket-outline"
                  ></ion-icon>
                </ng-container>
                <ion-badge
                  *ngIf="page.url === '/notifications' && unreadCount"
                  color="danger"
                  style="margin-right: 3%"
                  >{{ unreadCount }}</ion-badge
                >
              </ion-item>
            </ion-menu-toggle>
          </ion-item-group>
          <div
            style="
              text-align: center;
              height: 75px;
              position: absolute;
              bottom: 0;
              right: 0;
              width: 100%;
            "
          >
            <div class="divider" style="margin-bottom: 10px"></div>
            <ion-menu-toggle auto-hide="false">
              <ion-item
                button
                lines="none"
                style="
                  --background: transparent;
                  margin-bottom: 86px;
                  text-align: center;
                "
                fill="clear"
                (click)="presentAlertLogout()"
              >
                <ion-label
                  ><ion-text style="font-family: 'Montserrat'" color="dark">
                    Log Out
                  </ion-text></ion-label
                >
              </ion-item>
            </ion-menu-toggle>
          </div>
        </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>

    <section id="preload" style="display: none">
      <!-- 3rd party components -->
      <qr-code value="hello"></qr-code>

      <!-- Ionicons -->
      <ion-icon name="add"></ion-icon>
      <ion-icon name="alert-outline"></ion-icon>
      <ion-icon name="alert-circle-outline"></ion-icon>
      <ion-icon name="aperture-outline"></ion-icon>
      <ion-icon name="arrow-back"></ion-icon>
      <ion-icon name="arrow-up"></ion-icon>
      <ion-icon name="briefcase-outline"></ion-icon>
      <ion-icon name="bookmark-outline"></ion-icon>
      <ion-icon name="cellular-outline"></ion-icon>
      <ion-icon name="chatbubbles-outline"></ion-icon>
      <ion-icon name="checkmark"></ion-icon>
      <ion-icon name="chevron-down"></ion-icon>
      <ion-icon name="chevron-up"></ion-icon>
      <!-- needed for detail="true" on ion-item button -->
      <ion-icon name="chevron-forward"></ion-icon>
      <ion-icon name="close"></ion-icon>
      <ion-icon name="cloud-outline"></ion-icon>
      <ion-icon name="cloud-done-outline"></ion-icon>
      <ion-icon name="cloud-download-outline"></ion-icon>
      <ion-icon name="cloud-offline-outline"></ion-icon>
      <ion-icon name="cloud-upload-outline"></ion-icon>
      <ion-icon name="code-outline"></ion-icon>
      <ion-icon name="cog-outline"></ion-icon>
      <ion-icon name="color-wand-outline"></ion-icon>
      <ion-icon name="construct-outline"></ion-icon>
      <ion-icon name="copy-outline"></ion-icon>
      <ion-icon name="cube-outline"></ion-icon>
      <ion-icon name="desktop-outline"></ion-icon>
      <ion-icon name="download-outline"></ion-icon>
      <ion-icon name="earth-outline"></ion-icon>
      <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
      <ion-icon name="eye-off-outline"></ion-icon>
      <ion-icon name="eye-outline"></ion-icon>
      <ion-icon name="file-tray-stacked-outline"></ion-icon>
      <ion-icon name="finger-print-outline"></ion-icon>
      <ion-icon name="flash-outline"></ion-icon>
      <ion-icon name="folder-open-outline"></ion-icon>
      <ion-icon name="grid-outline"></ion-icon>
      <ion-icon name="help-circle-outline"></ion-icon>
      <ion-icon name="hammer-outline"></ion-icon>
      <ion-icon name="home-outline"></ion-icon>
      <ion-icon name="information-circle-outline"></ion-icon>
      <ion-icon name="key-outline"></ion-icon>
      <ion-icon name="list-outline"></ion-icon>
      <ion-icon name="lock-closed-outline"></ion-icon>
      <ion-icon name="logo-bitcoin"></ion-icon>
      <ion-icon name="mail-outline"></ion-icon>
      <ion-icon name="map-outline"></ion-icon>
      <ion-icon name="newspaper-outline"></ion-icon>
      <ion-icon name="notifications-outline"></ion-icon>
      <ion-icon name="options-outline"></ion-icon>
      <ion-icon name="phone-portrait-outline"></ion-icon>
      <ion-icon name="play-circle-outline"></ion-icon>
      <ion-icon name="power"></ion-icon>
      <ion-icon name="pulse"></ion-icon>
      <ion-icon name="qr-code-outline"></ion-icon>
      <ion-icon name="receipt-outline"></ion-icon>
      <ion-icon name="refresh"></ion-icon>
      <ion-icon name="reload"></ion-icon>
      <ion-icon name="remove"></ion-icon>
      <ion-icon name="remove-circle-outline"></ion-icon>
      <ion-icon name="remove-outline"></ion-icon>
      <ion-icon name="rocket-outline"></ion-icon>
      <ion-icon name="save-outline"></ion-icon>
      <ion-icon name="shield-checkmark-outline"></ion-icon>
      <ion-icon name="storefront-outline"></ion-icon>
      <ion-icon name="swap-vertical"></ion-icon>
      <ion-icon name="terminal-outline"></ion-icon>
      <ion-icon name="trash-outline"></ion-icon>
      <ion-icon name="warning-outline"></ion-icon>
      <ion-icon name="wifi"></ion-icon>

      <!-- Ionic components -->
      <ion-action-sheet></ion-action-sheet>
      <ion-alert></ion-alert>
      <ion-badge></ion-badge>
      <ion-button></ion-button>
      <ion-buttons></ion-buttons>
      <ion-card></ion-card>
      <ion-card-content></ion-card-content>
      <ion-card-header></ion-card-header>
      <ion-checkbox></ion-checkbox>
      <ion-content></ion-content>
      <ion-footer></ion-footer>
      <ion-grid></ion-grid>
      <ion-header></ion-header>
      <ion-popover></ion-popover>
      <ion-content>
        <ion-refresher slot="fixed"></ion-refresher>
        <ion-refresher-content pullingContent="lines"></ion-refresher-content>
        <ion-infinite-scroll></ion-infinite-scroll>
        <ion-infinite-scroll-content
          loadingSpinner="lines"
        ></ion-infinite-scroll-content>
      </ion-content>
      <ion-input></ion-input>
      <ion-item></ion-item>
      <ion-item-divider></ion-item-divider>
      <ion-item-group></ion-item-group>
      <ion-label></ion-label>
      <ion-list></ion-list>
      <ion-loading></ion-loading>
      <ion-modal></ion-modal>
      <ion-note></ion-note>
      <ion-radio></ion-radio>
      <ion-row></ion-row>
      <ion-segment></ion-segment>
      <ion-segment-button></ion-segment-button>
      <ion-select></ion-select>
      <ion-select-option></ion-select-option>
      <ion-slides></ion-slides>
      <ion-spinner name="lines"></ion-spinner>
      <ion-text></ion-text>
      <ion-text style="font-weight: bold">load bold</ion-text>
      <ion-title></ion-title>
      <ion-toast></ion-toast>
      <ion-toggle></ion-toggle>
      <ion-toolbar></ion-toolbar>
      <ion-menu-button></ion-menu-button>
    </section>
  </ion-content>
  <ion-footer
    [ngStyle]="{
      'max-height': osUpdateProgress ? '100px' : '0px',
      overflow: 'hidden',
      'transition-property': 'max-height',
      'transition-duration': '1s',
      'transition-delay': '.05s'
    }"
  >
    <ion-toolbar
      style="border-top: 1px solid var(--ion-color-dark)"
      color="light"
    >
      <ion-list>
        <ion-list-header>
          <ion-label
            >Downloading EOS:
            {{
              (
                (100 * (osUpdateProgress?.downloaded || 1)) /
                (osUpdateProgress?.size || 1)
              ).toFixed(0)
            }}%</ion-label
          >
        </ion-list-header>
        <div style="padding: 0 16px 16px 16px">
          <ion-progress-bar
            color="secondary"
            [value]="
              osUpdateProgress &&
              osUpdateProgress.downloaded / osUpdateProgress.size
            "
          ></ion-progress-bar>
        </div>
      </ion-list>
    </ion-toolbar>
  </ion-footer>
</ion-app>
