<ion-header>
    <ion-navbar>
        <ion-title>{{ title }}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only [disabled]="!getCart().isValid()" (click)="submit()">
                <i class="fa fa-save fa-lg"></i>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
    <form>
        <ion-item-divider>
            Cliente
        </ion-item-divider>
        <ion-item (tap)="selectCustomer()">
            <ion-input type="text" placeholder="Toque aquí para seleccionar" readonly value="{{ getCustomerName() }}"></ion-input>
        </ion-item>
        <ion-item-divider>
            Productos
        </ion-item-divider>
        <ion-list>
            <ion-item *ngFor="let item of getItems()" >
                <ion-thumbnail item-left>
                    <img src="./assets/images/product.png" *ngIf="!item.hasImage()" />
				    <img [src]="item.getImage() | sanitizeUrl" *ngIf="item.hasImage()" />
			    </ion-thumbnail>
                <div (doubleTap)="openOptions(item)">
                    <h2>{{ item.getProductName() }}</h2>
                    <p>
                        <strong>Precio:</strong>
                        {{ item.getPrice() }}
                    </p>
                    <p>
                        <strong>Cantidad:</strong>
                        {{ item.getQuantity() }}
                    </p>
                    <p>
                        <strong>Subtotal:</strong>
                        {{ item.getSubtotal() }}
                    </p>
                </div>
                <div item-right>
				    <button ion-button icon-only color="light" (click)="updateQuantity(item, 1)">
					    <i class="fa fa-plus"></i>
				    </button>
				    <button ion-button icon-only color="light" (click)="updateQuantity(item, -1)">
					    <i class="fa fa-minus"></i>
				    </button>
			    </div>
            </ion-item>
            <ion-item class="empty-cart" *ngIf="getCart().empty()">
                <button ion-button icon-left (click)="selectProduct()">
                    <ion-icon name="add"></ion-icon>
                    Agregar un producto
                </button>
            </ion-item>
        </ion-list>
        <ion-item-divider>
            Total
        </ion-item-divider>
        <ion-item>
            <ion-input type="number" value="{{ getTotal() }}" readonly></ion-input>
        </ion-item>
    </form>

    <ion-fab right bottom>
        <button ion-fab>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-fab-list side="top">
            <button ion-fab (click)="selectCustomer()">
                <i class="fa fa-user fa-lg"></i>
            </button>
            <button ion-fab (click)="openBarcodeReader()">
                <i class="fa fa-barcode fa-lg"></i>
            </button>
            <button ion-fab (click)="selectProduct()">
                <i class="fa fa-cart-plus fa-lg"></i>
            </button>
        </ion-fab-list>
    </ion-fab>
</ion-content>
