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

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

        <ion-card color="dark">
          <ion-card-header class="ion-text-center">
            <ion-card-title>Select Recovery Drive</ion-card-title>
            <ion-card-subtitle>Select the drive containing the Embassy you want to recover.</ion-card-subtitle>
          </ion-card-header>


          <ion-card-content class="ion-margin">
            <ng-container *ngIf="!loading && !drives.length">
              <h2>No recovery drives found</h2>
              <p>Please connect a recovery drive to your Embassy and refresh the page.</p>
              <ion-button 
                (click)="refresh()"
                style="text-align:center"
                class="claim-button"
              >
                Refresh
              </ion-button>
            </ng-container>

            <ion-item-group>
              <ng-container *ngIf="loading">
                <ion-skeleton-text animated class="skeleton-header"></ion-skeleton-text>
                <ion-item color="light" style="padding-bottom: 10px;">
                  <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 -->
              <div *ngFor="let drive of drives" class="ion-padding-bottom">
                <h2 class="drive-label">
                  {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || 'Unknown Model' }} - {{ drive.capacity | convertBytes }}
                </h2>
                <ion-item lines="none" button *ngFor="let partition of drive.partitions" [disabled]="!partitionClickable(partition)" (click)="choosePartition(partition)">
                  <ion-icon slot="start" name="save-outline"></ion-icon>
                  <ion-label>
                    <h1>{{ partition.label || partition.logicalname }}</h1>
                    <h2>{{ partition.capacity | convertBytes }}</h2>
                    <p *ngIf="partition['embassy-os'] && partition['embassy-os'].full">
                      <ion-text color="success">
                        Embassy backup detected
                      </ion-text>
                    </p>
                  </ion-label>
                  <div *ngIf="partition['embassy-os'] && partition['embassy-os'].full">
                    <ion-icon *ngIf="partition['embassy-os'].version.startsWith('0.2')" color="success" slot="end" name="lock-open-outline" size="large"></ion-icon>
                    <ion-icon *ngIf="!partition['embassy-os'].version.startsWith('0.2')" color="danger" slot="end" name="lock-closed-outline" size="large"></ion-icon>
                  </div>
                </ion-item>
              </div>
            </ion-item-group>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
