<form #totpForm="ngForm" role="form" class="loginForm" (ngSubmit)="verifyCode()" novalidate>
  <c8y-form-group [hasError]="hasError" [novalidation]="true" [ngClass]="hasError ? 'p-b-24' : ''">
    <label translate for="totpToken">
      Verification code
    </label>

    <input
      id="totpToken"
      [(ngModel)]="model.token"
      name="totpToken"
      type="text"
      autocapitalize="off"
      autocorrect="off"
      autocomplete="off"
      class="form-control"
      placeholder="{{ 'e.g.' | translate }} 624327"
      required
    />

    <c8y-messages>
      <c8y-message *ngIf="hasError" translate>
        Invalid verification code. In case of key loss, please contact your platform administrator.
      </c8y-message>
    </c8y-messages>
    <p id="helpinput" *ngIf="!hasError" class="help-block" translate>
      In case of key loss, please contact your platform administrator.
    </p>
  </c8y-form-group>
  <button *ngIf="!loading"
    title="{{ 'Verify' | translate }}"
    [disabled]="!totpForm.form.valid"
    type="submit"
    class="btn btn-primary btn-lg btn-block form-group"
  >
    {{ 'Verify' | translate }}
  </button>

  <button *ngIf="loading"
    title="{{ 'Verifying…' | translate }}"
    type="submit"
    class="btn btn-primary btn-lg btn-block btn-pending"
  >
    {{ 'Verifying…' | translate }}
  </button>
</form>