<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{category?.name}}</ion-title>
    <ion-buttons end *ngIf="user?.id != '0'">
      <div class="glovo">{{cartItems}}</div>
      <button class="search-top" ion-button icon-only (tap)="cart()">
        <ion-icon ios="ios-cart-outline" md="ios-cart-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>

  <div *ngIf="categorys.length > 0" class="itemlisting">
    <h1>Subcategorias</h1>
    <div (tap)="navcategory(cat)" class="category-category" *ngFor="let cat of categorys" [ngStyle]="{'background-image': 'url('+(cat.banner == '' ? 'assets/img/default/no-pictures.png' : cat.banner)+')'}">
      <div class="category-category-name">{{cat.name}}</div>
    </div>
    <!--
    <ion-slides spaceBetween="20" slidesPerView="1.2">
      <ion-slide (tap)="navcategory(cat)" *ngFor="let cat of categorys" [ngStyle]="{'background-image': 'url('+(cat.banner == '' ? 'assets/img/default/no-pictures.png' : cat.banner)+')'}">
        <div class="category-category">
          <div class="category-category-name">{{cat.name}}</div>
        </div>
      </ion-slide>
    </ion-slides>
    -->
  </div>
  
  <div *ngIf="products.length > 0" class="itemlisting">
    <h1>{{storeName}}</h1>
    <div *ngFor="let product of products" class="category-product" (tap)="navproduct(product)">
      <div class="category-product-item">
        <div class="product-background" [ngStyle]="{'background-image': 'url('+(product.image != '' ? product.image : 'assets/img/default/no-pictures.png')+')'}"></div>
        <div class="category-product-title">
          {{product.name}}
          <div class="category-product-price" *ngIf="product.price > 0">$ {{product.price | number:'1.0-0' }}</div>
        </div>
        
      </div>
    </div>
  </div>
  <ion-card *ngIf="products.length == 0 && categorys.length == 0">
    <ion-card-header class="no-items">
      <img src="assets/img/error.png" />
      <br /> Por ahora, no hay contenido en esta categoria
      <br />
    </ion-card-header>
  </ion-card>

</ion-content>