
<ecm-header [isFixedHeader]=true> </ecm-header>
<ecm-breadcrumbs [pageName]="'USERPROFILE'"></ecm-breadcrumbs>
<div *ngIf="clientWidth <= 639" class="mobile">
<ng-container *ngTemplateOutlet='myAvatar'></ng-container>
<md-accordion>
	<ng-template ngFor let-link [ngForOf]="navLinks" >
		<md-expansion-panel hideToggle="true" [expanded] = "link.isOpen" (closed) ="link.isOpen = false;" (opened) = "selectLink(link); ">
		    <md-expansion-panel-header class= "expannd-panel-header" [ngClass]="{selected: link.isOpen}" [expandedHeight]="'60px'" [collapsedHeight]="'60px'">
		      <md-panel-title>
		        {{link.name}}
		      </md-panel-title>
		      <md-panel-description>
		        &nbsp;
		        <i *ngIf="link.isOpen" class="material-icons">keyboard_arrow_down</i>
   		        <i *ngIf="!link.isOpen" class="material-icons">keyboard_arrow_right</i>
		      </md-panel-description>
		    </md-expansion-panel-header>

		    <div *ngIf="link.isOpen" class="ecm-nav-content" >
			   	<router-outlet name="profile" ></router-outlet>
			</div>
	  	</md-expansion-panel>
	</ng-template>
</md-accordion>
</div>

<div *ngIf="clientWidth > 640" class="desktop">
	<div class="ecm-nav">
		<md-card> 
			<ng-container *ngTemplateOutlet='myAvatar'></ng-container>
			<a md-button *ngFor="let link of navLinks"
			(click)="selectLink(link)" routerLinkActive
			#rla="routerLinkActive" class="md-tab-link" [ngClass]="{selected: link.isOpen}"> 
				{{link.name}} 
			</a> 
		</md-card>
	</div>
	<div class="ecm-nav-content" *ngIf="clientWidth > 640">
		<md-card> 
			<router-outlet name="profile"></router-outlet> 
		</md-card>
	</div>
</div>

<ecm-footer></ecm-footer> 

<ng-template #myAvatar>
	  <div class="my-avatar" 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}}" /> 
		<div class="my-avatar-info">
		  <span class="my-prof-name"> {{lowercase( userData.NAME ) }}</span>
		  <span class="my-prof-email"> {{userData.EMAIL_ID}} </span>
		</div>
	  </div>
</ng-template>