<ion-header>
  <ion-toolbar class="new-background-color">
    <div class="hcs">
      <img src="/assets/images/wellnessbar.svg" height="50" />    
    </div>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-slides pager="true" [options]="slideOptsOne">
    <ion-slide *ngFor="let p of imageslide">
      <div class="slide">
        <ion-img [src]="p.better_featured_image.source_url"></ion-img>
      </div>
    </ion-slide>
  </ion-slides>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-toolbar class="search">
          <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
        </ion-toolbar>
      </ion-col>
    </ion-row>
    <ion-row class="ion-justify-content-start">
      <!-- <ion-col size="6">
        <div class="center catshow">
          <fa-icon [icon]="['fas', 'utensils']" size="3x" class="red"></fa-icon>
        </div>
      </ion-col>
      <ion-col size="6">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'spa']" size="3x"></fa-icon>        
        </div>
      </ion-col>
      <ion-col size="6">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'praying-hands']" size="3x"></fa-icon>          
        </div>
      </ion-col>
      <ion-col size="6">
        <div class="catshow center">
          <fa-icon [icon]="['fas', 'running']" size="3x"></fa-icon>
        </div>
      </ion-col> -->
      {{ stores }}
      <ion-col size="3">
        <div class="center catshow">
          <a [routerLink]="['/tabs/place/']">
            <fa-icon [icon]="['fas', 'utensils']" size="2x" class="red"></fa-icon>
          </a>
        </div>
      </ion-col>
      <ion-col size="3">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'spa']" size="2x"></fa-icon>
        </div>
      </ion-col>
      <ion-col size="3">
        <div class=" catshow center">
          <fa-icon [icon]="['fas', 'praying-hands']" size="2x"></fa-icon>
        </div>
      </ion-col>
      <ion-col size="3">
        <div class="catshow center">
          <fa-icon [icon]="['fas', 'running']" size="2x"></fa-icon>
        </div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card *ngFor="let pldata of stores">
          <div *ngIf="pldata.better_featured_image != null">
            <img src="{{pldata.better_featured_image.source_url}}" alt="">
          </div>
          <div *ngIf="pldata.better_featured_image == null">
            <img src="/assets/images/temp.png" />
          </div>
          <ion-card-header>
            <a [routerLink]="['/tabs/place/', pldata.id]">
                <ion-card-title>{{ pldata.fields.name }}</ion-card-title>
            </a>
            <a [routerLink]="['/tabs/province/']">
                <span>{{ pldata.fields.province }}</span>
            </a> /
            
            <a [routerLink]="['/tabs/place/']">
                <span>{{ pldata.fields.store_cat }}</span>
            </a> 
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
