@if (TOTPAuthenticator()) {
  <div>
    <p class="mat-h2"><strong i18n>Regenerate backup codes</strong></p>
    <p class="mat-h4" i18n
      >If you have lost your backup codes you can generate new ones,
      invalidating all previous codes.
      <strong>Print out these new codes or save them someplace safe.</strong>
    </p>
    <button
      mat-stroked-button
      color="primary"
      (click)="startRegenCodes()"
      [disabled]="regenCodes()"
      i18n
      >Regenerate codes</button
    >
  </div>
}
@if (regenCodes() || TOTPAuthenticator() === undefined) {
  <div>
    @if (TOTPAuthenticator() === undefined) {
      <p class="mat-h4" i18n
        >Download or copy a list of backup codes. If you ever lose your phone,
        each of these recovery codes can be used one time to regain access to
        your account.
        <strong>Print them out or save them someplace safe.</strong>
      </p>
    }
    <div class="button-group">
      <button mat-flat-button color="primary" (click)="downloadCodes()" i18n
        >Download</button
      >
      <button mat-flat-button color="primary" (click)="copyCodes()" i18n
        >Copy</button
      >
    </div>
    @if (!regenCodes()) {
      <ng-container>
        <p class="body-text-strong" i18n
          >Enter one of the backup codes to confirm that you have saved them:</p
        >
        <form [formGroup]="backupCodeForm">
          <gt-form-error></gt-form-error>
          <mat-form-field appearance="outline">
            <mat-label>Backup code</mat-label>
            <input matInput formControlName="backupCode" />
            @if (backupCode?.invalid) {
              <mat-error>
                @if (backupCode?.errors?.required) {
                  <span i18n>Required</span>
                }
                @if (
                  backupCode?.errors?.minlength || backupCode?.errors?.maxlength
                ) {
                  <span i18n>Code must be 8 digits</span>
                }
                @if (backupCode?.errors?.serverError) {
                  <span i18n>{{ backupCode?.errors?.serverError }}</span>
                }
              </mat-error>
            }
          </mat-form-field>
          <button
            mat-flat-button
            color="primary"
            (click)="verifyBackupCode()"
            [disabled]="!copiedCodes()"
            i18n
            >Next</button
          >
        </form>
      </ng-container>
    }
  </div>
}