<ion-header>
  <ion-toolbar>
    <ion-menu-button slot="start">
      <ion-icon name="menu"></ion-icon>
    </ion-menu-button>
    <ion-title>
      {{'Wish List'| translate }}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button fill="clear" routerLink="/search" routerDirection="forward">
        <ion-icon slot="icon-only" name="search"></ion-icon>
      </ion-button>
      <ion-button fill="clear" routerLink="/cart" routerDirection="forward">
        <ion-icon name="basket"></ion-icon>
        <ion-badge color="secondary">{{shared.cartTotalItems()}}</ion-badge>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid  class="ion-no-padding top-margin" *ngIf="shared.wishListProducts.length == 0">
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-icon name="heart"></ion-icon>
      </ion-col>
    </ion-row>

    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <h4>{{'Your Wishlist is empty'|translate}}</h4>
      </ion-col>
    </ion-row>
    <ion-row class="ion-no-padding">
      <ion-col size="12" class="ion-no-padding">
        <ion-button (click)="openProductsPage()">{{'Explore'|translate}}</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-grid class="ion-no-padding">
    <ion-row class="ion-no-padding">
      <ion-col *ngFor="let p of shared.wishListProducts" size="6" class="ion-no-padding">
        <app-product [data]="p" [type]="'wishList'"></app-product>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>