<ion-content color="light">
  <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
    <ion-row style="height: 100%;">
      <ion-col class="ion-text-center">

        <div style="padding-bottom: 32px;">
          <img src="assets/png/logo.png" style="max-width: 240px;" />
        </div>

        <ion-card color="dark">
          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
            <ion-card-title>{{ loading ? 'Loading Drives' : 'Select Storage Drive'}}</ion-card-title>
            <ion-card-subtitle>Select the drive where all your Embassy data will be stored.</ion-card-subtitle>
          </ion-card-header>

          <ion-card-content class="ion-margin">
            <ng-container *ngIf="!loading && !storageDrives.length">
              <h2 color="light">No drives found</h2>
              <p color="light">Please connect an storage drive to your Embassy and refresh the page.</p>
              <ion-button style="margin-top: 25px;" (click)="refresh()" color="light">
                Refresh
              </ion-button>
            </ng-container>

            <ion-item-group>
              <ng-container *ngIf="loading">
                <ion-item button color="light" lines="none">
                  <ion-avatar slot="start">
                    <ion-skeleton-text animated></ion-skeleton-text>
                  </ion-avatar>
                  <ion-label class="ion-text-wrap">
                    <ion-skeleton-text style="width: 80%; margin: 13px 0;" animated></ion-skeleton-text>
                    <ion-skeleton-text style="width: 60%; margin: 10px 0;" animated></ion-skeleton-text>
                    <ion-skeleton-text style="width: 30%; margin: 8px 0;" animated></ion-skeleton-text>
                  </ion-label>
                </ion-item>
              </ng-container>
              <ng-container *ngIf="storageDrives.length">
                <ion-item (click)="chooseDrive(drive)" class="ion-margin-bottom" button color="light" lines="none" *ngFor="let drive of storageDrives">
                  <ion-icon slot="start" name="save-outline"></ion-icon>
                  <ion-label class="ion-text-wrap">
                    <h1>{{ drive.logicalname }} - {{ drive.capacity | convertBytes }}</h1>
                    <h2 *ngIf="drive.vendor || drive.model">
                      {{ drive.vendor }}
                      <span *ngIf="drive.vendor && drive.model"> - </span>
                      {{ drive.model }}
                    </h2>
                  </ion-label>
                </ion-item>
              </ng-container>
            </ion-item-group>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
