<div *ngIf="itemDetail">

		<md-card style="margin-top: 15px;">
		<div class="row">
			<!-- ------------------------ITEM-IMAGE START HERE-------------------------------- -->
			<span class="small-12 medium-6 large-6 columns image"> 
				<bb-image [refId]='itemDetail.itemCode' [refSer]="'M-ITEM'" [object]="'ITEM'" [isSingleImage] = "true" ></bb-image>	
			</span>
			<!-- -----------------------ITEM-IMAGE ENDS HERE-------------------------------- ----->


			<!-- ----------------------ITEM-DETAILS  START HERE-------------------------------- -->
			<div class="small-12 medium-6 large-6 columns head">

				<span class="ecm-itemCategory">{{itemDetail.itemDetailData.itemCategory}}
			    <div class="ecm-share">
			         <i class="material-icons" style="color: dimgray;">&#xE80D;</i>
			         <span class="share">Share</span>
			     </div>    
			    </span>
				
				<span class="ecm-itemShDescr">{{itemDetail.itemShDescr}}</span>
				<span class="ecm-itemDescr">{{itemDetail.itemDescr}}</span>
				
				<div class="ecm-Chef-Speciality">
					<span class="ecm-other-titles">Cooked By</span>
					<div class="medium-12 columns ecm-SpecialityInfo">
					<span class="ecm-Chef-Info"><span class="ecm-Chef">Chef Sunil Gurg</span>near {{myCity}}<i class="material-icons" style="font-size: 16px; padding-left: 4px;padding-top: 1px;color: mediumvioletred;">&#xE55F;</i></span>
					</div>
			  	</div>     
								
				<a (click)="scrollToReviews.emit();" class="link-reviews">
					<span *ngIf="itemDetail.itemRatings.AVG_RATING == 0 && itemDetail.itemRatings.NO_OF_REVIEWS == 0 " style="color: gray; font-size: 18px;">
				  		Be the first to Review this product
					</span>
					
					<span *ngIf="itemDetail.itemRatings.AVG_RATING > 0 || itemDetail.itemRatings.NO_OF_REVIEWS > 0 " style="display: inline-flex;" >
						<span class="ecm-ratingStars" *ngFor="let a of createRatings(itemDetail.itemRatings.AVG_RATING)">&#x2605;</span>
						<span class="ecm-itemAvgRating">{{itemDetail.itemRatings.AVG_RATING}} Ratings</span>
						<span class="ecm-itemNumOfReviews">|<span style="padding-left: 12px;"> {{itemDetail.itemRatings.NO_OF_REVIEWS}} Reviews</span></span>
					</span>
				</a>
	
				<div style="padding-top: 9px;">
					<span class="ecm-itemExtraInfo">Mon to Fri</span>
					<span class="ecm-itemExtraInfo" style="padding-left: 15px">|<span style="padding-left: 15px">11AM to 4PM</span></span>
				</div>
				
				<div class="ecm-Speciality">
					<span class="ecm-other-titles">Speciality</span>
					<div class="medium-12 columns SpecialityInfo">
					<span class="ecm-other-Speciality">{{itemDetail.itemOverview}}</span>
					</div>
				</div>
				
				<div class="medium-12 columns ecm-saveButton">
				   <div class="ecm-DiscountRate">
					<span class="ecm-itemDiscountedRate">
					    ₹ {{itemDetail.itemDiscountedRate}}
					</span>
					<span class="ecm-Onwards" style="font-size: 18px;"> Onwards </span>
					</div>
					<button md-raised-button class="button medium-btn booknow" 
							(click)="doActivity.emit({activity:'BOOK_NOW', data: itemDetail.itemCode });">Book Now</button>
				</div>
				<div class="medium-12 columns ecm-payments">
				 	<i class="material-icons">&#xE8E8;</i>
					<span class="ecm-Info">Safe and Secure Payments. 100% Authentic products</span>	
				</div>
			</div>
		 </div>	
		</md-card>
		
		<div class="row ecm-card">
		<!-- 	<div class="medium-12 col-sm-9 ecm-itemsDetailsInfo" > -->
		<div class="medium-8 large-8 columns ecm-itemsDetailsInfo">
			<md-card> 
				<div>
			 	 <span class="ecm-itemDeatils">Items Details</span>
			 	 </div>
			 	 <hr style="margin-top: 8px;">
				<div class="ecm-Overview">
					<span class="ecm-other-title">Description</span>
					<span class="ecm-other-detail">
					      <ecm-readmore [text]="itemDetailpath.ProductDescription" [maxLength]="120"></ecm-readmore> 
				    </span>
				</div>
	           <div class="Attraction" style="padding-top: 24px;">
				     <span class="attraction">Ingridience</span>
				     <ul *ngFor = "let a of ingredients">
				     <li>{{a.ingredient}}</li>
				   
				 <!--     <li>A 4th century fort,Thala,stands in the middle of the of a forest and overlooks the hilly terrain</li>
				     <li>There are quite Few waterFalls in this region the mostpopular is of being taksehi castel</li>
				     <li>Devi kedar janni hills</li>
				     <li>Bhira Dam</li>  -->
				     </ul>
				
				</div>
				<div class="Attraction" style="padding-top: 24px;">
				     <span class="attraction">Preferences</span>
				     <ul *ngFor = "let a of Preferences">
				       <li>{{a.Free}}</li>
				     </ul>		
				</div>
				<!-- <div class="preferences" style="padding-top: 24px;">
				     <span class="attraction">Preferences</span>
				     <span class="ecm-other-detail">
				       {{itemDetailpath.Preferences.Gluten}} ,
				       {{itemDetailpath.Preferences.Nuts}}
				     </span>
				    
				</div> -->
				<div class="ecm-returnsPolicy">
					<span class="ecm-other-title">Cancellation Policy</span>
					<span class="ecm-other-detail">Cancellation 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 cancellation 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>
				
			</md-card>
		  </div>
		  
		  	<div class="medium-4 large-4 columns ecm-recent-view">
			    <ecm-recent-view #recentView> </ecm-recent-view> 
			</div>
		</div> 
</div>

	
<!-- ------------------------------- ITEM-DETAILS  ENDS HERE-------------------------------- -->






