<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  *ngIf="authed"
  bit-dialog
  [title]="'twoStepLogin' | i18n"
  [subtitle]="'emailTitle' | i18n"
>
  <ng-container bitDialogContent>
    <ng-container *ngIf="enabled">
      <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
        {{ "twoStepLoginProviderEnabled" | i18n }}
      </bit-callout>
      <strong>{{ "email" | i18n }}:</strong> {{ email }}
    </ng-container>
    <ng-container *ngIf="!enabled">
      <p>{{ "twoFactorEmailDesc" | i18n }}</p>
      <bit-form-field>
        <bit-label>1. {{ "twoFactorEmailEnterEmail" | i18n }}</bit-label>
        <input
          bitInput
          type="text"
          formControlName="email"
          inputmode="email"
          appInputVerbatim="false"
        />
      </bit-form-field>
      <div class="tw-mb-3 tw-flex tw-items-center">
        <button bitButton type="button" buttonType="primary" [bitAction]="sendEmail">
          {{ "sendEmail" | i18n }}
        </button>
        <span class="tw-text-success tw-ml-3" *ngIf="sentEmail">
          {{ "emailSent" | i18n }}
        </span>
      </div>
      <bit-form-field>
        <bit-label>2. {{ "twoFactorEmailEnterCode" | i18n }}</bit-label>
        <input bitInput type="text" formControlName="token" appInputVerbatim />
      </bit-form-field>
    </ng-container>
  </ng-container>
  <ng-container bitDialogFooter>
    <button bitButton bitFormButton type="submit" buttonType="primary">
      <span *ngIf="!enabled">{{ "enable" | i18n }}</span>
      <span *ngIf="enabled">{{ "disable" | i18n }}</span>
    </button>
    <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
      {{ "close" | i18n }}
    </button>
  </ng-container>
</form>
