ScoreSpot/ProjectSourceCode/src/views/pages/leagues-page.hbs

<div id="league-page-body" class="page-container">

    <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
    <div id="league-information-container" class="information-container">
        <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
        <h1 id="league-title">{{league.competition.league_name}}</h2>
        <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">
    </div>

    <!-- Container to display all stats for league <- bottom rest of the container -->
    <div id="table-and-top-scorers-containers" class="stats-container">

        <!-- Container to display league table <- split 50% -->
        <div id="league-table-container" class="stats-container">

            <!-- Put header above table container -->
            <div id="table-header-container" class="header">
                <h2>Table</h2>
            </div>
            
            <!-- Container containing all league table stats -->
            <div id="table-stats-container" class="stats-container">
                <table id="standings-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th></th>
                            <th>Club</th>
                            <th>GP</th>
                            <th>W</th>
                            <th>L</th>
                            <th>D</th>
                            <th>GD</th>
                            <th>Pts</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each league.standings}}
                        <tr>
                            <td>{{table.league_position}}</td>
                            <td id="club-logo-column"><img id="table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
                            <td><span id="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
                            <td>{{games_played}}</td>
                            <td>{{wins}}</td>
                            <td>{{losses}}</td>
                            <td>{{draws}}</td>
                            <td id="goal-difference-column">{{goal_difference}}</td>
                            <td id="points-column">{{points}}</td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Container to display top scorers for league <- Split 50% -->
        <div id="top-scorers-container" class="stats-container">
            <div id="top-scorers-header-container" class="header">
                <h2>Top Scorers</h2>
            </div>

            <div id="top-scorers-stats-container" class="stats-container">
                <table>
                    <thead>
                        <tr>
                            <th>Goals</th>
                            <th></th>
                            <th>Name</th>
                            <th>Club</th>
                            <th>GP</th>     
                        </tr>
                    </thead>
                    <tbody>
                        {{#each topScorers.scorers}}
                        <tr id="top-scorers-row">
                            <td id="goals-column">{{goals}}</td>
                            <td><img id="top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
                            <td id="player-name-column">{{player.player_name}}</td>
                            <td id="club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
                            <td>{{games_played}}</td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>