kxip-app/src/app/match-details/match-details.page.html

<ion-content *ngIf="matchStats" [scrollEvents]="true">

    <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> {{ matchStats.homeTeam.teamName }} v/s {{ matchStats.awayTeam.teamName }} <br> 
            <span> Live from {{ matchStats.stadium }} Stadium </span> </header>
        <div class="action">
            <button> <ion-icon name="share-social"></ion-icon> </button>
        </div>
    </section>
    
    <div class="segment-holder" [ngClass]="{'no-bg' : selectedSegment === 'MATCH' && selectedRoster === 'LIVE'} ">
        <section class="segments" [ngClass]="{'active': selectedSegment === 'MATCH' }">
            <button (click)="selectedSegment = 'SCORE'"> Scorecard </button>
            <button (click)="selectedSegment = 'MATCH'"> Match </button>
        </section>
    </div>


    <div class="score-container" *ngIf="selectedSegment === 'SCORE'">
        <section class="score-card">
        
            <header>
                <img [src]="matchStats.awayTeam.teamLogo">  <h5> {{ matchStats.awayTeam.teamName }} </h5>
                <p> {{ matchStats.awayTeam.totalScore }}/{{ matchStats.awayTeam.totalWickets }} <span> ({{ matchStats.awayTeam.overs }}) </span> </p>
            </header>
    
            <div class="container">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Player
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                Balls
                            </th>
                            <th>
                                6s
                            </th>
                            <th>
                                4s
                            </th>
                            <th>
                                RR
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let player of matchStats.awayTeam.batting">
                            <td>
                                <label> {{ player.name }} </label> <br>
                                <span> {{ player.wicketTo }} </span>
                            </td>
        
                            <td>
                                {{ player.score }}
                            </td>
        
                            <td>
                                {{ player.ballsPlayed }}
                            </td>
        
                            <td>
                                {{ player.sixes }}
                            </td>
        
                            <td>
                                {{ player.boundaries }}
                            </td>
        
                            <td>
                                {{ limitDecimals(player.score / player.ballsPlayed) }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </section>
    
    
        <section class="score-card">
            
            <header>
                <img [src]="matchStats.homeTeam.teamLogo">  <h5> {{ matchStats.homeTeam.teamName }} </h5>
                <p> {{ matchStats.homeTeam.totalScore }}/{{ matchStats.homeTeam.totalWickets }} <span> ({{ matchStats.homeTeam.overs }}) </span> </p>
            </header>
    
            <div class="container">
                <table>
                    <thead>
                        <tr>
                            <th>
                                Player
                            </th>
                            <th>
                                Score
                            </th>
                            <th>
                                Balls
                            </th>
                            <th>
                                6s
                            </th>
                            <th>
                                4s
                            </th>
                            <th>
                                RR
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let player of matchStats.homeTeam.batting">
                            <td>
                                <label> {{ player.name }} </label> <br>
                                <span> {{ player.wicketTo }} </span>
                            </td>
        
                            <td>
                                {{ player.score }}
                            </td>
        
                            <td>
                                {{ player.ballsPlayed }}
                            </td>
        
                            <td>
                                {{ player.sixes }}
                            </td>
        
                            <td>
                                {{ player.boundaries }}
                            </td>
                            <td>
                                {{ limitDecimals(player.score / player.ballsPlayed) }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </section>

    </div>

    <ng-container *ngIf="selectedSegment === 'MATCH'">
        <div class="commentary-container" *ngIf="selectedRoster === 'LIVE'">
            
        </div>
    
        <div *ngIf="selectedSegment === 'MATCH'" class="team-selection" [ngClass]="{'active': selectedRoster === 'AWAY', 'live': selectedRoster === 'LIVE', 'change-bg' : selectedRoster !== 'LIVE' }">
            <button (click)="selectedRoster = 'HOME'"> {{ matchData.home.name }} </button>
            <button class="live" (click)="selectedRoster = 'LIVE'"> <span></span> </button>
            <button (click)="selectedRoster = 'AWAY'"> {{ matchData.away.name }} </button>
        </div>

        <section class="player-list" *ngIf="selectedRoster === 'HOME'">
            <ul>
                <li *ngFor="let player of matchData.home.players" (click)="selectPlayerDetails()">
                     <label> {{ player.jersey }} </label>
                     <img [src]="player.image" class="player-image">
                     <div class="details">
                        <h4> {{ player.name }} </h4>
                        <img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
                        <img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
                        <img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png">
                        <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
                        <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
                     </div>
                </li>
            </ul>
        </section>
    
        <section class="player-list" *ngIf="selectedRoster === 'AWAY'">
            <ul>
                <li *ngFor="let player of matchData.away.players" (click)="selectPlayerDetails()">
                     <label> {{ player.jersey }} </label>
                     <img [src]="player.image" class="player-image">
                     <div class="details">
                        <h4> {{ player.name }} </h4>
                        <img *ngIf="player.isCaptain" src="assets/icons/captain-band.png">
                        <img *ngIf="player.isKeeper" src="assets/icons/gloves.png">
                        <img *ngIf="player.isTopScorer" src="assets/icons/orange-cap.png">
                        <img *ngIf="player.role === 'BATSMAN'" src="assets/icons/batsman.png">
                        <img *ngIf="player.role === 'BOWLER'" src="assets/icons/ball.png">
                     </div>
                </li>
            </ul>
        </section>
    </ng-container>

    
    

    <section class="player-details" *ngIf="isPlayerSelected">
        <button class="close-button" (click)="isPlayerSelected = false"> 
            <ion-icon name="close-outline"></ion-icon> 
        </button>
        <app-player-details></app-player-details>
    </section>

</ion-content>