<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{storeName}}</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>
  <ion-searchbar [(ngModel)]="search" (ionCancel)="onCancel($event)" (ionInput)="getItems($event)" placeholder="Buscar..." [showCancelButton]="false"></ion-searchbar>
 
  <div class="aviso_clean" *ngIf="!appInvite && balance > 0 && !searching">
    <span>tienes</span> <h2>{{balance | number}} grs</h2> <span>disponibles</span> <img src="assets/img/icon_marijuana.png" style="max-width:32px;" />
  </div>

  <div class="aviso_clean" *ngIf="!appInvite && balance == 0 && !searching">
    <ion-grid>
      <ion-row>
        <ion-col col-3>
            <img src="assets/img/icon_marijuana.png" />
        </ion-col>
        <ion-col col-5>
          <span>Sin recetas vigentes</span> <h2>Tienes 0 grs</h2> <span>disponibles para abonar flores.</span> 
        </ion-col>
        <ion-col col-3>
            <button class="button-white solucionar" ion-button small outline (tap)="goRecetasAdd()">Solucionar</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <div *ngIf="products.length > 0 && !searching" class="itemlisting">
    <h1>Destacados</h1>
    <ion-slides spaceBetween="10" slidesPerView="1.8">
      <ion-slide (tap)="detail(product)" *ngFor="let product of products" [ngStyle]="{'background-image': 'url('+(product.image == '' ? 'assets/img/default/no-pictures.png' : product.image)+')'}">
        <div class="slide-product">
          <div class="slide-title">{{product.name}}</div>
          <div class="slide-price" *ngIf="product.price > 0">$ {{product.price | number:'1.0-0' }}</div>
        </div>
      </ion-slide> 
    </ion-slides>
  </div>
 
  <div *ngIf="categorys.length > 0 && !searching" class="itemlisting">
    <h1>Categorias</h1>
    <div *ngFor="let category of categorys" class="category" (tap)="navcategory(category)">
      <div class="category-item">
        <div class="category-background" [ngStyle]="{'background-image':'url('+(category.banner != '' ? category.banner : 'assets/img/default/no-pictures.png')+')'}"></div>
        <div class="category-item-title">{{category.name}}</div>
      </div>
    </div>
  </div>

  <div *ngIf="searching">
    <ion-card *ngIf="results.length == 0 || running">
      <ion-card-header class="no-items" text-wrap>
        <div class="sping-refresh" *ngIf="running">
          <img src="assets/img/loader.gif">
          <br /> buscando...
        </div>
        <div *ngIf="!running">
          <img src="assets/img/icon.route.png" />
          <br /> Por ahora, no hay resultados para <b>&quot;{{search}}&quot;</b>
          <br />
        </div>

      </ion-card-header>
    </ion-card>
    <div *ngIf="results.length > 0" class="itemlisting">
      <h1>Resultados</h1>
      <div *ngFor="let product of results" class="category-product" (tap)="detail(product)">
        <div class="category-product-item">
          <img [src]="product.image" />
          <div class="category-product-title">{{product.name}}</div>
        </div>
      </div>
    </div>

  </div>
</ion-content>