<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-searchbar
      color="light"
      (ionChange)="getProducts($event)"
      debounce="2000"
      animated="true"
      placeholder="{{ 'SEARCH_PLACEHOLDER' | translate }}"
      #search
    ></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <img *ngIf="!statusSearch && listProducts.length == 0 && !statusNoResults" src="../../assets/img/search.png" class="imageSearchProduct" />
  <div class="ion-text-center textNoResults textTittle" *ngIf="statusNoResults && valueSearch != '' && listProducts.length == 0">
    <img src="../../assets/img/search.png" class="imageNoResults" />
    <p>No hay resultados</p>
  </div>

  <app-product-list [listProducts]="listProducts"></app-product-list>

  <ion-infinite-scroll (ionInfinite)="moreProducts($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="{{ 'LOADING_MORE_PRODUCTS' | translate}}"> </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <span *ngIf="statusSearch" class="spanSpinner">
    <ion-spinner name="lines"></ion-spinner>
  </span>
</ion-content>