<DModalBody>
  <section
    class="user-preferences solo-preference second-factor-backup-preferences"
  >
    <form class="form-horizontal">
      {{#if this.successMessage}}
        <div class="alert alert-success">
          {{this.successMessage}}
        </div>
      {{/if}}

      {{#if this.errorMessage}}
        <div class="alert alert-error">
          {{this.errorMessage}}
        </div>
      {{/if}}

      {{#if this.backupEnabled}}
        {{html-safe
          (i18n
            "user.second_factor_backup.remaining_codes"
            count=this.remainingCodes
          )
        }}
      {{/if}}

      <div class="actions">
        {{#if this.backupEnabled}}
          <DButton
            @class="btn-primary"
            @icon="redo"
            @action={{action "generateSecondFactorCodes"}}
            @type="submit"
            @isLoading={{this.loading}}
            @label="user.second_factor_backup.regenerate"
          />
        {{else}}
          <DButton
            @class="btn-primary"
            @action={{action "generateSecondFactorCodes"}}
            @type="submit"
            @disabled={{this.loading}}
            @label="user.second_factor_backup.enable"
          />
        {{/if}}
      </div>

      <ConditionalLoadingSection @isLoading={{this.loading}}>
        {{#if this.backupCodes}}
          <h3>{{i18n "user.second_factor_backup.codes.title"}}</h3>

          <p>
            {{i18n "user.second_factor_backup.codes.description"}}
          </p>

          <BackupCodes
            @copyBackupCode={{action "copyBackupCode"}}
            @backupCodes={{this.backupCodes}}
          />
        {{/if}}
      </ConditionalLoadingSection>
    </form>
  </section>
</DModalBody>