<div data-ng-if="state === 'require_recovery_key'">
  <div class="row">
    <div class="col-md-12">
      <label data-translate>Enter your account recovery key to complete the password reset procedure</label>
    </div>
  </div>
  <div class="row">
    <div class="col-md-auto">
      <form name="form" autocomplete="off" novalidate>
        <div class="input-group">
          <input class="form-control recoverykeyinput" type="text" placeholder="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX" maxlength="64" size="64" data-ng-model="request.recovery_key" name="recoveryKey" recoverykeyvalidator>
          <div class="input-group-btn">
            <button class="btn btn-primary" data-ng-click="submit()" type="submit" data-translate>Submit</button>
            <a class="btn" href="" data-ng-click="Utils.openSupportModal()" data-uib-tooltip="{{'Request support' | translate}}"><i class="fa-solid fa-life-ring"></i></a>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<div data-ng-if="state === 'require_two_factor_authentication'">
  <div class="row">
    <div class="col-md-auto">
      <div class="form-group">
        <label data-translate>Enter the two factor authentication code</label>
        <input class="form-control" data-ng-model="request.auth_code" type="text" size="6" maxlength="6" required />
      </div>

      <div class="input-group">
        <button class="btn btn-primary" data-ng-disabled="request.auth_code.length !== 6" data-ng-click="submit()" type="submit">
          <span data-translate>Proceed</span>
        </button>

        <a class="btn" data-ng-click="Utils.openSupportModal()" data-uib-tooltip="{{'Request support' | translate}}"><i class="fa-solid fa-life-ring"></i></a>
      </div>
    </div>
  </div>
</div>
