<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content [fullscreen]="true">
  <!-- ------------------ -->
  <ion-searchbar (ionInput)="search($event)" animated="true" placeholder="Search"></ion-searchbar>
      <ion-list  *ngFor="let data of restaurantList">
        <ion-item lines="none" color="light">
          <ion-thumbnail slot="start">
            <img alt="Silhouette of mountains" src={{data.image}}/>
          </ion-thumbnail>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-text>
                  {{data.name}}
                </ion-text>
              </ion-col>
            </ion-row>

            <ion-row>
              <ion-col>
                <ion-text color="medium">
                  {{data.type}}
                </ion-text>
              </ion-col>
            </ion-row>

            <ion-row>
              <ion-col>
                <ion-icon name="star"></ion-icon> {{data.rating}}
              </ion-col>
              <ion-col>
                R{{data.price}}
              </ion-col>
            </ion-row>

            <ion-row>
              <ion-col>
                <ion-icon name="car"></ion-icon> <ion-text color="danger"> {{data.distance}}</ion-text>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-button style="width: 100%">Add to cart</ion-button> 
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
</ion-content>