<ion-header>

    <ion-navbar color="primary">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>

        <ion-title>Productos</ion-title>

        <ion-buttons end>
            <button ion-button (click)="toggleSearch()">
                <ion-icon color="ligth" name="search"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

<ion-toolbar color="primary" *ngIf="isSearchMode()">
    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="search($event)"></ion-searchbar>
    <ion-buttons end>
        <button ion-button (click)="toggleSearch()">
            <ion-icon name="arrow-forward"></ion-icon>
        </button>
    </ion-buttons>
</ion-toolbar>

<ion-content>

    <ion-card *ngFor="let p of visibleElements; trackBy:trackByElements">
        <ion-item>
            <ion-thumbnail item-left>
                <img src="./assets/images/product.png" *ngIf="!p.image_medium"/>
                <img [src]="p.image_medium | sanitizeUrl" *ngIf="p.image_medium"/>
            </ion-thumbnail>

            <h2>{{ p.name }}</h2>

            <p>
                <strong>Precio:</strong>
                {{ p.list_price | number }}
            </p>

            <p>
                <strong>Cantidad:</strong>
                {{ p.qty_available }}
            </p>

            <button ion-button primary clear item-right (click)="showOptions($event, p)">
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-item>

        <ion-row>
            <ion-col>
                <button ion-button primary clear small>
                    <ion-icon name="cash"></ion-icon>
                    <div>{{ p.sales_count || 0}} Ventas</div>
                </button>
            </ion-col>
        </ion-row>
    </ion-card>

    <div class="no-element" *ngIf="!hasVisibleElements()">
        <h2>Sin elementos</h2>
    </div>

    <ion-infinite-scroll (ionInfinite)="seek($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    
    <ion-fab right bottom>
        <button ion-fab color="yellow" (click)="goToPage(null)">
            <ion-icon name="add" color="light"></ion-icon>
        </button>
    </ion-fab>
    
</ion-content>
