<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> IPL Standings Table <br> <span> Season 2021 </span> </header>
        <div class="action" (click)="share()">
            <button> <ion-icon name="share-social"></ion-icon> </button>
        </div>
    </section>

    <div class="table-container" *ngIf="standings">

        <table class="team">
            <thead>
                <tr>
                    <th>
                        Teams
                    </th>
                </tr>
            </thead>
            <tbody>                
                <tr *ngFor="let standing of standings">
                    <td>
                        {{ standing.short_name }}
                    </td>
                </tr>
            </tbody>
        </table>

        <table class="details">
            <thead>
                <tr>
                    <th>
                        Played
                    </th>
                    <th>
                        Won
                    </th>
                    <th>
                        Lost
                    </th>
                    <th>
                        Tied
                    </th>
                    <th>
                        Net RR
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let standing of standings">
                    <td>
                        {{ standing.total }}
                    </td>
                    <td>
                        {{ standing.wins }}
                    </td>
                    <td>
                        {{ standing.lost }}
                    </td>
                    <td>
                        {{ standing.tied }}
                    </td>
                    <td>
                        {{ standing.net_run_rate }}
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

</ion-content>
