<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> {{ matchDay.matchDetails.home.name }} v/s {{ matchDay.matchDetails.away.name }} <br> 
            <span> {{ matchDay.staduim.name }} Stadium, <br> {{ getEventDateTime(matchDay.dateTime) }} </span> </header>
        <div class="action">
            <button> <ion-icon name="share-social-outline"></ion-icon> </button>
        </div>
    </section>

    <div class="content-container" [ngClass]="{'push-bottom' : selectedSeats.length > 0}">
        <section class="upfold">
            <img class="bg-img" [src]="matchDay.staduim.sideView">

            <ul class="quadrants">
                <li *ngFor="let stands of matchDay.seatsAvailable; let i = index;"
                [ngClass]="{'active' : selectedStand === i}"
                (click)="selectedStand = i">
                    <label> {{ stands.stand }} Stand </label>
                </li>
            </ul>

            <figure class="active">
                <img src="assets/home-team/stadium-sv.png">
                <img [src]="matchDay.staduim.topView">
            </figure>

        </section>

        <section class="seating-details">
            <header>
                <h3> Stands </h3>
            </header>

            <ul class="stand-list">
                <li *ngFor="let stands of matchDay.seatsAvailable; let i = index;"
                [ngClass]="{'active' : selectedStand === i}"
                (click)="selectedStand = i">
                    <label>
                        {{ getFirstChar(stands.stand) }}
                    </label>
                    <p>
                        <span *ngIf="stands.seats.length > 0"> {{ stands.seats.length }} </span> 
                        <span *ngIf="stands.seats.length === 0"> {{ stands.seats.length }} </span>
                        seats remaining, <br> <span *ngIf="stands.seats.length > 0"> starts from <strong> &#8377; {{ stands.seats[0].price }} </strong> </span>
                    </p>
                    <div class="count-action" *ngIf="selectedStand === i">
                        <button (click)="removeSeat()" 
                        [ngClass]="{'active' : selectedSeats.length > 0}"> - </button>
                        <span class="count"> {{ selectedSeats.length }} </span>
                        <button (click)="addSeat()" 
                        [ngClass]="{'active' : stands.seats.length > 0}"> + </button>
                    </div>
                </li>
            </ul>
        </section>
    </div>

    <section class="checkout-data" *ngIf="selectedSeats.length > 0">
        <p> <span> Total: </span> &#8377; {{ getTotalAmount() }} </p>
        <button class="checkout-button" (click)="confirmPayment()"> Proceed to Payment </button>
    </section>

</ion-content>
