<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Restore From Backup
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">

  <!-- submitting -->
  <text-spinner *ngIf="submitting" text="Initiating Backup"></text-spinner>

  <!-- not submitting -->
  <ion-item *ngIf="!submitting" class="ion-margin-bottom">
    <ion-label>
      <h2>
        Select the drive containing the backup you would like to restore.
        <br />
        <br />
        <ion-text color="warning">
          Warning! All current data for {{ patch.data['package-data'][pkgId].manifest.title }} will be overwritten by the backup.
        </ion-text>
      </h2>
    </ion-label>
  </ion-item>

  <!-- loading -->
  <ng-container *ngIf="loading">
    <ion-item-divider>
      <ion-skeleton-text animated style="width: 120px; height: 16px;"></ion-skeleton-text>
    </ion-item-divider>
    <ion-item>
      <ion-avatar slot="start" style="margin-right: 24px;">
        <ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <ion-skeleton-text animated style="width: 100px; height: 20px; margin-bottom: 12px;"></ion-skeleton-text>
        <ion-skeleton-text animated style="width: 50px; height: 16px; margin-bottom: 16px;"></ion-skeleton-text>
        <ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text>
      </ion-label>
    </ion-item>
  </ng-container>

  <!-- not loading and not submitting -->
  <ion-content *ngIf="!loading && !submitting">
    <ion-item-group>
      <div *ngFor="let disk of disks">
        <ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
        <p class="item-subdivider" *ngIf="disk.vendor || disk.model">
          {{ disk.vendor }}
          <span *ngIf="disk.vendor && disk.model"> - </span>
          {{ disk.model }}
        </p>
        <ion-item button *ngFor="let partition of disk.partitions" (click)="presentModal(partition.logicalname)">
          <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
          <ion-label>
            <h1>{{ partition.label || partition.logicalname }}</h1>
            <h2>{{ partition.capacity | convertBytes }}</h2>
          </ion-label>
        </ion-item>
      </div>
    </ion-item-group>
  </ion-content>
</ion-content>
