<ion-content>
    <button class="back-button" (click)="back()"> <ion-icon name="close-outline"></ion-icon> </button>

    <div class="content-container">
        <div class="heading-holder">
            <h2 class="main-header"> # Booking </h2>
        
            <section class="segments">
                <button [ngClass]="{'active' : selectedDate === bookingDate.dateTime}"
                (click)="selectedDate = bookingDate.dateTime; selectMatchCard(i)" 
                *ngFor="let bookingDate of bookingSeatsData; let i = index"> 
                    {{ getFormattedDateTime(bookingDate.dateTime) }} 
                </button>
            </section>
        </div>


        <ion-slides  #slides [options]="slideOpts" (ionSlideDidChange)="selectMatchDate()">
            <ion-slide *ngFor="let matchDay of bookingSeatsData"
            (click)="showBookingDetails(matchDay)">
                <div class="image-holder">
                    <figure>
                        <img [src]="matchDay.staduim.sideView">
                    </figure>
                </div>
    
                <section class="content">
                    <section class="match-card">
                        <div class="teams">
                            <img [src]="matchDay.matchDetails.home.image" alt="">
                            <span></span>
                            <img [src]="matchDay.matchDetails.away.image" alt="">
                        </div>
        
                        <p class="event-details">
                            {{ getEventDateTime(matchDay.dateTime) }} <br>
                            {{ matchDay.staduim.name }} Stadium
                        </p>                        
        
                        <h4> {{ matchDay.matchDetails.home.name }} v/s {{ matchDay.matchDetails.away.name }}</h4>
        
                        <h5> {{ matchDay.matchType }} </h5>
                    </section>
                </section>
    
            </ion-slide>
        </ion-slides>

    </div>


    <ion-fab vertical="bottom" horizontal="end" slot="fixed" *ngIf="showChat">
        <ion-fab-button class="chat-button" (click)="presentChatModal()">
            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
            <ion-badge color="dark"> 10 </ion-badge>
        </ion-fab-button>
    </ion-fab>
</ion-content>
