<ion-content>

    <app-facebook-login></app-facebook-login>

    <div class="content-container">

        <div class="common-heading-holder">
            <h2 class="main-header">
                #Live
            </h2>

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

        <section class="match-card" (click)="showMatchDetails()" *ngIf="currentMatch">
            <span class="format"> {{ currentMatch.Matchdetail.Series.Name }} </span>
            <header> <h4> {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Home].Name_Full }} v/s {{ currentMatch.Teams[currentMatch.Matchdetail.Team_Away].Name_Full }} </h4> </header>
            <p> <ion-icon name="calendar-outline"></ion-icon> {{ getEventDateTime(currentMatch.Matchdetail.Match.Date + ' ' + currentMatch.Matchdetail.Match.Time) }} </p>
            <p> <ion-icon name="location-outline"></ion-icon> <span> {{ currentMatch.Matchdetail.Venue.Name }} </span> </p>
            <p> <ion-icon name="information-circle-outline"></ion-icon> {{ currentMatch.Matchdetail.Match.Number }} </p>
            <p> <ion-icon name="mic-outline"></ion-icon> {{ currentMatch.Matchdetail.Match.Coverage_level }} </p>
            <p> <ion-icon name="radio-outline"></ion-icon> {{ currentMatch.Matchdetail.Status }} </p>
            <p *ngIf="currentMatch.Matchdetail.Tosswonby"> {{ currentMatch.Teams[currentMatch.Matchdetail.Tosswonby].Name_Short }} won the toss and elected to {{ currentMatch.Matchdetail.Toss_elected_to }} </p>
            <p *ngIf="currentMatch.Matchdetail.Equation"> {{ currentMatch.Matchdetail.Equation }} </p>

            <section class="score-card" *ngIf="currentMatch.Innings">
                <div class="team" *ngFor="let inning of currentMatch.Innings">
                    <header> <h5> {{ currentMatch.Teams[inning.Battingteam].Name_Short }} </h5> </header>
                    <div class="score"> {{ inning.Total }}/{{ inning.Wickets }} <span> ({{ inning.Overs }}) </span> </div>
                </div>
            </section>
        </section>

        <ul class="statistical-pages">
            <li class="collapsible-card" [ngClass]="{'active' : showScoreCard}" *ngIf="currentMatch && currentMatch.Innings">
                <header>
                    <label> Scorecard </label>
                    <button (click)="showScoreCard = !showScoreCard"> 
                        <span *ngIf="!showScoreCard"> + </span> 
                        <span *ngIf="showScoreCard"> - </span>
                    </button>
                </header>
                
                <section class="card" *ngFor="let inning of currentMatch.Innings">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    Batsman
                                </th>
                                <th>
                                    Score
                                </th>
                                <th>
                                    Balls
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <ng-container *ngFor="let batsman of inning.Batsmen">
                                <tr *ngIf="batsman.Runs !== ''">
                                    <td>
                                        {{ currentMatch.Teams[inning.Battingteam].Players[batsman.Batsman].Name_Full }} <br>
                                        <span> {{ batsman.Howout }} </span>
                                    </td>
    
                                    <td>
                                        {{ batsman.Runs }}
                                    </td>
    
                                    <td>
                                        {{ batsman.Balls }}
                                    </td>
                                </tr>
                            </ng-container>                            
                        </tbody>
                    </table>
                </section>
            </li>

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

                <section class="card">

                    <p class="info">
                        <ion-icon name="information-circle-outline"></ion-icon> Tap the match card to know more
                    </p>

                    <ion-slides  #slides [options]="slideOpts">
                        
                        <ion-slide *ngFor="let fixture of fixtures" (click)="showMatchDetails(fixture.match_id)">
                            <div class="image-holder">
                                <figure>
                                    <img src="https://s3.ap-south-1.amazonaws.com/assets-kxip.sportz.io/prod/waf-images/91/55/a5/16-9/5PE9uqJSZw.jpg">
                                </figure>
                            </div>
                
                            <section class="content">
                                <section class="match-day-card">
                                    <div class="teams">
                                        {{ fixture.team_a_short }} <span> vs </span>
                                        {{ fixture.team_b_short }}
                                    </div>
                    
                                    <p class="event-details">
                                        {{ getEventDateTime(fixture.match_date + ' ' + fixture.match_time) }} 
                                        <br>
                                        <br>
                                        {{ fixture.venue }}
                                    </p>
                                </section>
                            </section>
                
                        </ion-slide>
                    </ion-slides>
                </section>
                
            </li>

            <li class="collapsible-card">
                <header>
                    <label> League Table </label>
                    <button [routerLink]="['/league-table']">
                        <ion-icon name="chevron-forward-outline"></ion-icon>
                    </button>
                </header>
            </li>
        </ul>
    </div>

</ion-content>
