<ion-header>
    <button class="nav_btn" (click)="back()">
        <ion-icon name="ios-arrow-back-outline"></ion-icon>
    </button>
</ion-header>
<ion-content padding class="themelogin_background">
  <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="User_name">
          <div class="alert error" *ngIf="signupForm.controls.User_name.invalid && (signupForm.get('User_name').dirty || signupForm.get('User_name').touched)">
            {{'signup.Enter a valid Name'|translate}}
          </div>
          <div class="clear"></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="Mobile" type="number">
          <div class="clear"></div>
          <div class="alert error" *ngIf="signupForm.controls.Mobile.invalid && (signupForm.get('Mobile').dirty || signupForm.get('Mobile').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="alert error" *ngIf="signupForm.controls.Email.invalid && (signupForm.get('Email').dirty || signupForm.get('Email').touched)">
            {{'signup.Enter a valid Email'|translate}}
          </div>
          <div class="clear"></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="alert error" *ngIf="signupForm.controls.Password.invalid && (signupForm.get('Password').dirty || signupForm.get('Password').touched)">
            {{'signup.Minimum 6 characters'|translate}}
          </div>
          <div class="clear"></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}}" formControlName="confirm" type="password">
          <div class="alert error" *ngIf="signupForm.controls.confirm.invalid && (signupForm.get('confirm').dirty || signupForm.get('confirm').touched)">
            {{'signup.Password mismatches'|translate}}
          </div>
          <div class="clear"></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="alert error" *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>
