<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>{{'signup.Sign Up'|translate}}</h4>
    <hr>
    <br>
    <div class="cab_form">
      <form [formGroup]="signupForm">
        <div class="cab_form_row">
          <div class="cab_phone_number">
            <input class="cab_phone_input cab_user width100" placeholder="{{'signup.Name'|translate}}" formControlName="name">
            <div class="clear"></div>
              <div class="er_req textCenter" *ngIf="signupForm.controls.name.invalid && (signupForm.get('name').dirty || signupForm.get('name').touched)">
                {{'signup.Enter a valid Name'|translate}}
              </div>
          </div>
        </div>
        <br>
        <div class="cab_form_row">
          <div class="cab_phone_number">
            <input class="cab_phone_input cab_user width100" placeholder="{{'signup.Username'|translate}}" formControlName="username">
            <div class="clear"></div>
              <div class="er_req textCenter" *ngIf="signupForm.controls.username.invalid && (signupForm.get('username').dirty || signupForm.get('username').touched)">
                {{'signup.Enter a valid Username'|translate}}
              </div>
          </div>
        </div>
        <br>
        <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="{{'signup.Mobile Number'|translate}}" formControlName="phone" type="number">
            <div class="clear"></div>
            <div class="er_req textCenter" *ngIf="signupForm.controls.phone.invalid && (signupForm.get('phone').dirty || signupForm.get('phone').touched)">
              {{'signup.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_mail width100" placeholder="{{'signup.Email'|translate}}" formControlName="email" type="email">
            <div class="clear"></div>
              <div class="er_req textCenter" *ngIf="signupForm.controls.email.invalid && (signupForm.get('email').dirty || signupForm.get('email').touched)">
                {{'signup.Enter a valid Email'|translate}}
              </div>
          </div>
        </div>
        <br>
        <div class="cab_form_row">
          <div class="cab_phone_number">
            <input class="cab_phone_input cab_pass width100" placeholder="{{'signup.Password'|translate}}" formControlName="password" type="password">
            <div class="clear"></div>
              <div class="er_req textCenter" *ngIf="signupForm.controls.password.invalid && (signupForm.get('password').dirty || signupForm.get('password').touched)">
                {{'signup.Minimum 6 characters'|translate}}
              </div>
          </div>
        </div>
        <br>
        <div class="cab_form_row">
          <div class="cab_phone_number">
            <input class="cab_phone_input cab_confirmpass width100" placeholder="{{'signup.Confirm Password'|translate}}" type="password" formControlName="confirm">
            <div class="clear"></div>
              <div class="er_req textCenter" *ngIf="signupForm.controls.confirm.invalid && (signupForm.get('confirm').dirty || signupForm.get('confirm').touched)">
                {{'signup.Password mismatches'|translate}}
              </div>
          </div>
        </div>
        <br>
        <div class="cab_form_row textCenter">
          <ion-item style="width:100% !important;">
            <ion-label>
              <p>{{'signup.I accept terms & condition'|translate}}</p>
            </ion-label>
            <ion-checkbox formControlName="terms"></ion-checkbox>
          </ion-item>
          <div class="er_req textCenter" *ngIf="signupForm.controls.terms.invalid && (signupForm.get('terms').dirty || signupForm.get('terms').touched)">
            {{'signup.Please accept terms & conditions'|translate}}
          </div>
        </div>
      </form>

      <br>
      <div class="cab_form_row">
        <button ion-button class="cab_sign_btn" (click)="register()" [disabled]="signupForm.invalid">{{'signup.Sign Up'|translate}}</button>
      </div>
      <br>
    </div>
  </div>
</ion-content>