<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>PRODUCTO</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="loaded">
    <div class="image"> <!--  [style.background-image]="'url(' + product.image + ')'" style="background-size: cover;" -->
      <img [src]="product.image" style="width: 100%; height: auto; max-height: 75vh;">
      <div class="titulo">
        <p>{{product.name}}</p>
        <!--<span class="subtitulo"> {{ dateformat(news.date) | date}}</span>-->
      </div>
    </div>
    
    <ul class="icon-set" *ngIf="product.attribs.length > 0">
      <li *ngFor="let atrib of product.attribs; let i = index;">
        <div class="icon-set-title">{{atrib.name}}</div>
        <div class="icon-set-value" [ngStyle]="{'border':'1.5px solid #'+atrib.color}">{{atrib.attribute_value}}%</div>
      </li>
    </ul>
    <div class="content-html" [innerHtml]="product.description">
    </div>

    <div *ngIf="product.type_sale == 'FLOR'">
      <div class="aviso">
        <span>tienes</span> <h2>{{balance | number}} grs</h2> <span>disponibles</span> <img src="assets/img/icon_marijuana.png" />
      </div>
      <div padding>
        <ion-item *ngIf="stock() > 0">
          <ion-label stacked>Ingresa cantidad de frascos que deseas:</ion-label>
          <ion-input type="number" [(ngModel)]="pkg5" placeholder="0"></ion-input>
        </ion-item>
        <ion-item *ngIf="stock() > 0" hidden>
          <ion-label stacked>Paquetes de 8 gramos:</ion-label>
          <ion-input type="number" [(ngModel)]="pkg8" placeholder="0"></ion-input>
        </ion-item>
        <p *ngIf="stock() == 0">
          Lamentablemente no tenemos disponibilidad de esta flor. Intenta revisarla proximamente
        </p>
        <p *ngIf="stock() > 0" padding>
          En cada frasco vienen 5 gramos
        </p>
        <p *ngIf="stock() > 0 && limits" padding>
          <span [hidden]="product.min_order == 0">Mínimo de {{ product.min_order | number: '1.0-0'}} grs.</span>
          <span [hidden]="product.max_order == 0">Máximo de {{ product.max_order | number: '1.0-0'}} grs</span>
        </p>
        <!--
        <p *ngIf="stock() > 0 && !limits" padding>
          Este producto no tiene venta restringida, puedes adquirir la cantidad que necesites.
        </p>
        -->
        
        <div class="itemlisting product-price">
          un abono de <h4>$ {{(product.price * 5) | number}}</h4> por cada frasco.
        </div>
      </div>
    </div>
    <div *ngIf="product.type_sale != 'FLOR'">
      <ion-grid class="prod_container" *ngIf="stock() > 0 && user?.id!='0'">
      <ion-row>
        <ion-col class="prod_button prod_button_rem">
          <button ion-button color="danger" (tap)="rem()">-</button>
        </ion-col>
        <ion-col class="prod_quantity">
          <ion-input type="number" placeholder="0" clearInput [(ngModel)]="item.quantity"></ion-input>
        </ion-col>
        <ion-col class="prod_button prod_button_add">
          <button ion-button color="bck-light-blue" (tap)="add()">+</button>
        </ion-col>
      </ion-row>
      </ion-grid>

      <p *ngIf="stock() == 0 && user?.id!='0'" padding>
        Lamentablemente no tenemos disponibilidad. Intenta revisar proximamente
      </p>
      <p *ngIf="stock() > 0 && limits && user?.id!='0'" padding>
        <!--<span [hidden]="product.min_order == 0">Este producto tiene venta restringida,</span>-->
        <span [hidden]="product.min_order == 0">Mínimo de {{ product.min_order | number: '1.0-0'}} unids.</span>
        <span [hidden]="product.max_order == 0">Máximo de {{ product.max_order | number: '1.0-0'}} unids.</span>
      </p>
      <!--
      <p *ngIf="stock() > 0 && !limits && user?.id!='0'" padding>
        Este producto no tiene venta restringida, puedes adquirir la cantidad que necesites.
      </p>
      -->

      <div class="itemlisting product-price">
        <h4>$ {{product.price | number}}</h4> por cada uno
      </div>
    </div>
    <div class="formContainer">
      <div class="buttonWrapper" *ngIf="stock() > 0 && user?.id!='0'">
        <button (tap)="comprar()" class="buttonPinkOrange" ion-button round>Agregar al pedido</button>
      </div>
      <div *ngIf="user?.id=='0'">
        Sólo usuarios registrados pueden agregar este producto a su pedido
      </div>
      <br /><br />
    </div>
  </div>
</ion-content>
