<ion-header>
  <ion-toolbar>
    <ion-menu-button slot="start">
      <ion-icon name="menu"></ion-icon>
    </ion-menu-button>
    <ion-title>
      <ion-img src="assets/logo_header-4.png" alt="logo"></ion-img>
    </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-list>
    <ion-card *ngFor="let c of shared.categories" (click)="openSubCategories(c)" class="animate-item">
      <ion-img *ngIf="c.image" src="{{c.image.src}}"></ion-img>
      <ion-text>
        <h2>{{c.name }}</h2>
        <p>{{c.count}} {{'Products'| translate }}</p>
      </ion-text>
    </ion-card>
  </ion-list>
</ion-content>