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

<ion-content>
  <div style="padding: 8px 24px;">
    <div style="padding-bottom: 16px;">
      <ng-container *ngIf="!!storageDrive">
        <p>Choose a password for your Embassy. <i>Make it good. Write it down.</i></p>
        <p style="color: var(--ion-color-warning);">Losing your password can result in total loss of data.</p>
      </ng-container>
      <p *ngIf="!storageDrive">Enter the password that was used to encrypt this drive.</p>
    </div>

    <form (ngSubmit)="!!storageDrive ? submitPw() : verifyPw()">
      <p>Password</p>
      <ion-item [class]="pwError ? 'error-border' : password && !!storageDrive ? 'success-border' : ''">
        <ion-input
          #focusInput
          [(ngModel)]="password"
          [ngModelOptions]="{'standalone': true}"
          [type]="!unmasked1 ? 'password' : 'text'"
          placeholder="Enter Password"
          (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>
      <div style="height: 16px;">
        <p style="color: var(--ion-color-danger); font-size: x-small;">{{ pwError }}</p>
      </div>
      <ng-container *ngIf="!!storageDrive">
        <p>Confirm Password</p>
        <ion-item [class]="verError ? 'error-border' : passwordVer ? 'success-border' : ''">
          <ion-input
            [(ngModel)]="passwordVer"
            [ngModelOptions]="{'standalone': true}"
            [type]="!unmasked2 ? 'password' : 'text'"
            (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>
        <div style="height: 16px;">
          <p style="color: var(--ion-color-danger); font-size: x-small;">{{ verError }}</p>
        </div>
      </ng-container>
      <input type="submit" style="display: none" />
    </form>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <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-toolbar>
</ion-footer>

