`
<ion-list class="trip-data-list" [ngClass]="{'trip-foods' : tripType === 'food', 'trip-hotels' : tripType === 'hotel', 'trip-entertainments' : tripType === 'entertainment'}">
<div *ngIf="tripType === 'food'">
<ion-item *ngFor="#item of searchItems | tripDataFilter: 'food' " class="trip-data trip-food">
<div class="trip-data-image">
<!-- Swiper -->
<div class="swiper-container trip-slider">
<div class="swiper-wrapper">
<div *ngFor="#slide of item.slides" class="swiper-slide">
<img src="{{slide.image}}" alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
<div class="trip-data-comments">
<ion-list class="trip-comments">
<ion-item *ngFor="#comment of item.comments" class="comment">
<ion-avatar item-left>
<img src="{{comment.avatar}}" alt="">
</ion-avatar>
<h2>{{comment.username}}</h2>
<p>{{comment.content}}</p>
</ion-item>
</ion-list>
</div>
<div class="trip-data-review">
<button clear class="trip-data-link">
{{item.review}} reviews
</button>
<button clear class="trip-data-link">
{{item.slides.length}} photos
</button>
<ion-note class="trip-data-price">
<span class="price">Opening from {{item.opening}} to {{item.closing}}</span>
</ion-note>
</div>
</ion-item>
</div>
</ion-list>`