<ion-content>
    <section class="header-with-action-buttons">
        <div class="nav">
            <button (click)="back()"> 
                <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> 
            </button>            
        </div>

        <header>
            Create Party <br> 
            <span> Send invitation to contacts </span> <br>
            <span> {{ selectedContacts.length }} contact(s) selected </span>
        </header>
    </section>

    <ion-searchbar showCancelButton="never" mode="ios"
    [(ngModel)]="searchInput" (ionChange)="searchContact()"
    placeholder="Search by name or number"></ion-searchbar>

    <ion-list mode="ios">
        <ion-item *ngFor="let contact of contactList">
            <ion-label> 
                <h2> {{ contact.name }} </h2> 
                <p> {{ contact.phone }} </p>
            </ion-label>
            
            <ion-button slot="end" fill="outline" [ngClass]="{'active' : selectedContacts.includes(contact.phone) }"
            (click)="selectContact(contact.phone)">
                <ion-icon name="add"></ion-icon>
                <ion-icon name="checkmark"></ion-icon>
            </ion-button>
        </ion-item>
    </ion-list>
    
    <ion-button size="block" class="confirm-button" (click)="createParty()" *ngIf="selectedContacts.length > 0">
        Create Party
    </ion-button>

</ion-content>
