extends ./layout

//- stats.pug is the frontend for the stats page
block content
    style
        include ./stylesheets/authentication.css
        include ./stylesheets/statsview.css
    script(src=`https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.5.0/socket.io.js`)
    script
        include ./resources/statsviewcontroller.js
    script.
        var socket = io.connect(`http://${window.location.hostname}:4321`);
        socket.on("connect", () => console.log("connected to socket"));

        socket.on("a2cf757f-abd7-537b-953e-ef2f4f798f7e", (data) => handleStatsUpdate(data));
    .outermost
        .stats-container
            h1 Dash Stats

            p(class="stats-content" id="connection-count") Current Connections: #{numConnections}
            div(class="stats-content stats-server-status-container")
                p Server Status: 
                div(id="stats-traffic-message" class="stats-server-status-item stats-server-status-" + serverTraffic)
                    p #{serverTrafficMessage}
            div(class="stats-content stats-connected-users")
                p Connected Users: 
                ul(id="connected-user-list")
                    each val in connectedUsers
                        li= val