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

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

    <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
    <div class="container" id="league-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 class="container" id="league-stats-container">

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

            <h2>Table</h2>
            <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><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" clubID="{{table.team_id}}"></td>
                        <td><span id="club-name">{{table.team_name}}</span></td>
                        <td>{{games_played}}</td>
                        <td>{{wins}}</td>
                        <td>{{losses}}</td>
                        <td>{{draws}}</td>
                        <td>{{goal_difference}}</td>
                        <td>{{points}}</td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>

        </div>

        <!-- Container to display top scorers for league <- Split 50% -->
        <div class="container" id="top-scorers-container">
            <h2>Top Scorers</h2>
            <table>
                <thead>
                    <tr>
                        <th>Player Name</th>
                        <th>GP</th>
                        <th>Goals</th>
                        <th></th>
                        <th>Team Name</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each topScorers.scorers}}
                    <tr>
                        <td>{{player.player_name}}</td>
                        <td>{{games_played}}</td>
                        <td>{{goals}}</td>
                        <td><img src="{{team.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
                        <td>{{team.team_name}}</td>

                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>

    </div>
</div>