<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
  <button class="nav_btn theme_color" (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">
    <h4>{{'forgot.Forgot Password'|translate}}</h4>
    <hr>
    <br>
    <div class="cab_form">
      <form [formGroup]="forgotForm">
        <div class="cab_form_row">
          <div class="cab_phone_number">
            <input class="cab_phone_input floatRight cab_mail" type="email" placeholder="{{'forgot.Email'|translate}}" formControlName="email">
            <div class="clear"></div>
            <div class="er_req textCenter" *ngIf="forgotForm.controls.email.invalid && (forgotForm.get('email').dirty || forgotForm.get('email').touched)">
              {{'forgot.Enter a valid Email'|translate}}
            </div>
          </div>
        </div>
      </form>
      <br>
      <br>
      <div class="cab_form_row">
        <button ion-button class="cab_sign_btn" (click)="forgot()" [disabled]="forgotForm.invalid">{{'forgot.Sent recovery password'|translate}}</button>
      </div>
    </div>
  </div>
</ion-content>