<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button (click)="goBack()"></ion-back-button>
    </ion-buttons>
    <ion-searchbar placeholder="{{ 'SEARCH_PLACEHOLDER_ITEM_DETAIL' | translate }}"
      [routerLink]="[cartProvider.storeType && cartProvider.storeType == 'main' ? '/app/tabs/shop/search' : ('/shop/' + cartProvider.storeType + '/search')]"
      color="light"></ion-searchbar>
    <ion-buttons slot="end">
      <div (click)="goToCart()">
        <ion-icon slot="icon-only" name="cart-outline" class="button-shopping"></ion-icon>
        <ion-badge color="secondary" class="badge-cart"
          *ngIf="cartProvider.productsCart && cartProvider.productsCart.length">{{ cartProvider.productsCart.length }}
        </ion-badge>
      </div>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div slot='fixed' style="position:relative" style="background-color: white; width: -webkit-fill-available;">
    <div class="item-profile ion-text-center" #profilePic [style.background-image]="backgroundImg"></div>
    <ion-segment *ngIf="listSubcategories" (ionChange)="changedSubcategory($event)" mode="md"
      [value]="subCategorySegment">
      <div class="segmentCategory">
        <ion-segment-button class="segmentSubCategory" *ngFor="let subCategory of listSubcategories"
          value="{{subCategory.name}}">
          {{subCategory.name}}
        </ion-segment-button>
      </div>
    </ion-segment>
    <div class="d-flex justify-content-center" style="text-align: center;">
      <ion-chip color="secondary" class="chip_payment" (click)="openModalOrderProducts()">
        <ion-icon name="filter-outline"></ion-icon>
        <ion-label color="secondary" class="responsive-text">{{ 'LABEL_FILTERS' | translate}}</ion-label>
      </ion-chip>

      <ion-chip color="secondary" class="chip_payment" (click)="openModalTrends()">
        <ion-icon name="trending-up-outline"></ion-icon>
        <ion-label color="secondary" class="responsive-text">{{ 'TRENDS' | translate}}</ion-label>
      </ion-chip>
    </div>
  </div>
  <app-empty-component *ngIf="!listProducts.length" [emptySettingsSlide]="emptySettingsSlide">
  </app-empty-component>
  <div style="margin-top: 200px;">
    <div [ngSwitch]="subCategorySegment">
      <div *ngFor="let subCategory of listSubcategories">
        <div padding *ngSwitchCase="subCategory.name">
          <app-product-list *ngIf="listProducts.length" [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>
        </div>
      </div>
    </div>
  </div>
</ion-content>