<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" *ngIf="name!=0">
      <ion-back-button icon="arrow-round-back"></ion-back-button>
    </ion-buttons>
    <ion-menu-button slot="start" *ngIf="name==0">
      <ion-icon name="menu"></ion-icon>
    </ion-menu-button>
    <ion-title *ngIf="name==0">
      {{'Categories'|translate}}
    </ion-title>
    <ion-title *ngIf="name!=0">
      {{name}}
    </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-item-group *ngFor="let c of shared.getCategoriesPageItems(0)" class="animated fadeIn">
    <ion-item-divider (click)="openProducts(c.id,c.name)">
      <ion-avatar slot="end">
        <img *ngIf="c.image" src="{{c.image.src}}" />
      </ion-avatar>
      <ion-label class="ion-padding">
        <ion-text>
          <h2>{{c.name}}</h2>
        </ion-text>
      </ion-label>
    </ion-item-divider>
    <div *ngFor="let s of shared.subCategories">
      <ion-item *ngIf="c.id==s.parent" (click)="openProducts(s.id,s.name)">
        <ion-avatar slot="end">
          <img *ngIf="s.image" src="{{s.image.src}}" />
        </ion-avatar>
        <ion-label class="ion-padding">
          <ion-text>
            <h2>{{s.name|translate}}</h2>
            <p>{{s.count}} {{'Products'| translate }}</p>
          </ion-text>
        </ion-label>
      </ion-item>
    </div>
  </ion-item-group>
</ion-content>