<ion-header>
  <ion-toolbar>
    <ion-menu-button slot="start">
      <ion-icon name="menu"></ion-icon>
    </ion-menu-button>
    <ion-title> {{'Scratch Card'| translate }} </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" (click)="refreshPage()">
        <ion-icon name="refresh"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid class="ion-no-padding" *ngIf="notifications.length==0 && httpRunning==false">
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-icon name="notifications"></ion-icon>
      </ion-col>
    </ion-row>

    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <h4>{{'Your Scratch Cards Coupon List is Empty'|translate}}</h4>
      </ion-col>
    </ion-row>

    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <h5>{{'continue shopping'|translate}}</h5>
      </ion-col>
    </ion-row>

    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-button color="secondary" (click)="openShop()">{{'Explore'|translate}}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list>
    <div *ngFor="let n of notifications">
      <ion-item *ngIf="n.type=='1'">
        <ion-icon name="notifications" slot="start"></ion-icon>
        <ion-button *ngIf="n.is_view == 0" ion-button color="secondary" (click)="openScratchCard(n)">
          {{'Open Scratch Card' |translate}}
        </ion-button>
        <ion-label>
          <h2 *ngIf="n.is_view == 1">{{'Code'|translate}}: {{n.code}}</h2>
          <h3 *ngIf="n.is_view == 1">{{n.message}}</h3>
        </ion-label>
        <ion-note slot="end" class="note">{{'Expiry Date'|translate}} <small>{{n.expire_date}}</small></ion-note>
      </ion-item>
    </div>
  </ion-list>
  <ion-infinite-scroll #infinite (ionInfinite)="getNotifications()">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>