<ion-header>
  <ion-toolbar>
    <ion-title>Discover Places</ion-title>
    <ion-buttons slot="start">
      <ion-menu-button menu="m1">
      </ion-menu-button> <!-- OR -->
      <!-- <ion-button (click)="onOpenMenu()">
        <ion-icon name="menu"></ion-icon>
      </ion-button>  -->
      </ion-buttons>
    </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-grid>
            <ion-row>
                <ion-col size="12" size-sm="8" offset-sm="2" text-center>
                    <ion-card>
                        <ion-card-header>
                            <ion-card-title>{{ loadedPlaces[0].title }}</ion-card-title>
                            <ion-card-subtitle>{{ loadedPlaces[0].price | currency }}</ion-card-subtitle>
                        </ion-card-header>
                        <ion-img [src]="loadedPlaces[0].imgUrl"></ion-img>
                        <ion-card-content>
                            <p> {{ loadedPlaces[0].description }} </p>
                        </ion-card-content>
                        <div text-right>
                            <ion-button
                            fill="clear"
                            color="primary"
                            routerDirection="forward"
                            [routerLink]="[
                            '/',
                            'places',
                            'tabs',
                            'discover',
                            loadedPlaces[0].id
                            ]">
                                More
                            </ion-button>
                        </div>
                    </ion-card>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col size="12" size-sm="8" offset-sm="2" text-center>
                    <ion-list>
                        <ion-item *ngFor="let p of loadedPlaces[1]">
                        <ion-thumbnail slot="start">
                            <ion-img [src]="p.imgUrl"></ion-img>
                        </ion-thumbnail>
                        <ion-label>
                            <h2>{{ p.title }}</h2>
                            <p>{{ p.description }}</p>
                        </ion-label>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-content>