<div class="custom_loader_wrapper" *ngIf="loader">
   <div class="custom_loader_ring"></div>
</div>
<div class="login_wrapper">
    <div class="container">
       <div class="row">
          <div class="login_inner">
             <img src="assets/images/asset_logo.png">
             <hr>
             <div class="login_inner_content">
               <div class="login_row">
                  <input type="email" class="" placeholder="{{'login.Email Address' | translate}}" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required #email_id="ngModel" id="email_id" [(ngModel)]="model.email_id">
                  <div class="md-errors-spacer" [hidden]="email_id.valid || email_id.untouched">
                     <div class="s_error" *ngIf="email_id.errors && email_id.errors.required">
                        <div class="s_validation">{{error_msg.required}} </div>
                     </div>
                     <div class="s_error" *ngIf="email_id.errors && email_id.errors.pattern">
                         <div class="s_validation">{{error_msg.email}} </div>
                     </div>
                 </div>
                 <div class="s_error" *ngIf="model.email_id=='' && loginSubmit && email_id.untouched">
                     <div class="s_validation">{{error_msg.required}} </div>
                  </div>
               </div>
               <div class="login_row">

                  <p>{{'login.Enter Your 6-Digit PIN' | translate}}</p>
                  <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 class="s_error" *ngIf="passwordErr">
                        <div class="s_validation">{{error_msg.password}} </div>
                  </div>
               </div>
               <div *ngIf="loginError" class="s_validation">{{loginMsg}}</div>
               <div class="login_row">
                        <button class="login_btn" (click)="loginClick()">{{'login.Login' | translate}}</button>
               </div>
               <div class="login_row">
                  <h6 (click)="goToPage('start/forgot')">{{'login.Forgot Password' | translate}}</h6>
               </div>
              <!---div class="login_row">
                     <p class="textCenter" style="text-align:center !important;">{{'login.Choose Language' | translate}}</p>
                     <br>
                   
                     <select id="translation" class="translation" #language (change)="changeLang($event.target.value)">
                           <option value="0" selected>English</option>
                           <option value="1">Arabic</option>
                         </select>
               </div--> 
             </div>
          </div>
       </div>
    </div>
 </div>