<div *ngIf="card" class="ecm-card">
	<img class="ecm-card-img" src="{{card.img}}" alt="Washed Out">
	<div class="ecm-card-footer">
		<img class="ecm-card-info-img" src="{{card.info_img}}" />
		<div class="ecm-card-info">
			<span class="ecm-card-info-title">{{card.info_title}}</span>
			 <span class="ecm-card-info-subhead">{{card.info_subhead}}</span>
		</div>
		<a md-raised-button *ngIf="!card.info_link" class="ecm-card-action">Open</a> 
		<a *ngIf="!card.info_link" class="ecm-card-action top share"></a>
	</div>
</div>

<div *ngIf="category" class="ecm-card" (click)="viewCategories()">
	<!-- <img class="ecm-card-img"src="{{category.resourceUrl}}{{category.catCode}}.png"alt="Category image"> -->
	<bb-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></bb-image>
	<div class="ecm-card-footer">
		<bb-image [refId]='category.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></bb-image>
		<div class="ecm-card-info">
			<span class="ecm-card-info-title">{{category.shDescr}}</span> 
			<span class="ecm-card-info-subhead">{{category.descr}}</span>
		</div>
<!-- 		<a md-raised-button *ngIf="!category.catLink" class="ecm-card-action" (click)="viewCategories()">View</a> -->
		<a *ngIf="!category.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',category.catCode]"></a>
	</div>
</div>

<div *ngIf="subcategory" class="ecm-card" (click)="viewProducts()">
	<!-- <img class="ecm-card-img"src="{{subcategory.resourceUrl}}{{subcategory.scatCode}}.png"alt="Category image">-->
	<bb-image [refId]="subcategory.scatCode + ':' + subcategory.catCode" [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Image'" [isThumbnail]="true"></bb-image>
	<div class="ecm-card-footer">
		<bb-image [refId]='subcategory.catCode' [refSer]="'ECMCAT'" [object]="'ECM_CATEGORY'" [attachType]="'Icon'" [isThumbnail]="true"></bb-image>
		<div class="ecm-card-info">
			<span class="ecm-card-info-title">{{subcategory.shDescr}}</span> 
			<span class="ecm-card-info-subhead">{{subcategory.descr}}</span>
		</div>
<!-- 		<a md-raised-button *ngIf="!subcategory.catLink" class="ecm-card-action" (click)="viewProducts()">View</a> -->
        <a *ngIf="!subcategory.catLink" class="ecm-card-action top share" [routerLink]="[ '/share',subcategory.scatCode]"></a>
	</div>
</div>

<div *ngIf="itemData"  >
   <!-- <div class="ecm-wishlist-button">
	<md-button-toggle class="wishButton">
 	<md-icon style="position: relative;right: -10px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>  
	<md-icon style="position: relative;right: -10px;"  (click)="removeFromWishlist();" >favorite</md-icon>  
	</md-button-toggle>
	</div>  -->
	<div class="ecm-card" id="ecm-item" (click)="viewItem()">
	<bb-image [ngClass]="trendImg ? 'trend-img-container' : 'product-img-container'" class="large-12 columns" [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></bb-image>
	<div class="ecm-item-footer large-12 columns">
		<div class="ecm-item-info" id="ecm-item-info">
			<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.itemHeader.itemShDescr}}</span>
			<span class="new" >New</span> 
			<!-- 		
			<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
			<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
			 -->
	    </div>
		<div class="ecm-card-price"><span class="ecm-rupee"></span><s style="color:lightgray;">Rs. {{itemData.itemHeader.itemCostRate | number : '3.1-5'}}</s>
		<span class="ecm-discount-rate">Rs.{{itemData.itemHeader.itemDiscountedRate | number : '3.1-5'}}</span>
		<span class="ecm-discount-off">{{itemData.itemHeader.itemDiscount}}% off</span>
		</div>
		<div class="ecm-ratings">
		      <rating style="vertical-align: sub;" [rate]="itemData.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
			  <span class="ecm-total-ratings">({{itemData.itemRatings.NO_OF_RATINGS}})</span>
		</div>
	</div>
	</div>
	 <div [ngClass]="inWishlist ? 'inwishlist' : ''" [style.top]="IS_WISHLIST ? '25px' : '15px'" class="ecm-wishlist-button">
		<md-icon *ngIf="!IS_WISHLIST" class="favourite-icon" (click)="inWishlist ? removeFromWishlist.emit() : addToWishlist.emit()">favorite</md-icon>		
		<md-icon *ngIf="IS_WISHLIST" class="close-icon" (click)="removeFromWishlist.emit()">close</md-icon>
	</div>
</div>

<!-- <div *ngIf="outingData" class="ecm-card" id="ecm-item" (click)="viewItem()">
	<bb-image [isThumbnail]="true" [refId]='itemData.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></bb-image>
	<div class="ecm-item-footer">
		<div class="ecm-card-info" id="ecm-item-info">
			<span id="ecm-item-info-title" class="ecm-card-info-title">{{itemData.shDescr}}</span> 
			<!-- 		
			<span *ngIf="itemData.cat_sh_descr && itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{itemData.cat_sh_descr}} - {{itemData.scat_sh_descr}}</span>
			<span *ngIf="extraParam && !itemData.cat_sh_descr && !itemData.scat_sh_descr" class="ecm-card-info-subhead" id="ecm-item-info-subhead">{{extraParam.catShDesc}} - {{extraParam.scatDesc}}</span>
			 
			<span class="ecm-ratings">
			   <span *ngFor="let a of createRatings(itemData.rating);">&#x2605;</span>
	        </span>
	    </div>
		<div class="ecm-card-price"><span class="ecm-rupee">Rs. </span>{{itemData.costRate}}</div>
	</div>
</div>   -->



 <div *ngIf="reviewsData" class="ecm-reviews">
     <div class="ecm-img"> <span class="circle"> {{reviewsData.reviewBy.charAt(0).toUpperCase()}} </span> </div>
     <div class="review-section">
     	<span class="ecm-product-ratings">
	      <span *ngFor="let a of createRatings(reviewsData.productRating);" >
	         &#x2605;
	      </span>
	      <span *ngFor="let a of createRatings(5 - reviewsData.productRating);" class="ecm-null-ratings">
	         &#x2605;
	      </span>
        </span>
        <span class="ecm-review-title">{{reviewsData.productRemarks}}</span>
        <span class="ecm-customer-details"> By {{reviewsData.reviewBy}} on {{reviewsData.reviewDate | date :'longDate'}}  <span class="ecm-seperator">|</span> <i class="material-icons ecm-verified-icon">&#xE86C;</i> Verified Customer</span>
        <span class="ecm-user-comments">{{reviewsData.productComments}}</span>
        <i (click)="updateLikes(reviewsData.item_code)" class="material-icons ecm-thumpsup-icon">&#xE8DC;</i>
          <span class="likes-count"> {{reviewsData.productUsfulCnt}} </span>
        <i (click)="updateDislikes(reviewsData.item_code)" class="material-icons ecm-thumpsdown-icon">&#xE8DB;</i>
          <span class="likes-count"> {{reviewsData.productNotUsfulCnt}} </span>
     </div>
 </div>
 
 <div *ngIf="orderDetails">
       <div class="small-4 medium-2 large-2 columns">
 		    <bb-image [refId]='orderDetails.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage]="true" [isThumbnail]="true"></bb-image>
 	   </div>
 	   <div class="small-8 medium-3 large-3 columns orderDescriptiom">
			<span class="orderDescription1">{{itemDetail?.itemHeader.itemShDescr}}</span>
			<span class="orderDescription2">{{itemDetail?.itemHeader.itemDescr}}</span> 
			<span class="deliveryDate">Delivery expected between 4 to 5 days</span>
			<div class="trackButton">
				<button md-button class="cancel-order-button" (click)="cancelOrder()">Cancel</button>
				<button md-button class="track-order-button" (click)="trackOrder()">Track</button>
			</div>
		</div>
		<div class="small-3 medium-3 large-3 columns offers"
			style="text-align: center;">
			<span class="orderQuantity">Quantity  {{orderDetails?.quantity}}</span> 
			<span class="orderPrice">Rs {{orderDetails?.rate}}</span>
		</div>	    
 </div>
