<%# Leaderboard page to see the top trainers in each subject %>
<%# ARGUMENTS: rankings - an object containing arrays of ranking for each subject %>

<%- include("../partials/header") -%>
<%- include("../partials/navigationPrivate") -%>

<h1 class="my-5 container text-center display-3">Rating Leaderboard</h1>

<div class="container">

    <div class="row jumbotron">

        <div class="col-12 col-xl-4">
            <h3 class="text-center">Physics</h3>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Username</th>
                        <th scope="col">Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <% let rankPhysics = 1; %>
                    <% rankings.physics.forEach((user) => { %>
                        <% let style = ""; %>
                        <% if(rankPhysics == 1) { style = "background-color:#fcffa6"; } %>
                        <% if(rankPhysics == 2) { style = "background-color:#d1cfcf"; } %>
                        <% if(rankPhysics == 3) { style = "background-color:#edb782"; } %>
                        <tr style=<%= style %>>
                            <% if(rankPhysics == 1) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_First.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankPhysics == 2) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Second.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankPhysics == 3) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Third.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else { %>
                                <th scope="row"><%= rankPhysics %></th>
                            <% } %>
                            <td><a href="/profile/<%= user.ign %>" target="_blank" style="text-decoration: none; color: 4c90f5;"><%= user.ign.length <= 18 ? user.ign : user.ign.substring(0, 15)+"..." %></a></td>
                            <td><%= user.rating.physics %></td>
                        </tr>
                        <% rankPhysics++; %>
                    <% }) %>
                </tbody>
            </table>
        </div>

        <div class="col-12 col-xl-4">
            <h3 class="text-center">Chemistry</h3>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Username</th>
                        <th scope="col">Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <% let rankChem = 1; %>
                    <% rankings.chem.forEach((user) => { %>
                        <% let style = ""; %>
                        <% if(rankChem == 1) { style = "background-color:#fcffa6"; } %>
                        <% if(rankChem == 2) { style = "background-color:#d1cfcf"; } %>
                        <% if(rankChem == 3) { style = "background-color:#edb782"; } %>
                        <tr style=<%= style %>>
                            <% if(rankChem == 1) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_First.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankChem == 2) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Second.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankChem == 3) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Third.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else { %>
                                <th scope="row"><%= rankChem %></th>
                            <% } %>
                            <td><a href="/profile/<%= user.ign %>" target="_blank" style="text-decoration: none; color: 4c90f5;"><%= user.ign.length <= 18 ? user.ign : user.ign.substring(0, 15)+"..." %></a></td>
                            <td><%= user.rating.chemistry %></td>
                        </tr>
                        <% rankChem++; %>
                    <% }) %>
                </tbody>
            </table>
        </div>

        <div class="col-12 col-xl-4">
            <h3 class="text-center">Biology</h3>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Username</th>
                        <th scope="col">Rating</th>
                    </tr>
                </thead>
                <tbody>
                    <% let rankBio = 1; %>
                    <% rankings.bio.forEach((user) => { %>
                        <% let style = ""; %>
                        <% if(rankBio == 1) { style = "background-color:#fcffa6"; } %>
                        <% if(rankBio == 2) { style = "background-color:#d1cfcf"; } %>
                        <% if(rankBio == 3) { style = "background-color:#edb782"; } %>
                        <tr style=<%= style %>>
                            <% if(rankBio == 1) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_First.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankBio == 2) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Second.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankBio == 3) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Third.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else { %>
                                <th scope="row"><%= rankBio %></th>
                            <% } %>
                            <td><a href="/profile/<%= user.ign %>" target="_blank" style="text-decoration: none; color: 4c90f5;"><%= user.ign.length <= 18 ? user.ign : user.ign.substring(0, 15)+"..." %></a></td>
                            <td><%= user.rating.biology %></td>
                        </tr>
                        <% rankBio++; %>
                    <% }) %>
                </tbody>
            </table>
        </div>

    </div>

</div>

<h1 class="my-5 container text-center display-3">Problem Rush Leaderboard</h1>

<div class="container">

    <div class="row">

        <div class="col-0 col-xl-2">
        </div>

        <div class="col-12 col-xl-8 jumbotron">
            <h3 class="text-center">Highest Rush Scores</h3>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Username</th>
                        <th scope="col">High Score</th>
                        <th scope="col">Attempts</th>
                    </tr>
                </thead>
                <tbody>
                    <% let rankRush = 1; %>
                    <% rankings.rush.forEach((user) => { %>
                        <% let style = ""; %>
                        <% if(rankRush == 1) { style = "background-color:#fcffa6"; } %>
                        <% if(rankRush == 2) { style = "background-color:#d1cfcf"; } %>
                        <% if(rankRush == 3) { style = "background-color:#edb782"; } %>
                        <tr style=<%= style %>>
                            <% if(rankRush == 1) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_First.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankRush == 2) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Second.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankRush == 3) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Third.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else { %>
                                <th scope="row"><%= rankRush %></th>
                            <% } %>
                            <td><a href="/profile/<%= user.ign %>" target="_blank" style="text-decoration: none; color: 4c90f5"><%= user.ign.length <= 33 ? user.ign : user.ign.substring(0, 30)+"..." %></a></td>
                            <td><%= user.stats.rush.highscore %></td>
                            <td><%= user.stats.rush.attempts %></td>
                        </tr>
                        <% rankRush++; %>
                    <% }) %>
                </tbody>
            </table>
        </div>

        <div class="col-0 col-xl-2">
        </div>

    </div>

</div>

<h1 class="my-5 container text-center display-3">Experience Leaderboard</h1>

<div class="container">

    <div class="row">

        <div class="col-0 col-xl-2">
        </div>

        <div class="col-12 col-xl-8 jumbotron">
            <h3 class="text-center">Highest Level Mutorials Users</h3>
            <table class="text-center table">
                <thead>
                    <tr>
                        <th scope="col">Rank</th>
                        <th scope="col">Username</th>
                        <th scope="col">Level</th>
                        <th scope="col">Experience</th>
                    </tr>
                </thead>
                <tbody>
                    <% let rankExperience = 1; %>
                    <% rankings.experience.forEach((user) => { %>
                        <% let style = ""; %>
                        <% if(rankExperience == 1) { style = "background-color:#fcffa6"; } %>
                        <% if(rankExperience == 2) { style = "background-color:#d1cfcf"; } %>
                        <% if(rankExperience == 3) { style = "background-color:#edb782"; } %>
                        <tr style=<%= style %>>
                            <% if(rankExperience == 1) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_First.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankExperience == 2) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Second.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else if(rankExperience == 3) { %>
                                <th scope="row"><img src="https://f000.backblazeb2.com/file/mutorials/icons/Leaderboard_Third.svg" width="25" height="25" class="d-inline-block align-top" alt=""></th>
                            <% } else { %>
                                <th scope="row"><%= rankExperience %></th>
                            <% } %>
                            <td><a href="/profile/<%= user.ign %>" target="_blank" style="text-decoration: none; color: 4c90f5"><%= user.ign.length <= 33 ? user.ign : user.ign.substring(0, 30)+"..." %></a></td>
                            <td><%= user.level.level %></td>
                            <td><%= Math.round(user.experience) %></td>
                        </tr>
                        <% rankExperience++; %>
                    <% }) %>
                </tbody>
            </table>
        </div>

        <div class="col-0 col-xl-2">
        </div>

    </div>

</div>


<%- include("../partials/footer") -%>
