<%- include("../../partials/header.ejs") %>
<%- include("../../partials/nav.ejs") %>
<%
    let defaultColour = "#BA2EFF";
    let foreground = "#ffffff";

    if (req.user) {
        defaultColour = req.user.db.preferences.defaultColour || "#BA2EFF"
        foreground = req.user.db.preferences.defaultForegroundColour || "#ffffff"
    }

    for (i = 0; i < users.length; i++) {
        users[i].position = i + 1;
    }
%>
<section class="hero is-black">
    <div class="hero-body">
        <br />
        <div class="container has-text-centered">
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-podium-star has-text-default fa-1x"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle"><%= subtitle %></h2>
        </div>
    </div>
    </section>
    <div class="container">
        <div style="text-align: center;" class="section content" style="overflow: hidden;">
            <table style="width:100%">
                <tr class="has-background-primary">
                  <th>Username</th>
                  <th>Place</th>
                  <th>Score</th>
                </tr>
                <%- users.map(user => include("./snakeLBtr.ejs", { user })).join(''); %>
              </table>
        </div>     
    </div>
    <style>
        table {
            display: block;
            width: 100%;
            overflow: auto;
            word-break: normal;
            word-break: keep-all;
            -webkit-overflow-scrolling: touch;
        }
    </style>
<%- include("../../partials/footer.ejs") %>