<div class="login_wrapper">
    <div class="container">
       <div class="row">
          <div class="login_inner">
             <img src="assets/images/asset_logo.png">
             <hr>
             <h6>{{'newpin.New PIN' | translate}}</h6>
             <div class="login_inner_content">
               
                <br>
                    <div class="login_row">
                        <p>{{'changepin.New PIN' | translate}}</p>
                        <div class="login_pin">
                          <input class="log_pin" type="password" maxlength="1" #new1 (keyup)="processKeyUp($event, new2)">
                          <input class="log_pin" type="password" maxlength="1" #new2 (keydown.backspace)="processBack($event, new1)" (keyup)="processKeyUp($event, new3)">
                          <input class="log_pin" type="password" maxlength="1" #new3 (keydown.backspace)="processBack($event, new2)" (keyup)="processKeyUp($event, new4)">
                          <input class="log_pin" type="password" maxlength="1" #new4 (keydown.backspace)="processBack($event, new3)" (keyup)="processKeyUp($event, new5)">
                          <input class="log_pin" type="password" maxlength="1" #new5 (keydown.backspace)="processBack($event, new4)" (keyup)="processKeyUp($event, new6)">
                          <input class="log_pin m0"  type="password" maxlength="1" #new6 (keydown.backspace)="processBack($event, new5)"> 
                        </div>
                     </div>
                     <div class="s_error" *ngIf="newpasswordErr">
                         <div class="s_validation">{{error_msg.password}} </div>
                      </div>
                     <div class="login_row">
                        <p> {{'changepin.Confirm PIN' | translate}}</p>
                        <div class="login_pin">
                          <input class="log_pin" type="password" maxlength="1" #conf1  (keyup)="processKeyUp($event, conf2)">
                          <input class="log_pin" type="password" maxlength="1" #conf2 (keydown.backspace)="processBack($event, conf1)" (keyup)="processKeyUp($event, conf3)">
                          <input class="log_pin" type="password" maxlength="1" #conf3 (keydown.backspace)="processBack($event, conf2)" (keyup)="processKeyUp($event, conf4)">
                          <input class="log_pin" type="password" maxlength="1" #conf4 (keydown.backspace)="processBack($event, conf3)" (keyup)="processKeyUp($event, conf5)">
                          <input class="log_pin" type="password" maxlength="1" #conf5 (keydown.backspace)="processBack($event, conf4)" (keyup)="processKeyUp($event, conf6)">
                          <input class="log_pin m0"  type="password" maxlength="1" #conf6 (keydown.backspace)="processBack($event, conf5)"> 
                        </div>
                     </div>
                     <div class="s_error" *ngIf="confpasswordErr">
                         <div class="s_validation">{{error_msg.password}} </div>
                      </div>
                      <div class="s_error" *ngIf="notMatchErr">
                         <div class="s_validation">{{error_msg.confirm}} </div>
                      </div>
          </div>
       </div>
       <div *ngIf="success" class="s_validation">{{'newpin.Password Reset Successfully' | translate}}</div>
       <div class="login_btn_bay">
          <div class="row">
               
              <div class="col-md-6">
                  <button class="cancel_btn" (click)="goToPage('start/login')">{{'newpin.Cancel' | translate}}</button>
              </div>
              <div class="col-md-6">
                <button class="login_btn" (click)="saveClick()"> {{'newpin.Save' | translate}}</button>
              </div>
           </div>
       </div>
    </div>
 </div>