<ion-header class="theme_dark_bg" [ngClass]="lang=='ar' ? 'ar' : ''">
  <button ion-button class="nav_btn theme_color floatLeft" menuToggle>
       <ion-icon name="ios-menu"></ion-icon>
    </button>
  <div class="nav_header_title floatLeft">{{'profile.Edit Profile'|translate}}</div>
  <div class="clear"></div>
</ion-header>
<ion-content padding class="themelogin_background" [ngClass]="lang=='ar' ? 'ar' : ''">
	<div class="cab_edit_profile_wrapper">
		<div class="cab_edit_profilepic_edit">
			<div class="edit_circle">
				<input id="imgSelector" type="file" accept="image/*" (change)="fileChange($event)" />
				<ion-icon name="create"></ion-icon>
			</div>
			<img [src]=profileForm.value.image>
		</div>
		<div class="cab_edit_profile_edit_form">
			<div class="cab_form">
				<form [formGroup]="profileForm">
			  <div class="cab_form_row cab_edit_profile_edit_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="{{'profile.Mobile Number'|translate}}" formControlName="mobile">
					<div class="clear"></div>
				</div>
			</div>
							<div class="cab_req" *ngIf="profileForm.controls.mobile.invalid && (profileForm.get('mobile').dirty || profileForm.get('mobile').touched)">
								{{'profile.Enter a valid Mobile'|translate}}
							</div>
			  <div class="cab_form_row cab_edit_profile_edit_row">
				<div class="cab_phone_number">
					<input class="cab_phone_input cab_user width100" placeholder="{{'profile.Name'|translate}}" formControlName="name">
					<div class="clear"></div>
				</div>
			</div>
							<div class="cab_req" *ngIf="profileForm.controls.name.invalid && (profileForm.get('name').dirty || profileForm.get('name').touched)">
								{{'profile.Enter a valid Name'|translate}}
							</div>
				<div class="cab_form_row cab_edit_profile_edit_row">
					<div class="cab_phone_number">
						<input class="cab_phone_input width100" placeholder="{{'profile.Email'|translate}}" type="email" formControlName="email">
						<div class="clear"></div>
					</div>
				</div>
								<div class="cab_req" *ngIf="profileForm.controls.email.invalid && (profileForm.get('email').dirty || profileForm.get('email').touched)">
									{{'profile.Enter a valid Email'|translate}}
								</div>
			  <div class="cab_form_row cab_edit_profile_edit_row">
				<div class="cab_phone_number">
					<input class="cab_phone_input cab_pass width100" placeholder="{{'profile.Current Password'|translate}}" type="password" formControlName="password">
					<div class="clear"></div>
				</div>
			</div>
							<div class="cab_req" *ngIf="profileForm.controls.password.invalid && (profileForm.get('password').dirty || profileForm.get('password').touched)">
								 {{'profile.Minimum 6 characters'|translate}}
							</div>
				<div class="cab_form_row cab_edit_profile_edit_row">
					<div class="cab_phone_number">
						<input class="cab_phone_input cab_pass width100" placeholder="{{'profile.New Password'|translate}}" type="password" formControlName="new">
						<div class="clear"></div>
					</div>
				</div>
								<div class="cab_req" *ngIf="profileForm.controls.new.invalid && (profileForm.get('new').dirty || profileForm.get('new').touched)">
									{{'profile.Minimum 6 characters'|translate}}
								</div>
			  <div class="cab_form_row cab_edit_profile_edit_row">
				<div class="cab_phone_number">
					<input class="cab_phone_input cab_pass width100" placeholder="{{'profile.Confirm Password'|translate}}" type="password" formControlName="confirm">
					<div class="clear"></div>
				</div>
			</div>
							<div class="cab_req" *ngIf="profileForm.controls.confirm.invalid && (profileForm.get('confirm').dirty || profileForm.get('confirm').touched)">
								{{'profile.Password Mismatches'|translate}}
							</div>
				</form>
			</div>
		</div>
	</div>
</ion-content>
<ion-footer [ngClass]="lang=='ar' ? 'ar' : ''">
	<button ion-button class="cab_footer_btn width100 text_white" (click)="update()" [disabled]="profileForm.invalid">{{'profile.UPDATE'|translate}}</button>
</ion-footer>
