<ion-header>
  <ion-navbar>
	<ion-buttons start>
	</ion-buttons>
    <ion-title>CARRITO</ion-title>
    <ion-buttons end>
      <button class="search-top" ion-button icon-only (tap)="closeCart()">
        <ion-icon ios="ios-close" md="ios-close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content>

  <ion-card *ngIf="cartFull?.items.length == 0">
    <ion-card-header class="no-items">
      <img src="assets/img/icon.route.png" />
      <br /> Tu carrito está vacío
      <br />
    </ion-card-header>
  </ion-card>

  <div class="itemlisting" *ngFor="let item of cartFull?.items; let i = index;">
	<ion-grid>
		<ion-row class="item-row">
			<ion-col col-2>
				<div class="item-image" [ngStyle]="{'background-image': 'url('+(item.image == '' ? 'assets/img/default/no-pictures.png' : item.image)+')'}"></div>
			</ion-col>
			<ion-col col-3 class="item-name">{{item.name}}</ion-col>
			<ion-col col-3 class="item-number">
				<table>
					<tr>
						<td *ngIf="item.type_sale != 'FLOR'"><button class="item-number-remove" (tap)="remove(i)">-</button></td>
						<td>
              <input type="number" [(ngModel)]="item.qty" class="item-number-number" />
              <div *ngIf="item.type_sale == 'FLOR'">gramos</div>
						</td>
						<td *ngIf="item.type_sale != 'FLOR'"><button class="item-number-add" (tap)="add(i)">+</button></td>
					</tr>
				</table>
			</ion-col>
			<ion-col col-3 class="item-price">
				<!--$ {{item.price | number }} (<span *ngIf="item.type_sale == 'FLOR'">gr</span><span *ngIf="item.type_sale != 'FLOR'">unid</span>)<br />-->
				<strong>$ {{item.total | number}}</strong>
			</ion-col>
			<ion-col col-1 class="item-button">
				<button ion-button icon-only (tap)="delete(i)">
					<ion-icon name="trash"></ion-icon>
				</button>
			</ion-col>
		</ion-row>
	</ion-grid>
  </div>
  <!--
  <div *ngIf="categorys.length > 0" class="itemlisting">
    <h1>Subcategorias</h1>
    <ion-slides spaceBetween="20" slidesPerView="1.2">
      <ion-slide (click)="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>
  -->

</ion-content>
<ion-footer>
  <ion-navbar>
	<ion-title>$ {{cartTotal() | number}} <span>+ envío</span></ion-title>
    <ion-buttons end>
      <button class="make-buy" ion-button round outline (tap)="checkout()" *ngIf="cartFull?.items.length > 0">
        Hacer el pedido
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-footer>