<app-generic-header
  showBack="true"
  [headerText]="'verificationcode,verificationcode' | translate">
</app-generic-header>

<ion-content padding>
  <ion-grid>
    <!-- <ion-row>
      <ion-col [size]="4">
          <img [src]="logo" class="logo" />

        <ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
      </ion-col>
    </ion-row> -->
      <br/>
      <br/>
    <ion-row>
      <ion-col>
          <p class="headerTxt"  > {{'verificationcode,verificationcode' | translate}}</p>
        <br/>
        <p class="leftDiv">{{'verificationcode,title' | translate}}
            <span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span>
             {{'verificationcode,by' | translate}}
             <span *ngIf="loginType == 1 || activeType == 1" class="boldTxtNav">{{'verificationcode , sms' | translate}}, </span>
             <span *ngIf="loginType == 4 || activeType == 4" class="boldTxtNav">{{'verificationcode , whatsapp' | translate}}, </span>

             {{'verificationcode,instruct' | translate}}
             <span class="boldTxtNav">{{'general,submit' | translate}}</span
              ></p>
        <!-- <p class="leftDiv">{{'verificationcode,title' | translate}}<span class="boldTxtNav">{{'verificationcode,verificationcode' | translate}}</span> {{'verificationcode,by' | translate}}<span class="boldTxtNav">{{'verificationcode,sms' | translate}}</span>{{'verificationcode,instruct' | translate}}<span class="boldTxtNav">{{'general,submit' | translate}}</span></p> -->
      </ion-col>
    </ion-row>
  </ion-grid>
  <br/><br/>
  <!-- <p style="color: #c0c0c0; margin-left: 32%">{{'verificationcode.verificationcode' | translate}}</p> -->
  <div>
    <h1 text-center>{{displayTime}}</h1>
    <br/><br/>
    <!-- <ion-item>
       //<ion-label>{{'verificationcode,verificationcode' | translate}}</ion-label>
      // <img class="item-icon" src="assets/imgs/password.png" item-start /> 
      <ion-input required type="tel" maxlength="4" (keyup)="checkOTPLength()"  placeholder="{{translate.trPK('verificationcode','verificationcode')}}"  [(ngModel)]="activationCode"></ion-input>
 </ion-item> -->

  <ion-row class="sms_code" dir="ltr">
    <ion-col [size]="12">
       <ion-input type="tel" [(ngModel)]="smc_code[0]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
  </ion-input>
  
  <ion-input type="tel" [(ngModel)]="smc_code[1]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
  <ion-input type="tel" [(ngModel)]="smc_code[2]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
  <ion-input type="tel" [(ngModel)]="smc_code[3]" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
    inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>

</ion-col>
</ion-row> 

<div *ngIf="showErrorMessage"><p style="color: red; font-weight: bold; font-size: 14px; text-align: center;">{{messageValue}}</p></div>

</div>

</ion-content>
<ion-footer>
    <div class="centerDiv">
        <ion-button class="button-login"  ion-button  (click)="checkVerificationCode()">{{'general,submit' | translate}}</ion-button>
      </div>
</ion-footer>