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

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

    <!-- Container on Left Side containing Club Information -->
    <div class="container" id="club-information-container">
        
    </div>

        

        

</div>

<!-- Club Player Container -->
<div class="container" id="club-players-container">
    <h2>Players</h2>
    <ul id="players-list"></ul>
    <table id="players-table" class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>DOB</th>
                <th>Nationality</th>
            </tr>
        </thead>
        <tbody>
            {{#each club.squad}}
            <tr>
                <td>{{name}}</td>
                <td>{{position}}</td>
                <td>{{dateOfBirth}}</td>
                <td>{{nationality}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
</div>

<!-- Container for Club Information -->
<div class="information-container" id="club-information-container">

    <h2>Information</h2>

    <!-- Club Information -->
    <ul id="scorers-list"></ul>
    <table id="top-scorers-table" class="table">
        <tbody>

            <!-- Club Crest -->
            <tr>
                <td id="club-crest">
                    <img src="{{club.crest}}">
                </td>
            </tr>

            <!-- Club Country Container -->
            <tr>
                <td id="club-area-flag-row">
                    <img id="club-area-flag" src="{{club.area.club_flag}}">
                </td>
            </tr>

            <!-- Club Address Container -->
            <tr>
                <td>
                    <span style="font-weight: bold;">Club Address:</span><br>
                    {{club.address}}
                </td>
            </tr>

            <!-- Club Foundation Container -->
            <tr>
                <td>
                    <span style="font-weight: bold;">Founded</span><br>
                    {{club.founded}}
                </td>
            </tr>

            <!-- Manager Information Table -->
            <tr>
                <td>
                    <span style="font-weight: bold;">Manager</span><br>
                    <span>Name: {{club.coach.name}}</span><br>
                    <span>Nationality: {{club.coach.nationality}}</span><br>
                    <span>DOB: {{club.coach.dateOfBirth}}</span><br>
                    <span>contract start: {{club.coach.contract.start}}</span><br>
                    <span>contract end: {{club.coach.contract.until}}</span><br>
                </td>
            </tr>

        </tbody>
    </table>

</div>

<!-- Container to Display Club's Current Competitions -->
<div class="club-current-competitions-container">

    <h2>Competitions</h2>

    <ul id="competitions-list"></ul>
    <table id="players-table" class="table">

        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>

        <tbody>
            {{#each club.runningCompetitions}}
            <tr>
                <td>{{name}}</td>
            </tr>
            {{/each}}
        </tbody>

    </table>

</div>