<div class="row">
  <div class="col-md-12">
    <div>
      <span class="badge badge-primary">1</span>
      <span data-translate>Install an authenticator app on your phone</span>
    </div>
  </div>
</div>
<div class="row mt-3">
  <div class="col-md-12">
    <div>
      <div>
        <span class="badge badge-primary">2</span>
        <span data-translate>Scan the QR code with the app</span>
      </div>
      <br />
      <div class="text-center">
        <qrcode data-ng-if="totp.qrcode_string" data-uib-tooltip="{{'Copy to clipboard' | translate}}" data-ng-click="Utils.copyToClipboard(totp.secret);" data="{{totp.qrcode_string}}" version="2" error-correction-level="Q" size="300" color="#1d1f2a" background="#FFF"></qrcode>
        <div id="OTPSecretForm" data-ng-form="OTPSecretForm" class="form-inline">
          <div class="form-group d-block mx-auto">
            <div class="input-group">
              <input class="form-control" data-ng-class="{'is-invalid': OTPSecretForm.$invalid}" name="secret" data-ng-model="totp.secret" data-ng-disabled="!totp.edit" type="text" data-ng-minlength=32 data-ng-maxlength="32" maxlength="32" size="32" required />
             <span  data-ng-if="totp.edit" class="input-group-append" data-ng-click="OTPSecretForm.$valid && (totp.edit=!totp.edit)" data-uib-tooltip="{{'Save' | translate}}"><button class="btn btn-secondary" data-ng-disabled="OTPSecretForm.$invalid"><i class="fa-solid fa-save"></i></button></span>
             <span  data-ng-if="!totp.edit" class="input-group-append" data-ng-click="totp.edit=!totp.edit" data-uib-tooltip="{{'Edit' | translate}}"><button class="btn btn-secondary" data-ng-disabled="totp.secret.length !== 32"><i class="fa-solid fa-edit"></i></button></span>
           </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-3">
  <div class="col-md-12">
    <div class="form-group">
      <div>
        <span class="badge badge-primary">3</span>
        <span data-translate>Enter the two factor authentication code</span>
      </div>
      <input class="form-control" data-ng-model="totp.token" type="text" size="6" maxlength="6" />
    </div>
  </div>
</div>
