<div class="login_wrapper">
    <div class="container">
       <div class="row">
          <div class="login_inner">
             <img src="assets/images/asset_logo.png">
             <hr>
             <h6>
                  {{'forgot.Forgot your PIN' | translate}}
             </h6>
             <div class="login_inner_content">
                  <form [formGroup]="forgotForm" autocomplete="off">
                
                <br>
               <div class="login_row">
                  <input class="" placeholder=" {{'forgot.Phone Number (96655XXXXXXX)' | translate}}" formControlName="phone">
                  <div class="s_error" *ngIf="!forgotForm.controls['phone'].valid && forgotSubmit">
                        <div class="s_validation" *ngIf="forgotForm.controls['phone'].hasError('required')">{{error_msg.required}} </div>
                    </div>
                    <div class="s_error" *ngIf="!forgotForm.controls['phone'].valid && forgotForm.controls['phone'].touched">
                        <div class="s_validation" *ngIf="forgotForm.controls['phone'].hasError('pattern')">{{error_msg.phone}}</div>
                    </div>
                    <div class="s_error" *ngIf="!forgotForm.controls['phone'].valid && forgotForm.controls['phone'].touched && !forgotForm.controls['phone'].hasError('pattern')">
  
                      <div class="s_validation" *ngIf="forgotForm.controls['phone'].hasError('maxlength')">{{error_msg.maxLength}} 11</div>
                        <div class="s_validation" *ngIf="forgotForm.controls['phone'].hasError('minlength')">{{error_msg.minLength}} 9</div>
                    </div>
               </div>
               <div class="login_row" *ngIf="success">
                  <div class="login_pin">
                     <input class="log_pin" type="password" maxlength="1" #focus1 (keyup)="processKeyUp($event, focus2)">
                     <input class="log_pin" type="password" maxlength="1"  #focus2 (keydown.backspace)="processBack($event, focus1)" (keyup)="processKeyUp($event, focus3)">
                     <input class="log_pin" type="password" maxlength="1" #focus3 (keydown.backspace)="processBack($event, focus2)" (keyup)="processKeyUp($event, focus4)">
                     <input class="log_pin" type="password" maxlength="1"  #focus4 (keydown.backspace)="processBack($event, focus3)" (keyup)="processKeyUp($event, focus5)">
                     <input class="log_pin" type="password" maxlength="1"  #focus5 (keydown.backspace)="processBack($event, focus4)" (keyup)="processKeyUp($event, focus6)">
                     <input class="log_pin m0"  type="password" maxlength="1" #focus6 (keydown.backspace)="processBack($event, focus5)"> 
                   </div>
               </div>
               <div *ngIf="error" class="s_validation">{{responseError}}</div>
               <div class="login_row">
                  <button class="login_btn" (click)="reqOtp()" *ngIf="!success">{{'forgot.SEND OTP' | translate}}</button>
                  <div class="row">
                     <div class="col"><button class="login_btn" (click)="verifyOtp()" *ngIf="success">{{'forgot.Verify OTP' | translate}}</button></div>
                     <div class="col"><button class="login_btn" (click)="reqOtp()" *ngIf="success">{{'forgot.Resend' | translate}}</button></div>
                  </div>
               </div>
               </form>
             </div>
          </div>
       </div>
    </div>
 </div>