extends ./layout

//- stats.pug is the frontend for the stats page
block content
    style
        include ./stylesheets/authentication.css
        include ./stylesheets/statsview.css
    script(src=`http://localhost:4321/socket.io/socket.io.js`)
    script
        include ./resources/statsviewcontroller.js
    script.
        var socket = io.connect("http://localhost: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")