
<!-- 
<div class="category-list-container">
	<div class="top-categories-title">Top Categories</div>
	<div class="category-list">
		<div *ngFor="let _category of categoryList" class="category-box" (click)="viewAllSubCategory(_category);" on-mouseover="showSubcategories(_category.catCode);">
			<bb-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isSmallIcon]="true"></bb-image>
			<span class="category-title">{{_category.shDescr}}</span>
			<div class="row category-products-tab">
			<div *ngFor="let _subcategory of subcategories" class="small-12 medium-6 large-4 column category_product">
				<span class="sub-cat-descr">{{_subcategory.shDescr}}</span>
				<div *ngFor="let _item of _subcategory.items | slice:0:4;">
					<a (click)="viewItem(_item.itemCode)" class="ecm-item">
						{{_item.descr}}
					</a>
				</div>
				<div *ngIf="_subcategory.items.length > 4">
					<span class="view-all" (click)="viewAllProducts(_subcategory);">View All</span>
				</div>
			</div>
			</div>
		</div>
	</div>
	<div class="view-all-button">
		<span (click)="viewAllCategories();">View All</span>
	</div>
</div>

-->

<div class="category-list-container">
	<div class="top-categories-title">Top Categories</div>
	<div class="category-list">
		<div *ngFor="let _category of categoryList | slice:0:3; let i = index;" class="category-box" [ngClass]="{'hovered' : hoverIdx == i }" (click)="viewAllSubCategory(_category);" on-mouseover="hoverIdx = i; ">
			<bb-image [refId]='_category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isSmallIcon]="true"></bb-image>
			<span class="category-title">{{_category.catShDescr}}</span>
		</div>
		<div class="row category-products-tab" *ngIf="hoverIdx >= 0" >
			<div *ngFor="let _subcategory of categoryList[hoverIdx].list " class="small-12 medium-6 large-4 column category_product">
				
				<div *ngIf="categoryList[hoverIdx].subcategory">
					<span class="sub-cat-descr">{{_subcategory.scatShDescr}}</span>
					<div *ngFor="let _item of _subcategory.list | slice:0:4;">
						<a (click)="viewItem(_item.itemCode)" class="ecm-item">
							{{_item.descr}}
						</a>
					</div>
					<div *ngIf="_subcategory.list.length > 4">
						<span class="view-all" (click)="viewAllProducts(_subcategory, hoverIdx);">View All</span>
					</div>
				</div>
				
				<div *ngIf="!categoryList[hoverIdx].subcategory">
						<a (click)="viewItem(_subcategory.itemCode)" class="ecm-item">
							{{_subcategory.shDescr}}
						</a>
				</div>
			</div>
		</div>
	</div>
	<div class="view-all-button">
		<span (click)="viewAllCategories();">View All</span>
	</div>
</div>

<div class="my-menu-container" *ngIf="userData">
	<div class="my-menu-title">My Menu</div>
	<div class="my-menu-list">
		<div class="nav-my-profile" (click)="goToMyProfile();">
			<img class="ecm-user-icon" src="{{hostUrl}}/ecm/assets/images/svg/user.svg" /> 
			<span class="menu-title">My Profile</span>
		</div>
		<div class="nav-orders" (click)="goToMyOrders();">
			<img class="ecm-order-icon" src="{{hostUrl}}/ecm/assets/images/svg/order.svg" />
			<span class="menu-title">Orders</span>
		</div>
		<div class="nav-wishlist" (click)="goToWishlist();">
			<img class="ecm-wishlist-icon" src="{{hostUrl}}/ecm/assets/images/svg/wishlist.svg" />
			<span class="menu-title">Wishlist</span>
		</div>
	</div>
</div>

<div class="help-center-title">
	<span>Help Center</span>
</div>
