<ion-header>
  <ion-navbar no-border-bottom color="primary">
    <ion-title *ngIf="product">
      {{ product.name }} 
    </ion-title>
       <ion-buttons end>
         <button ion-button (click)="dismiss()">
           <ion-icon name="md-close-circle"></ion-icon>
         </button>
       </ion-buttons>
  </ion-navbar>
<!-- 
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="info" color='secondary'>
      <ion-segment-button value="info">
        Info
      </ion-segment-button>
      <ion-segment-button value="kittens">
        Reviews
      </ion-segment-button>
      <ion-segment-button value="ducklings">
        Relates
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar> -->
</ion-header>

<ion-content padding>
  <div [ngSwitch]="info" *ngIf="product">
    <div *ngSwitchCase="'info'">
        <img [src]="hp.imageURL + product.qr_image"/>
        <h2>{{ product.name }}</h2>
        <!--
        <p>
        {{ product.description }}</p> -->
        <div *ngIf="linkRec" text-center> 
            <a ion-button full [href]="linkRec" style="margin-bottom:20px; margin-top:20px">รับ Coupon</a>
        </div>
        <button ion-button full color="danger" (click)="useCoupon()">Use This Coupon</button><br>
        <div [innerHTML]="product.description" style='font-size:larger'></div>
    
        <div *ngIf="qr" text-center> 
        <img [src]="qr">
        </div>
        <!--
        <div text-center>
            
            <button (click)="cutPoint()" ion-button round center>แลก 500 points ลด 15%</button></div> -->
        <!--
        <ion-list>
          <ion-item>
            <ion-label>แลกแต้มด้วย</ion-label>
            <ion-select [(ngModel)]="actId" (ngModelChange)="onActChange($event)" multiple="true">
              <ion-option value="f">Female</ion-option>
              <ion-option value="m">Male</ion-option>
            </ion-select>
          </ion-item>
        </ion-list> -->
    </div>

   
  </div>
</ion-content>
