<!--
  Generated template for the ProductCatDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>{{ catTitle }}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

   <ion-card *ngFor="let p of products" >

    <img [src]="imageURL + p.feature_image"/>

    <ion-card-content>
      <ion-card-title>
        {{ p.name }}
      </ion-card-title>
      <p>
      {{ p.description }}
      </p>
    </ion-card-content>

    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small color="danger" icon-start (click)="openProductDetail(p)" >
          <ion-icon name='star'></ion-icon>
          แลกแต้ม
        </button>
      </ion-col>
      <ion-col text-center>
        <button ion-button clear small color="danger" icon-start>
          <ion-icon name='bonfire'></ion-icon>
          {{ p.cal_return / 1000 }}k Cals
        </button>
      </ion-col>
      <ion-col text-right>
        <button ion-button clear small color="danger" icon-start>
          <ion-icon name='share-alt'></ion-icon>
          Share
        </button>
      </ion-col>
    </ion-row>

  </ion-card> 
</ion-content>
