<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-row class="top-icon-header">
    <ion-button fill="clear">
      <ion-icon slot="start" name="apps"></ion-icon>
      {{'Categories' | translate }}
    </ion-button>
    <ion-button id="second" fill="clear" (click)="openCategoryPage()">
      <ion-icon slot="end" name="arrow-dropright"></ion-icon>
      {{ 'Shop More' | translate }}
    </ion-button>
  </ion-row>
  <!-- categories component -->
  <app-categories [type]="'grid'"></app-categories>

  <ion-segment [(ngModel)]="segments">
    <ion-segment-button value="topSeller">{{ 'Newest' | translate }}</ion-segment-button>
    <ion-segment-button value="deals">{{ 'On Sale' | translate }} </ion-segment-button>
    <ion-segment-button value="mostLiked"> {{ 'Featured' | translate }}</ion-segment-button>
  </ion-segment>
  <div [ngSwitch]="segments">

    <!-- first swipe slider -->
    <ion-slides *ngSwitchCase="'topSeller'" [options]="sliderConfig">
      <ion-slide *ngFor="let p of shared.tab1">
        <app-product [data]="p" [type]="'normal'"></app-product>
      </ion-slide>
      <ion-slide>
        <ion-button fill="clear" (click)="openProducts('latest')"> {{'Shop More'| translate}}
          <ion-icon name="arrow-dropright"></ion-icon>
        </ion-button>
      </ion-slide>
    </ion-slides>

    <!-- 2nd swipe slider -->
    <ion-slides *ngSwitchCase="'deals'" [options]="sliderConfig">
      <ion-slide *ngFor="let p of shared.tab2">
        <app-product [data]="p" [type]="'normal'"></app-product>
      </ion-slide>
      <ion-slide>
        <ion-button fill="clear" (click)="openProducts('latest')"> {{'Shop More'| translate}}
          <ion-icon name="arrow-dropright"></ion-icon>
        </ion-button>
      </ion-slide>
    </ion-slides>

    <!-- 3rd swipe slider -->
    <ion-slides *ngSwitchCase="'mostLiked'" [options]="sliderConfig">
      <ion-slide *ngFor="let p of shared.tab3">
        <app-product [data]="p" [type]="'normal'"></app-product>
      </ion-slide>
      <ion-slide>
        <ion-button fill="clear" (click)="openProducts('featured')"> {{'Shop More'| translate}}
          <ion-icon name="arrow-dropright"></ion-icon>
        </ion-button>
      </ion-slide>
    </ion-slides>
  </div>

  <!-- For Vendor List -->
  <app-vendor-list></app-vendor-list>

  <ion-row class="top-icon-header">
    <ion-button fill="clear">
      <ion-icon slot="start" name="md-albums"></ion-icon>
      {{'All Products' | translate }}
    </ion-button>
    <ion-button id="second" fill="clear" (click)="openProducts('newest')">
      <ion-icon slot="end" name="arrow-dropright"></ion-icon>
      {{ 'Shop More' | translate }}
    </ion-button>
  </ion-row>

  <ion-grid class="ion-no-padding">
    <ion-row class="ion-no-padding">
      <ion-col *ngFor="let p of products" size="6" class="ion-no-padding">
        <app-product [data]="p" [type]="'normal'"></app-product>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- infinite scroll -->
  <ion-infinite-scroll #infinite (ionInfinite)="getProducts()">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>


</ion-content>
<ion-fab vertical="bottom" horizontal="end" *ngIf="scrollTopButton">
  <ion-fab-button color="secondary" (click)="scrollToTop()">
    <ion-icon name="arrow-round-up"></ion-icon>
  </ion-fab-button>
</ion-fab>