
<ion-content padding class="themelogin_background" [ngClass]="lang=='ar' ? 'ar' : ''">
  <div class="cab_login_wrapper">
	<div class="cab_logo">
      <img src="assets/img/cab_logo.png" style="width: 120px;">
    </div>
    <h4>{{'signin.Login'|translate}}</h4>
    <hr>
    <br>
    <div class="cab_form">
<form [formGroup]="signinForm">
      <div class="cab_form_row">
        <div class="cab_phone_number">
          <select class="cab_phone_code floatLeft" formControlName="dial_code">
            <option *ngFor="let code of codes" value=+{{code.dialCode}}>+{{code.dialCode}}</option>
          </select>
          <input class="cab_phone_input floatRight cab_call" placeholder="{{'signin.Mobile Number'|translate}}" formControlName="mobile" type="number">
          <div class="clear"></div>
          <div class="er_req textCenter" *ngIf="signinForm.controls.mobile.invalid && (signinForm.get('mobile').dirty || signinForm.get('mobile').touched)">
            {{'signin.Enter a valid Mobile'|translate}}
          </div>
        </div>
      </div>
      <br>
      <div class="cab_form_row">
        <div class="cab_phone_number">
          <input class="cab_phone_input cab_pass width100" placeholder="{{'signin.Password'|translate}}" type="password" formControlName="password">
          <div class="clear"></div>
          <div class="er_req textCenter" *ngIf="signinForm.controls.password.invalid && (signinForm.get('password').dirty || signinForm.get('password').touched)">
            {{'signin.Minimum 6 characters'|translate}}
          </div>
        </div>
      </div>
</form>
      <br>
      <br>
      <div class="cab_form_row">
        <button ion-button class="cab_sign_btn" (click)="login()">{{'signin.Sign In'|translate}}</button>
      </div>
      <br>
      <div class="cab_form_row textCenter">
        <p (click)="forgot()">{{'signin.Forgot Password'|translate}}</p>
      </div>
  </div>
  </div>
</ion-content>