<div class="row">
<div class="medium-8 large-8 columns ecm-review-section">
<md-card class="ecm-review-card">
	<div class="ecm-review-header">  
	   <div class="review-title">
	      <span class="header-title"> Ratings & Reviews </span>
	   </div>
 
	  <div class="ratings-section"> 
	    <div class="row header-content">
		<div class="large-2 columns ecm-total-reviews">
			<span class="ecm-avg-rating"> {{itemAvgRating}} </span>
			  <span class="star-rating-block">
    			  <rating [rate]="itemAvgRating" [isSmallRatings]="true"></rating>
 			  </span>
			<span class="ecm-total-ratings" *ngIf="itemAvgRating"> {{itemAvgRating}} Ratings </span>
			<span class="ecm-total-ratings" *ngIf="!itemAvgRating"> 0 Ratings </span>
		</div>
		<div *ngIf="itemDetail" class="large-5 columns">
		  <rating [ratingDetail]="itemDetail.itemRatings" (filterBy)="filter($event);"></rating>
		</div>
		<div class="large-5 columns ecm-write-review">
			<button *ngIf="!editMode" md-button class="write-review-button" (click)="showEditMode();">
				<i class="material-icons edit">&#xE254;</i> 
				<span md-button class="write-review-text"> Write a Review </span>
			</button>
			
<!-- 			<ecm-edit-review *ngIf="editMode" [itemDetail]="itemDetail" [userId]="userId" (closePanel)="editMode = false"> </ecm-edit-review> -->
		
		<user-review *ngIf="editMode" [editMode]="'E'" [itemCode]="itemDetail.itemCode" [isDetailPage]="true" (onCancel)="editMode = false"></user-review>
		</div>
		
		</div>
	
	</div>
	
	<md-tab-group class="ecm-tab medium-12 col-sm-9" (selectChange)="onSelectChange($event)" > 
	  <md-tab label="Most Recent">
	    
	    <!-- 
	    <md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
            <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
                 {{type.viewValue}}
            </md-option>
        </md-select>
	     -->
	     
	   <div class="rating-details-section">
	    
	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
	      No reviews to display
	    </div>
	               	    
	    <div *ngIf="reviews && numFound!=0" class="reviews-content">
	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
	    </div>
	     
	     <div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">  
             <span class="ecm-pages-info">1 of {{pageCount}} Pages</span> 
             <span *ngFor="let a of createPages(); let i = index" class="ecm-page" [ngClass]="{active:(i+1) === currentPage}" (click)="goToPage(i+1)">
               <span>{{i+1}}</span>
             </span>
             <span class="next-button" (click)="nextPage()"> Next </span>
         
             <!--   <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span>  -->
         </div> 
	   </div>  
	  </md-tab>
	
	  <md-tab label="Most Helpful">
		<!-- 
	    <md-select class="ecm-select" placeholder="Filter By" [(ngModel)]="sortBy" (change)="sort()" name="sort">
            <md-option class="ecm-options" *ngFor="let type of sortTypes" [value]="type.value">
                 {{type.viewValue}}
            </md-option>
        </md-select>
         -->
	  <div class="rating-details-section"> 
	    <div *ngIf="numFound==0" class="ecm-null-data-descr">
	      No reviews to display
	    </div>
	               	    
	    <div *ngIf="reviews && numFound!=0" class="reviews-content">
	    	<ecm-card *ngFor="let review of reviews" [reviewsData]="review"> </ecm-card>
	    </div>
	     
	     <div *ngIf="reviews && numFound!=0 && pageCount!=1" class="ecm-pagination-section">  
             <span class="ecm-pages-info">1 of {{pageCount}} Pages</span> 
             <span *ngFor="let a of createPages(); let i = index" class="ecm-page" [ngClass]="{active:(i+1) === currentPage}" (click)="goToPage(i+1)">
               <span>{{i+1}}</span>
             </span>
             <span class="next-button" (click)="nextPage()"> Next </span>
         
             <!--   <span class="next-button" [ngClass]="{disabled:currentPage === reviews.length}" (click)="nextPage()"> Next </span>  -->
         </div> 
      </div>
	  </md-tab>
	  	
	</md-tab-group>

 </div>
</md-card>
</div>
</div>
