<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <pwa-back-button></pwa-back-button>
    </ion-buttons>
    <ion-title>Create Backup</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top">
  <ion-item-group>
    <!-- always -->
    <ion-item class="ion-margin-bottom">
      <ion-label>
        <h2>
          Select the drive where you want to create a backup of your Embassy.
        </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>

    <!-- loaded -->
    <ng-container *ngIf="!loading">

      <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>
    </ng-container>
  </ion-item-group>
</ion-content>
