<ion-header>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button icon="arrow-round-back"></ion-back-button>
      </ion-buttons>
      <ion-title>
        {{'Search'|translate}}
      </ion-title>
      <ion-buttons slot="end">
        <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-header>

<ion-content>
  <form #loginForm="ngForm" (ngSubmit)="getSearchData()">
    <ion-searchbar [(ngModel)]="search" name="search" placeholder="{{'Search'|translate}}" (ionInput)="onChangeKeyword($event)">
    </ion-searchbar>
  </form>
  <div class="list" *ngFor="let p of searchResult">
    <app-product [data]="p" [type]="'list'"></app-product>
  </div>

  <ion-list>
    <ion-item *ngFor="let c of shared.allCategories" routerLink="/products/{{c.id}}/{{c.name}}/'newest'"
      routerDirection="forward">
      <ion-avatar slot="start" class="animate-item delay-500ms">
        <img src="{{c.image.src}}" *ngIf="c.image" />
      </ion-avatar>
      <ion-label class="ion-padding">
        <ion-text>
          <h2>{{c.name|translate}}</h2>
          <p>{{c.count}} {{'Products'| translate }}</p>
        </ion-text>
      </ion-label>
    </ion-item>
  </ion-list>

</ion-content>