<!-- <div class="user-option">
	<div *ngIf="userData" class="content">
		<div class="header"></div>
		<div class="content-panel">
			<div class="user-profile-image" titile="Profile">
				<img [src]="userData.profileImageLink" onerror="this.src = '/ecm/assets/images/w_user_128_128.png'; " class="profile-image profile-image-128" title="{{userData.name}}" /> 
				<span md-button class="change-profile-image" (click)="openDialog();">Change</span>
			</div>
			<div class="data">
				<div class="name">{{userData.NAME}}</div>
				<div class="user_id">( {{userData.USER_ID}} )</div>
				<div class="email_id">{{userData.EMAIL_ID}}</div>
				<div class="mobile_no">{{userData.MOBILE_NO}}</div>
				<button md-button class="my-profile">My Profile</button>
			</div>
		</div>
		<div class="button-panel">
			<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>
		</div>
	</div>
</div> -->

<div *ngIf="activeScreen == 'userInfoScreen'" >
	<ng-container *ngTemplateOutlet="userInfoScreen"></ng-container>
</div>
<div  *ngIf="activeScreen == 'changePwdScreen'" >
	<ng-container *ngTemplateOutlet="changePwdScreen"></ng-container>
</div>
<div class="successFormscreen"  *ngIf="activeScreen == 'successForm' &&  fullProfile">
		<span>Password change successfully</span>
</div>

<ng-template #userInfoScreen>
<div class="user-option">
	<div *ngIf="userData" class="content">
		<div class="content-panel">
			<div class="user-info-section">
			<div>
				<div class="user-profile-image" titile="Profile">
					<img [src]="userData.profileImageLink" (error)="this.src = hostUrl + '/ecm/assets/images/w_user_128_128.png'; " class="profile-image profile-image-128" title="{{userData.NAME}}" /> 
				</div>
				<i class="image-edit-icon" (click)="openDialog();"></i>
			</div>
			<span class="user-prof-name"> {{userData.NAME}}</span>
			<span class="user-prof-email"> {{userData.EMAIL_ID}} </span>
			</div>
			<div class="user-profile-location-section">
				<div class="user-profile-location" *ngIf="userLocation.address">{{userLocation.address}}</div>
				<div class="update-location-container">
					<i class="material-icons ecm-location-icon">&#xE0C8;</i> <span (click)="updateLocation();" class="update-location-link"> Update Location </span>
				</div>
			</div>
			<div class="user-profile-buttons">
				<button md-button class="chg-pwd-button" (click)="activeScreen = 'changePwdScreen';" >Change Password</button>
				<button md-button class="logout-button" (click)="logout(); closePanel.emit();">Logout</button>
			</div>
		</div>
	</div>
</div>
</ng-template>


<ng-template #changePwdScreen>
<!-- 	<div [ngClass]="!fullProfile ? 'changePass-userProfile' : 'changePass-form'">
	    <h4 *ngIf="!fullProfile">Change Password</h4>   -->
<!-- 	    <div class="changePass-form"> -->
<!-- 	    <h4 *ngIf="!fullProfile">Change Password</h4>    -->
<!-- 	    <form #changePass="ngForm" (ngSubmit)="changePassword(changePass);" novalidate autocomplete="off"> -->
<!-- 			<md-input-container class="password-input-container" [hideRequiredMarker] = "true"> -->
<!-- 			     <input mdInput class="username-input" placeholder="Current Password" required name="cpassword" [(ngModel)]="_current_password" #current_password="ngModel" (keydown)="clearTimer();" type = 'password'  -->
<!-- 			     #curPassElem (focus) = "scrollIntoView(curPassElem);" />  -->
<!-- 			     <md-error *ngIf="current_password.errors && current_password.dirty" class="">Password required</md-error>  -->
<!--     		</md-input-container> -->
<!-- 			<md-input-container class="password-input-container" [hideRequiredMarker] = "true"> -->
<!-- 			     <input mdInput class="username-input" placeholder="New Password" required name="npassword" [(ngModel)]="_new_password" #new_password="ngModel" (keydown)="clearTimer();" type = 'password'  -->
<!-- 			     #newPassElem (focus) = "scrollIntoView(newPassElem);" />  -->
<!-- 			     <md-error *ngIf="new_password.errors && new_password.dirty" class="">Password required</md-error>  -->
<!--     		</md-input-container> -->
<!--     		<md-input-container class="password-input-container" [hideRequiredMarker] = "true"> -->
<!-- 			     <input mdInput class="username-input" placeholder="Confirm Password" required name="cfpassword" [(ngModel)]="_confirm_password" #confirm_password="ngModel" (keydown)="clearTimer();" type = 'password'  -->
<!-- 			     #confPassElem (focus) = "scrollIntoView(confPassElem);" />  -->
<!-- 			     <md-error *ngIf="confirm_password.errors && confirm_password.dirty" class="">Password required</md-error>  -->
<!--     		</md-input-container> -->
<!--     		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error>  -->
<!-- 			<button md-button class="signin-button" type="submit"  [disabled]="!changePass.form.valid">Change Password</button> -->
<!--     	</form> -->
<!-- 		 <md-progress-bar *ngIf="statusPending" -->
<!-- 	          class="signin-progress-bar" -->
<!-- 	          [color]="'primary'" -->
<!-- 	          [mode]="'indeterminate'" -->
<!-- 	          [value]="50"> -->
<!-- 	     </md-progress-bar> -->
<!--     </div> -->
<change-password></change-password>
 <button md-button class="chg-pwd-button" (click)="activeScreen = 'userInfoScreen';" >Cancel</button>
</ng-template>

