<ion-header>
  <ion-toolbar color="light">
    <ion-title>
      {{ !!storageDrive ? 'Set Password' : 'Unlock Drive' }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <form (ngSubmit)="!!storageDrive ? submitPw() : verifyPw()">
    <div style="padding: 8px 24px;">
      <div style="padding-bottom: 16px;">
        <ng-container *ngIf="!!storageDrive">
          <h3>Choose a password for your Embassy. Make it good. Write it down. If you lose this password, you may be permanently locked out of your Embassy.</h3>
          <p *ngIf="hasData" style="color: var(--ion-color-warning);"><b>Warning:</b> data on this drive will be permanently deleted.</p>
        </ng-container>
        <p *ngIf="!storageDrive">Enter the password that was used to encrypt this drive.</p>
      </div>
      
      <h4 class="password-input" *ngIf="!!storageDrive">
        Password:
      </h4>

      <ion-item
        color="dark"
        [class]="pwError ? 'error-border' : password && !!storageDrive ? 'success-border' : ''"
      >
        <ion-input
          [(ngModel)]="password"
          [ngModelOptions]="{'standalone': true}"
          [type]="!unmasked1 ? 'password' : 'text'"
          placeholder="Enter Password"
          debounce="500"
          (ionChange)="validate()"
          maxlength="64"
        ></ion-input>
        <ion-button fill="clear" color="light" (click)="unmasked1 = !unmasked1">
          <ion-icon slot="icon-only" [name]="unmasked1 ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
        </ion-button>
      </ion-item>
      <p style="color: var(--ion-color-danger);">{{ pwError }}</p>
      <ng-container *ngIf="!!storageDrive">
        <h4 class="password-input">
          Verify Password:
        </h4>

        <ion-item color="dark" [class]="verError ? 'error-border' : passwordVer ? 'success-border' : ''">
          <ion-input
            [(ngModel)]="passwordVer"
            [ngModelOptions]="{'standalone': true}"
            [type]="!unmasked2 ? 'password' : 'text'"
            debounce="500"
            (ionChange)="checkVer()"
            maxlength="64"
            placeholder="Retype Password"
          ></ion-input>
          <ion-button fill="clear" color="light" (click)="unmasked2 = !unmasked2">
            <ion-icon slot="icon-only" [name]="unmasked2 ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
          </ion-button>
        </ion-item>
        <p style="color: var(--ion-color-danger);">{{ verError }}</p>
      </ng-container>
    </div>
    <input type="submit" style="display: none" />
  </form>
</ion-content>

<ion-footer>
  <ion-toolbar color="light">
    <!-- <ion-buttons slot="end" class="ion-padding-end"> -->
      <ion-button class="ion-padding-end" slot="end" color="dark" fill="clear" (click)="cancel()">
        Cancel
      </ion-button>
      <ion-button class="ion-padding-end" slot="end" color="dark" fill="clear" strong="true" (click)="!!storageDrive ? submitPw() : verifyPw()">
        {{ !!storageDrive ? 'Finish' : 'Unlock' }}
      </ion-button>
    <!-- </ion-buttons> -->
  </ion-toolbar>
</ion-footer>

