<ion-header [ngClass]="lang=='ar' ? 'ar' : ''">
    <button class="nav_btn floatLeft" (click)="back()">
        <ion-icon name="ios-arrow-back-outline"></ion-icon>
    </button>
</ion-header>
<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>{{'login.Login'|translate}}</h4>
    <hr>
    <br>
    <div class="cab_form">
      <form [formGroup]="loginForm">
      <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="{{'login.Mobile Number'|translate}}" formControlName="mobile" type="number">
          <div class="clear"></div>
            <div class="alert error" *ngIf="loginForm.controls.mobile.invalid && (loginForm.get('mobile').dirty || loginForm.get('mobile').touched)">
              {{'login.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="{{'login.Password'|translate}}" formControlName="password" type="password">
          <div class="alert error" *ngIf="loginForm.controls.password.invalid && (loginForm.get('password').dirty || loginForm.get('password').touched)">
            {{'login.Minimum 6 characters'|translate}}
          </div>
          <div class="clear"></div>
        </div>
      </div>
      </form>
      <br>
      <!-- <div class="cab_form_row textCenter">
          <ion-item>
            <ion-label><p>Remember me</p></ion-label>
            <ion-checkbox></ion-checkbox>
          </ion-item>
      </div> -->
      <br>
      <div class="cab_form_row">
        <button ion-button class="cab_sign_btn" (click)="login()" [disabled]="loginForm.invalid">{{'login.Sign In'|translate}}</button>
      </div>
      <br>
      <div class="cab_form_row textCenter">
        <p (click)="forgot()">{{'login.Forgot Password'|translate}}</p>
      </div>
  </div>
  </div>
</ion-content>
