<ion-content>
  <ion-card>
    <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="searchRestaurants()"></ion-searchbar>
    <ion-list *ngIf="searchResults.length > 0">
      <ion-item *ngFor="let restaurant of searchResults">
        <ion-thumbnail slot="start">
          <ion-img alt="restaurant-image" class="restaurant-image" id="image-background" [src]="restaurant.image"></ion-img>
        </ion-thumbnail>
        <ion-grid>
          <ion-label>
            <ion-row>
              <ion-col class="col-header">
                <ion-text color="primary">
                 <h1>{{ restaurant.name }}</h1>
              </ion-text>
              </ion-col>
            </ion-row>
            
            <ion-row>
              <ion-col class="col-header">
                <p><ion-icon name="fast-food-outline"></ion-icon>‎‎{{ restaurant.dish }}</p>
              </ion-col>
            </ion-row>
            
            <ion-row>
              <ion-col>
                <ion-text color="medium"> <sub><ion-icon name="star"></ion-icon>{{ restaurant.rating }}</sub></ion-text>
              </ion-col>
              <ion-col >
                <ion-text color="medium"><sub><ion-icon name="pricetag"></ion-icon> {{ restaurant.price | currency :'ZAR':'symbol' }}</sub></ion-text>
              </ion-col>
              <ion-col >
                <ion-text color="medium"> <sub><ion-icon name="car"></ion-icon>{{ restaurant.distance }}</sub></ion-text>
              </ion-col>
            </ion-row>
            
            <ion-row>
              <ion-col>
                <ion-button style="width: 100%" (click)="addToCart(restaurant);">Add To Cart</ion-button>
              </ion-col>
            </ion-row>
            </ion-label>
            
        </ion-grid>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>