
<!-- Overlay Start 
<div #bgGlass class="ecm-bgGlass"></div>
<div #overlayPanel class="overlayPanel" >
	<span (click)="hideOverlayPanel();" class="hide-button"></span>
	<ecm-signin *ngIf="sideOption=='USER_OPT'" (closePanel)="hideOverlayPanel(); createUserData();" ></ecm-signin>
</div>
Overlay End -->

<!-- SlidePanel Start 
<div #rightSlidePanel class="rightSlidePanel" [ngClass]="{'width-300': ( sideOption=='CART_OPT' && (cartItems | async)?.length == 0 ) }" >
	<span (click)="hideSidePanel();" class="hide-button"></span>
	<ecm-user-option *ngIf="sideOption=='USER_OPT'" (closePanel)="hideSidePanel(); createUserData();" (updateProfileImages) = "updateProfileImages();" ></ecm-user-option>
	<div *ngIf="sideOption=='CART_OPT'" style="margin: 3rem;" > 
		<ecm-cart [isMiniCart] = 'true' (closePanel)="hideSidePanel();" ></ecm-cart>	
	</div>
</div>
 SlidePanel End -->

<ecm-panel #ecmPanel>

</ecm-panel>

<div *ngIf="!isFixedHeader; then floatHeader " ></div>

<section *ngIf="isFixedHeader" class="fixed-header-section" style="opacity: 1; display: block;">
	<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
</section>

<ng-template #floatHeader>
	<section class="header-section visible">
		<div class="input-container-bg" [@fadeState]="headerFadeState"></div>
		<div class="input-container">
			<span>
			<img *ngIf="userData" (click)="userAction();" [src]="profileImageLink" (error)="this.src = hostUrl + '/ecm/assets/images/w_user_128_128.png'; " class="user-adj user-image-128" title= "{{userData.name}}" [@userState]="headerFadeState" /> 
			<img *ngIf="!userData" (click)="userAction();" class="img-user user-adj" [@userState]="headerFadeState" src="w_user_128_128.png"/>
			</span>
			<div class="row">
				<div class="small-12 medium-10 large-10 medium-centered column">
					<img class="img-logo logo-adj" [@l2dLogoTrans]="headerFadeState" src="logo.png" />
					<ecm-search [compFadeState]="headerFadeState" [headerState]="'relative'"></ecm-search>
				</div>
			</div>
		</div>
	</section>
	<section class="fixed-header-section" [@fixedHeaderShow]="headerFadeState">
		<ng-container *ngTemplateOutlet="fixedHeader"></ng-container>
	</section>
</ng-template>

<ng-template #fixedHeader>
	<div *ngIf="clientWidth >= 640" >
		<ng-container *ngTemplateOutlet="fixedHeaderLarge"></ng-container>
	</div>
	<div  *ngIf="clientWidth < 639" >
		<ng-container *ngTemplateOutlet="fixedHeaderSmall"></ng-container>
	</div>
</ng-template>

<ng-template #fixedHeaderLarge>
	<md-toolbar color="primary">
		<button md-button (click)="menuAction();" class="square-button">
			<span class="ecm-menu-icon ecm-menu-icon1"></span>
			<span class="ecm-menu-icon ecm-menu-icon2"></span>
			<span class="ecm-menu-icon ecm-menu-icon3"></span>
		</button>
	    <img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" /> 
	    <span class="siteHeading">{{siteHeading}}</span>
	    <ecm-search [compFadeState]="headerFadeState" [headerState]="'fixed'"></ecm-search>
	    <span (click)="cartAction();" mdTooltip="Show Cart" [mdTooltipPosition]="'below'" >
			<button md-button class="square-button">
				<span *ngIf="(cartItems | async)?.length!=0" class="fixed-header-badge">{{(cartItems | async)?.length}}</span>
				<img  class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/> 
				<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
				<!--<md-icon  class="example-icon">shopping_cart</md-icon>-->
			</button>
	    </span> 
	    <span (click)="userAction();" [mdTooltip]="userToolTipText" [mdTooltipPosition]="'below'">
			<button md-button class="square-button">
				<img *ngIf="userData" [src]="profileImageLink" (error)="this.src = hostUrl + '/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'"  title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
				<img *ngIf="!userData" class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
				<!--<md-icon  class="example-icon">account_circle</md-icon>-->
			</button>
	    </span>
	</md-toolbar>	
</ng-template>

<ng-template #fixedHeaderSmall >
	<md-toolbar color="primary">
		<div (click)="menuAction();" class="user-nav-menu">
			<span class="ecm-menu-icon ecm-menu-icon1"></span>
			<span class="ecm-menu-icon ecm-menu-icon2"></span>
			<span class="ecm-menu-icon ecm-menu-icon3"></span>
		</div>		
     	<img class="fixed-header-logo img-logo-32" src="logo_32_32.svg" />  
     	<span class="siteHeading">{{siteHeading}}</span>
     	<span class="toolbar-spacer"></span>
	    <span>
			<button md-button class="square-button" (click)="searchAction();" style="position: inherit;">
				 <i class="material-icons mobile-search">search</i>
 			</button>
	    </span>
	    <span (click)="cartAction();" mdTooltip="Show Cart" [mdTooltipPosition]="'below'" >
			<button md-button class="square-button">
				<span *ngIf="cartCounter > 0" class="fixed-header-badge">{{ cartCounter }}</span>
				<img   class="fixed-header-cart img-cart-32" src="cart_32_32.svg"/> 
				<!-- <img *ngIf="cartItems == 0" class="fixed-header-cart img-cart-32 no-badge" /> -->
				<!--<md-icon  class="example-icon">shopping_cart</md-icon>-->
			</button>
	    </span> 
	    <span (click)="userAction();" [mdTooltip]="userToolTipText" [mdTooltipPosition]="'below'" >
			<button md-button class="square-button">
				<img *ngIf="userData"  [src]="profileImageLink" (error)="this.src = hostUrl +'/ecm/assets/images/svg/user_32_32.svg'; this.className = 'fixed-header-no-user'"  title="{{userData.name}}" [ngClass]="( userImage.src.indexOf('/ibase/') > 0 ) ? 'fixed-header-user' : 'fixed-header-no-user' " #userImage/>
				<img *ngIf="!userData"  class="fixed-header-no-user img-user-32" src="user_32_32.svg"/>
				<!--<md-icon  class="example-icon">account_circle</md-icon>-->
			</button>
	    </span>
	</md-toolbar>	
</ng-template> 

