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

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

    <!-- Container on Top containing Club Information -->
    <div id="club-information-container" class="information-container">
        <img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
        <h1 id="club-title">{{club.name}}</h2>
        <img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
    </div>

    <div id="club-page-contents-container" class="information-container">

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

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

                <h2>Information</h2>

                <!-- Club Information -->
                <table id="club-information-table" class="table">
                    <tbody>

                        <!-- 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> <!-- End of Club History Container -->
            
            <!-- Container to Display Club's Current Competitions -->
            <div class="club-current-competitions-container">

                <h2>Competitions</h2>

                <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> <!-- End of Club Competitions Container -->
        
        </div>

        <!-- Container on Right Side containing Club Stats -->
        <div id="club-stats-and-players-container" class="stats-container">

            <!-- Club Player Container -->
            <div id="club-players-container" class="container">

                <h2>Players</h2>
                
                <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> <!-- End of Club Player Table Container -->

        </div> <!-- End of Club Stats Container -->
    
    </div>

</div>