<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="embassy"></ion-back-button>
    </ion-buttons>
    <ion-title>SSH Keys</ion-title>
  </ion-toolbar>
</ion-header>

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

    <!-- always -->
    <ion-item>
      <ion-label>
        <h2>
          Adding SSH keys to your Embassy is useful for command line access, as well as for debugging purposes.
          <a [href]="docsUrl" target="_blank" rel="noreferrer">View instructions</a>
        </h2>
      </ion-label>
    </ion-item>

    <ion-item-divider>Saved Keys</ion-item-divider>

    <ion-item button detail="false" (click)="presentModalAdd()">
      <ion-icon slot="start" name="add" size="large"></ion-icon>
      <ion-label>Add new key</ion-label>
    </ion-item>

    <!-- loading  -->
    <ng-container *ngIf="loading">
      <ion-item *ngFor="let entry of ['', '']">
        <ion-avatar slot="start" style="margin-right: 30px;">
          <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: 150px; margin-bottom: 18px;"></ion-skeleton-text>
          <ion-skeleton-text animated style="width: 300px;"></ion-skeleton-text>
        </ion-label>
        <ion-button slot="end" fill="clear">
          <ion-skeleton-text animated style="width: 60px; border-radius: 0"></ion-skeleton-text>
        </ion-button>
      </ion-item>
    </ng-container>

    <!-- not loading -->
    <ng-container *ngIf="!loading">
      <ion-item *ngFor="let ssh of sshKeys; let i = index">
        <ion-icon slot="start" name="key-outline" size="large"></ion-icon>
        <ion-label>
          <h1>{{ ssh.hostname }}</h1>
          <h2>{{ ssh['created-at'] | date: 'short' }}</h2>
          <p>{{ ssh.alg }} {{ ssh.fingerprint }}</p>
        </ion-label>
        <ion-button slot="end" fill="clear" color="danger" (click)="presentAlertDelete(i)">
          <ion-icon slot="start" name="close"></ion-icon>
          Remove
        </ion-button>
      </ion-item>
    </ng-container> 

  </ion-item-group>

</ion-content>