
<md-card class="product-detail-card">
	
<div class="row">
    <!-- ------------------------HANDICRAFT-IMAGE START HERE-------------------------------- -->
    <div class="small-12 medium-6 large-6 columns image">
      <div>
	 <md-button-toggle class="wishButton">
       <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="!inWishlist" (click)="addToWishlist();">favorite_border</md-icon>
       <md-icon style="color: mediumvioletred; font-size: 28px;" *ngIf="inWishlist" (click)="removeFromWishlist();" >favorite</md-icon>
     </md-button-toggle>
     </div>     
      <div class="md-card-image">
           <bb-image  [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" class="product-image"></bb-image>
      </div>
   	</div>
	    
    <!-- ----------------------HANDICRAFT-DETAILS  START HERE-------------------------------- -->   
  <div class="small-12 medium-6 large-6 columns head">
   <md-card-content>
     <div>
          <div class="ecm-share">
			     <i class="material-icons share-icon">&#xE80D;</i>
			     <span class="share">Share</span>
		  </div>
		  <span class="item-shdescr">
          <a [routerLink]="['/products', itemDetail.itemSubCategory.scatCode]" class="subcat-link">
            {{itemDetail.itemSubCategory.shDescr}}
          </a>
          </span>
			
		  <span class="item-descr"> {{itemDetail.itemHeader.itemDescr}} </span>
			
		  <span class="sold-by-title">Sold by</span>
		  <span class="seller-name">{{itemDetail.itemDetail1?.sellerInfo.name}}</span><br>
			
		  <a class="link-reviews">
		   <span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " class="review-msg-title">
			 Be the first to Review this product
		   </span>
					
		   <span (click)="scrollToReview();" *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex; cursor: pointer;" >
				<rating [rate]="itemDetail.itemRatings.AVG_RATING" [isSmallRatings]=true></rating>
				<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS != 0" class="ecm-itemNumOfReviews">{{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span>
<!-- 				<span *ngIf="itemDetail.itemRatings.NO_OF_REVIEWS == 0" class="ecm-itemNumOfReviews" (click)="doActivity.emit({activity:'WRITE_REVIEW', data: {'firstReview': true} });">Be the first to Review this product</span> -->
		   </span>
		  </a>
           
          <div class="item-descount-rate-section">
			 <span class="item-descount-rate">
				Rs. {{itemDetail.itemHeader.itemDiscountedRate | number : '3.1-5'}}
		     </span>
		  </div>
	     <div>
		   <span class="item-cost-rate">
     		  <s>Rs. {{itemDetail.itemHeader.itemCostRate}}</s>
     	   </span>
     	   <span class="item-discount">
     			 {{itemDetail.itemHeader.itemDiscount}}% off
           </span>  
         </div>  
     	 <div class="offers-section">
     	   <span class="discount-validity">{{itemDetail.itemDetail1?.validity}}</span>
    	   <button type="button" onclick="()" class="md-button link_button">
    	     More Offers
     	     <i class="material-icons arrow ">&#xE313;</i>
     	   </button>
     	 </div> 
           <div>   
               <div class="short-detail">
                 <div class="details-title">Details</div>
                 <div class="item-detail-1">
                   <ul class="details-list">
                     <li *ngFor="let attribute of itemDetail.itemAttributes | slice:0:2;">
                     	{{attribute.label}}: {{attribute.value}}
                     </li>
                   </ul> 
                   <button type="button" (click)="scrollToItemDetails();" class="md-button link_button">View More</button>
                 </div>
              </div>
              
              <!--  
              <div class="small-6 medium-12 large-6 columns">
                  <div>
                     <div class="Available">Delivery</div>
                       <div class="Available" style="font-size: 15px;">
                         <div>
                          <span>
                            <span class="available-title">Available</span>
                            <span> at {{itemDetail.itemDetail1.location}}</span>  
                          </span> 
			   	          <button type="button" onclick="()" class="md-button link_button" >Change
   	   						<i class="material-icons arrow ">&#xE313;</i>
   	   				    </button>
   	   				   </div>
                        <span class="delivery-info"> <b>Free Delivery</b> in 5 to 6 days </span><i class="material-icons help-icon">&#xE8FD;</i>
                       </div>
                     </div>
                     <br>
                     <div>
                       <div class="service-title">Service</div>
                       <div class="service-detail">
                        <div><span class="symbol">30 days exchange policy</span> <i class="material-icons help-icon">&#xE8FD;</i></div>
                        <div><span class="symbol">Cash on delivery available</span> <i class="material-icons help-icon">&#xE8FD;</i></div>
                       </div>
                     </div>
                     <br>
              </div>
               -->
          </div>
         
		  <ecm-variants [itemVariants]="itemDetail.itemVariants" [itemCode]="itemCode" (selected)="loadItem($event);"></ecm-variants>		
		
		</div>
		</md-card-content>
		
		<div  [ngClass]="{'buy-cart-button': ( clientWidth > 640 ) , 'mobi-buy-cart-button': ( clientWidth < 639 )  }" >
			<button md-button class="button medium-btn Add_to_cart"
				(click)="doActivity.emit({activity:'ADD_CART', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart}}); isAddToCart= true;">{{ isAddToCart ? 'Go to Cart' : 'Add to Cart' }}</button>
			<button md-button class="button medium-btn Buy_now" (click)="doActivity.emit({activity:'BUY_NOW', data: {'item' : itemDetail, 'isAddToCart' : isAddToCart} });">Buy
				Now</button>
		</div>
		<div  class="medium-12 columns ecm-payments">
			<i class="material-icons secure-icon"> &#xE8E8;</i> <span
				 class="ecm-Info">Safe and Secure Payments.
				100% Authentic products</span>
		</div>
	</div>
</div>
</md-card>
<!-- ----------------------HANDICRAFT-DETAILS ENDS HERE-------------------------------- -->

<div class="row ecm-card" #itemDetails>
	<div class="medium-8 large-8 columns ecm-product-details">
		<md-card class="extra-details-card">
		<div class="item-details-title">
			<span class="ecm-itemDeatils">Items Details</span>
		</div>
		<div class="extra-details-section">
			<div class="ecm-Overview">
				<span class="ecm-other-title">Overview</span> <span
					class="ecm-other-detail"> 
					<ecm-readmore [text]="Overview" [maxLength]="60"></ecm-readmore>
				</span>
			</div>

			<div class="Attraction">
				<span class="attraction">Description</span>
				<table style="width: 100%">
					<tr class="extra-details"
						*ngFor="let attribute of itemDetail.itemAttributes">
						<td class="data-title" *ngIf="attribute.value">
							{{attribute.label}}
						</td>
						<td class="data-title-detail"  *ngIf="attribute.value">
							{{attribute.value}}
						</td>
					</tr>
				</table>
			</div>

			<div class="ecm-returnsPolicy">
				<span class="ecm-other-title">Return Policy</span> 
					<span class="ecm-other-detail">
					    Return is a scheme provided by respective sellers directly under this policy in terms of
						which the option of replacement and/or refund is offered by the respective sellers to you.All products listed under a particular 
						category may not have the same cancellation policy.Kindly check the respective items's applicable return policy on the
						product page for any exception on the table show below.
					</span>
			</div>

			<div class="ecm-termsCondition">
				<span class="ecm-other-title">Terms and Conditions</span> 
					<span class="ecm-other-detail">
					     The images represent actual product through color of the image and product may slightly differ.
					     For warranty-related claims,please contact the brand service center.
					</span>
			</div>
		</div>
		</md-card>
	</div>
	<div class=" medium-4 large-4 columns ecm-recent-view">
		<ecm-recent-view #recentView> </ecm-recent-view>
	</div>
	
</div>
<!-- 
<div class="row">
	<div class="small-12 medium-6 large-6 columns show-for-small-only  mobi-buy-cart-button">
			<button md-button class="button medium-btn mobi-Add_to_cart"
				(click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Add
				to cart</button>
			<button md-button class="button medium-btn mobi-Buy_now"
				[routerLink]="['/checkout']" (click)="doActivity.emit({activity:'ADD_CART', data: itemDetail.itemCode });">Buy
				Now</button>
	</div>
</div>

 -->


	