<form #totpForm="ngForm" role="form" class="loginForm" (ngSubmit)="verifyCode()" novalidate>
  <div class="d-block p-24 p-b-0">
    <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>
  </div>
  <div class="modal-footer separator-top bg-white sticky-bottom">
    <button
      title="{{ 'Cancel' | translate }}"
      class="btn btn-default"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      *ngIf="!loading"
      title="{{ 'Verify' | translate }}"
      [disabled]="!totpForm.form.valid"
      type="submit"
      class="btn btn-primary form-group"
    >
      {{ 'Verify' | translate }}
    </button>

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