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

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

      <p id="helpinput" *ngIf="!hasError" class="help-block" translate>
        In case of key loss, please contact your platform administrator.
      </p>
    </c8y-form-group>
  </div>
  <div [ngClass]="isModal ? 'modal-footer separator-top bg-level-0 sticky-bottom' : 'text-center'">
    <button
      class="btn btn-default"
      [ngClass]="{ 'btn-lg': !isModal }"
      type="button"
      title="{{ 'Cancel' | translate }}"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      [ngClass]="{ 'btn-lg': !isModal }"
      type="submit"
      title="{{ 'Verify' | translate }}"
      *ngIf="!loading"
      [disabled]="!totpForm.form.valid"
    >
      {{ 'Verify' | translate }}
    </button>

    <button
      class="btn btn-primary btn-pending"
      [ngClass]="{ 'btn-lg': !isModal }"
      type="submit"
      title="{{ 'Verifying…' | translate }}"
      *ngIf="loading"
    >
      {{ 'Verifying…' | translate }}
    </button>
  </div>
</form>