kxip-app/src/app/live/live.page.html

<ion-content>

    <div class="content-container">

        <div class="heading-holder">
            <h2 class="main-header">
                Matches
            </h2>

            <p>
                Live / Next Match
            </p>
        </div>


        <section class="match-card" (click)="showMatchDetails()">
            <span class="format"> T20 Qualifiers </span>
            <header> <h4> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} </h4> </header>
            <p> <ion-icon src="assets/icons/helmet.svg"></ion-icon> Sehwag, KL Rahul </p>
            <p> <ion-icon name="baseball-outline"></ion-icon> <span> Pollard </span> </p>

            <section class="score-card">
                <div class="team">
                    <header> <img [src]="matchStats.homeTeam.teamLogo"> <h5> {{ matchStats.homeTeam.teamName }} </h5> </header>
                    <div class="score"> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </div>
                </div>

                <div class="team">
                    <header> <img [src]="matchStats.awayTeam.teamLogo"> <h5> {{ matchStats.awayTeam.teamName }} </h5> </header>
                    <div class="score"> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </div>
                </div>
            </section>
        </section>

        <ul class="statistical-pages">
            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}">
                <header>
                    <label> Scorecard </label>
                    <button (click)="showScoreCard = !showScoreCard"> 
                        <span *ngIf="!showScoreCard"> + </span> 
                        <span *ngIf="showScoreCard"> - </span>
                    </button>
                </header>
                
                <section class="card">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    Player
                                </th>
                                <th>
                                    Score
                                </th>
                                <th>
                                    Balls
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let player of matchStats.awayTeam.batting">
                                <td>
                                    {{ player.name }} <br>
                                    <span> {{ player.wicketTo }} </span>
                                </td>

                                <td>
                                    {{ player.score }}
                                </td>

                                <td>
                                    {{ player.ballsPlayed }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <button class="view-more-button" (click)="showMatchDetails()"> View More </button>
                </section>

            </li>

            <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                <header>
                    <label> Fixtures </label>
                    <button (click)="showFixtures = !showFixtures"> 
                        <span *ngIf="!showFixtures"> + </span> 
                        <span *ngIf="showFixtures"> - </span>
                    </button>
                </header>

                <section class="card">
                    <ion-slides  #slides [options]="slideOpts" (ionSlideDidChange)="selectIndex()">
                        <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-day-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>
    
                    <button class="view-more-button" (click)="showBookingDetailsByIndex()">
                        Book Now
                    </button>
                </section>
                
            </li>
        </ul>

    </div>

    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button class="chat-button" (click)="presentChatModal()">
            <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
        </ion-fab-button>
    </ion-fab>

</ion-content>