<ion-header>
    <ion-navbar>
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title>{{ getTitle() }}</ion-title>
        <ion-buttons end>
			<button ion-button icon-only (click)="toggleSearch()" [disabled]="getSelectedItem()">
				<i class="fa fa-search fa-lg"></i>
			</button>
		</ion-buttons>
    </ion-navbar>
    <ion-toolbar>
        <ion-segment [(ngModel)]="stage">
            <ion-segment-button value="nueva">
                Nueva
            </ion-segment-button>
            <ion-segment-button value="negociacion">
                Negociación
            </ion-segment-button>
            <ion-segment-button value="fidelizacion">
                Fidelización
            </ion-segment-button>
            <ion-segment-button value="perdido">
                Perdido
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>
<ion-toolbar *ngIf="isSearch()">
    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="performSearch($event)"></ion-searchbar>
    <ion-buttons end>
        <button ion-button icon-only (click)="toggleSearch()">
            <i class="fa fa-undo fa-lg"></i>
        </button>
    </ion-buttons>
</ion-toolbar>
<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of getItemsShown()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
            <h2>{{ item.contact_name || "Sin Contacto" }}</h2>
            <p>{{ item.name }}</p>
            <p>
                <strong>Probabilidad:</strong>
                {{ item.probability }}
            </p>
            <p>
                <strong>Celular:</strong>
                {{ item.mobile || "n/a" }}
            </p>
            <p>
                <strong>Teléfono:</strong>
                {{ item.phone || "n/a" }}
            </p>
            <p>
                <strong>Dirección:</strong>
                {{ item.street || "n/a"}}
            </p>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="expand($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <div class="no-items" *ngIf="!hasItemsShown()">
        <h2>Sin elementos</h2>
    </div>
    <ion-fab right bottom>
        <button ion-fab (click)="goToDetails()">
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-fab>
</ion-content>
<ion-footer>
	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
</ion-footer>
