<app-breadcrumb [breadcrumb]="breadcrumb" />
<section class="log-in-section otp-section section-b-space">
  <div class="container-fluid-lg w-100">
    <div class="row align-items-center">
      <div class="col-xxl-6 col-xl-5 col-lg-6 d-lg-block d-none ms-auto">
        <div class="image-contain">
          <img src="assets/images/inner-page/otp.png" class="img-fluid" alt="image" />
        </div>
      </div>
      <div class="col-xxl-4 col-xl-5 col-lg-6 col-sm-8 mx-auto">
        <app-alert />
        <div class="log-in-box">
          <div class="log-in-title">
            <h3 class="text-title">
              {{ 'please_enter_the_one_time_password_to_verify_your_account' | translate }}
            </h3>
            <h5 class="text-content">
              {{ 'a_code_has_been_sent_to' | translate }} @if(otpType === 'email'){
              <span>{{ email }}</span>
              } @if(otpType === 'number'){
              <span>{{ number.phone }}</span>
              }
            </h5>
          </div>
          <form [formGroup]="form" (ngSubmit)="submit()">
            <div class="outer-otp">
              <div id="otp" class="inner-otp">
                <input
                  type="text"
                  formControlName="otp"
                  maxlength="5"
                  oninput="this.value = this.value?.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');"
                  onKeyPress="if(this.value.length==5) return false;"
                />
              </div>
            </div>
            <app-button [class]="'btn btn-animation w-100 mt-3'" [id]="'forgot_btn'"
              >{{ 'validate' | translate }}</app-button
            >
          </form>
        </div>
      </div>
    </div>
  </div>
</section>
