<form
  *ngIf="authed"
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  dialogSize="large"
  [title]="'twoStepLogin' | i18n"
  [subtitle]="'YubiKey'"
>
  <ng-container bitDialogContent>
    <bit-callout
      *ngIf="enabled"
      type="success"
      title="{{ 'enabled' | i18n }}"
      icon="bwi-check-circle"
    >
      {{ "twoStepLoginProviderEnabled" | i18n }}
    </bit-callout>
    <bit-callout type="warning">
      <p bitTypography="body1">{{ "twoFactorYubikeyWarning" | i18n }}</p>
      <ul class="tw-mb-0" bitTypography="body1">
        <li>{{ "twoFactorYubikeySupportUsb" | i18n }}</li>
        <li>{{ "twoFactorYubikeySupportMobile" | i18n }}</li>
      </ul>
    </bit-callout>
    <p bitTypography="body1">{{ "twoFactorYubikeyAdd" | i18n }}:</p>
    <ol bitTypography="body1">
      <li>{{ "twoFactorYubikeyPlugIn" | i18n }}</li>
      <li>{{ "twoFactorYubikeySelectKey" | i18n }}</li>
      <li>{{ "twoFactorYubikeyTouchButton" | i18n }}</li>
      <li>{{ "twoFactorYubikeySaveForm" | i18n }}</li>
    </ol>
    <hr />
    <div class="tw-flex tw-flex-col tw-mt-4" formArrayName="formKeys">
      <div *ngFor="let k of keys; let i = index" [formGroupName]="i">
        <bit-label>{{ "yubikeyX" | i18n: (i + 1).toString() }}</bit-label>
        <bit-form-field *ngIf="!keys[i].existingKey">
          <input bitInput type="password" formControlName="key" appInputVerbatim />
        </bit-form-field>
        <div class="tw-flex tw-justify-between tw-mb-4" *ngIf="keys[i].existingKey">
          <span class="tw-mr-2 tw-self-center">{{ keys[i].existingKey }}</span>
          <button
            bitIconButton="bwi-minus-circle"
            type="button"
            buttonType="dangerGhost"
            (click)="remove(i)"
            label="{{ 'remove' | i18n }}"
          ></button>
        </div>
      </div>
    </div>
    <p bitTypography="body1" class="tw-font-medium tw-mb-2">{{ "nfcSupport" | i18n }}</p>
    <bit-form-control [disableMargin]="true">
      <bit-label>{{ "twoFactorYubikeySupportsNfc" | i18n }}</bit-label>
      <input bitCheckbox type="checkbox" formControlName="anyKeyHasNfc" />
      <bit-hint class="tw-text-sm">{{ "twoFactorYubikeySupportsNfcDesc" | i18n }}</bit-hint>
    </bit-form-control>
  </ng-container>
  <ng-container bitDialogFooter>
    <button bitButton bitFormButton type="submit" buttonType="primary">
      {{ "save" | i18n }}
    </button>
    <button
      *ngIf="enabled"
      bitButton
      bitFormButton
      type="button"
      buttonType="secondary"
      [bitAction]="disable"
    >
      {{ "disableAllKeys" | i18n }}
    </button>
    <button
      bitButton
      bitFormButton
      type="button"
      buttonType="secondary"
      [bitDialogClose]="this.enabled"
    >
      {{ "close" | i18n }}
    </button>
  </ng-container>
</form>
