<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>{{server.name}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script async src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACjlBMVEX///8AgIA1e602faw3faw2faw3faw3faw4fKw4fKtVVao1gKo3faxGh7JgmLxhmb5KibQ7gK02fas2fqs3fqw4fa03faw4faw5f61FhrI2fa0AAP82fao/gq86fq06gK5JbbY5faw9ga83fKw3gK05fq05f605cao3erE4fq03faw4fas6fK85faw+gq83faw2fKw4fqxChLA4faw5fK42fq05fqo3faw3fqw4fas2e6k3fK00dqI5fao0eaUzgLM3faxGh7I2fas3fat1pcVBgq83faxAgJ83faxJiLMrgKo4faw9eqJpmLp4o8GAqcWAq8hOjLU3faw4e6s3faw2eqc3fKw2gK4zd6o2fKo4gK8zgKo3faxxo8TZ5+/////g6/KKs885f63O3+vZ5u9Mi7U4fqw8ga7P4Ovh4eG5ublHiLO30OHp6ekyMjITExO/v7+0z+BKibSIss691OTw8PA8PDwAAAAXFxfDw8P+/v9ak7qUudL2+fv19fVGRkYbGxvNzc2ewNeiwthwcHA2Njb29vbf6vJzpMVhmb7Q0NAKCgqFhYX5+fn6+/220OGKiopERETo6OjX5O3a5/AsLCzr6+v6+vqQssg2fKru9PjGxsYBAQElJSUtLS17e3vq6urt7e37+/vY5Owyc57F2eevr69WVlZra2ttbW1JSUl8fHxRUVGSkpLk5OTs7Ozu7u7w9PczdKCVutNqamo4ODjv7+/z8/P8/Pze6fA0d6Tx9vnx8fFXV1fy8vL09PSWudE2e6n6/P2MjIzZ5OtflbnQ3uf+/v7B1eI1eaaDrMeErMiErciFrsmFr8qBq8eAqsWBq8aDrcmErso0dqM0d6M1eKU1eac2eqg3favwfsKQAAAAXHRSTlMAAj6p0vj646BSAzC2+O3u+NQ9Vf7+Yjf5/loBOfHyFgd48Zoc2vYJF93UiSOd/fZQ/f39SGP93pSulXmsP5gK+PledPv+7Qi5+gaX9OHr+f7y92qR4agmHiEgHuIhMQkAAAABYktHRACIBR1IAAAACXBIWXMAAABvAAAAbwHxotxDAAAAB3RJTUUH4gcZDQETnRQ34AAAAa1JREFUOMtjYBiCgBGvLBMzCysbOwcnF3Zpbp6YGF4+foGYGEEhbPLCIjGxcfFAkJCYJCqGKS8uIZkcDwUpqWlSaNLSMrLpGSC5zCywIdly8sjSCopKMTE5IJncvPwCEF0Yo4wkr6IaU1RcAhIvLSsvr6gEMqqq1dTh8hqaMTW1YLvr6suBoKERyGyK0dLWgSrQjWmGOq6lHAxa2+Lj2zv0YvQNwPI6hp1Q+a5uiILynl4gr6/EyNgEpMA0ph+qYAJUvnziJJCK+Mlm5iCHWMRMQbWhvHxq7rTpIIEZM4WBCixjZkEVzJ5TXj53HlDB/AXTFi4CCixeYgVUYB2zFBaCy5avWLlq9Zq166at31AKVLFxkw1QgW3MZpiC+NJ1W7ZOygXq37CtdPuO+J277IAK7B0cd8NV7Nk7Fyq/b/v+HQcOOoG84Rzjcgiu4vAKuHzbEVc3d3BEecQcPVYFVXB823qg/B6Q/AlPEUhIMXh5x5z08fXzP3X6zNlz585fuHj+0qXLAYExQcGItBYSeuXqtZPXbxyceTMGCtzCwlFSRERkZBQyiMaffAcXAAA759SosmdH4QAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNy0yNVQxMzowMToxOSswMjowMBtd1BUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDctMjVUMTM6MDE6MTkrMDI6MDBqAGypAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==">
    <link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABL1BMVEX///84fa1HiLJDhbFChLBXkrpGhrBQjLdTj7dXkbphmb4wgK9kmr5YkrlQjbc2gK5BhbFKibRIiLM1faw5capLirWrydxMi7VKirRzpMVFhK42ea44fqt4p8d0oL0zdKM5gKpIiLNglbk1ealAg7BmnL6nxNhPjLZHhrM8fahBfqdIhKxMh7BOirJQi7RRjbVSjrZTj7ZEhbE/g647gLEzd6pAgJ/Q4Ov////+/v/E2efy9vmwsLCUlJTu9Piiw9nv9Pi8vLwPDw8GBgaYmJi70+Pb6PD+/v4uLi4AAAAVFRXo6Oj3+vy2traLi4v4+Pjq8fbr6+s/Pz88PDxAQEA5OTnDw8Ps7Oz5+fn4+vz7+/uampqAgIDq6urt7e3v7+/y8vLy9vjZ2dnBwcHy8vNE8tIPAAAAN3RSTlMAO8fl6sQ3be/2bhCS+PQmNPLGKwnq+OxV7uwTSeX3NhLs6zVt9PrLcuDj6O3u8PLz9OyeGg8IxwWDbAAAAAFiS0dEAIgFHUgAAAAJcEhZcwAAADcAAAA3AWMdgYUAAAAHdElNRQfiBxkNARLqEwd2AAAAnUlEQVQY02NgIBMwMjGzsLIh+Owc5haWVpxcUC43D6+1hY2thR0fP5gvIGjvYOHo5Oxi4SokDOSLiLpZWLh7eHp6efuIiUsAzZO0sLDw9QQCP3+LAClpBhlZoEBgUHBIaFh4hIWcPIOCYiRQJCo6JjYuPiFKSZmBQUU1ESiSlAzkp6ipg6zR0NTS1tHV0zcwNDI2gbjElBsCzIjyFgBC7BtNMNEBzAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNy0yNVQxMzowMToxOCswMjowML0q36EAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDctMjVUMTM6MDE6MTgrMDI6MDDMd2cdAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFd6VFh0UmF3IHByb2ZpbGUgdHlwZSBpcHRjAAB4nOPyDAhxVigoyk/LzEnlUgADIwsuYwsTIxNLkxQDEyBEgDTDZAMjs1Qgy9jUyMTMxBzEB8uASKBKLgDqFxF08kI1lQAAAABJRU5ErkJggg==">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">{{server.name}}</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <div class="navbar-nav mr-auto">
                    <a class="nav-item nav-link" href="#info">Info</a>
                    <a class="nav-item nav-link" href="#map">Map</a>
                    <a class="nav-item nav-link" href="#players">Players</a>
                    </ul>
                </div>
            </div>
    </nav>

    <div class="container mb-3 mt-3">
        <div class="row-fluid">
            <div class="span12">

                <a href="#" name="info"></a>
                <h3>Server Details:</h3>
                <table class="table">
                    <thead>
                        <tr>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Identifier:</td>
                            <td>
                                <a href="{{server.identifier}}" id="serverIdentifier">{{server.identifier}}</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Game Mode:</td>
                            <td>
                                <span id="gameMode">{{server.game_mode_name}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>Map:</td>
                            <td>
                                <span id="mapName">{{server.map_info.name}} v{{server.map_info.version}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>Map Author:</td>
                            <td>
                                <span id="mapAuthor">{{server.map_info.author}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>Uptime:</td>
                            <td>
                                <span id="uptime"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>Enabled Scripts:</td>
                            <td>
                                <span id="scripts">{{ ', '.join(server.config['scripts'])}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <a href="#" name="players"></a>
                <h3>Players: (
                    <span id="playersCurrent">{{server.connections|count}}</span>/
                    <span id="playersMax">{{server.max_players}}</span>)</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="playersTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Latency (ms)</th>
                                <th>Client</th>
                                <th>Team</th>
                                <th>Kills</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for player in server.players.values() %}
                            <tr>
                                <td>{{player.name}}</td>
                                <td>{{player.latency}}</td>
                                <td>{{player.client_string}}</td>
                                <td>{{player.team.name}}</td>
                                <td>{{player.kills}}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <a href="#" name="map"></a>
                <h3>Map Overview:</h3>
                <img src="overview" id="mapOverview" class="img-fluid mx-auto" />
            </div>
        </div>
    </div>
    <!-- /.container -->
    <script id="jsondata" type="text/json">
        {"start_time": {{ server.start_time | int }} }
    </script>

    <script type="text/javascript">
        function prettifyTimespan(totalSeconds) {
            var days = Math.floor((totalSeconds % 31536000) / 86400);
            var hours = Math.floor(((totalSeconds % 31536000) % 86400) / 3600);
            var minutes = Math.floor((((totalSeconds % 31536000) % 86400) % 3600) / 60);
            var seconds = Math.floor((((totalSeconds % 31536000) % 86400) % 3600) % 60);


            var dayStr = (days > 0 ? days : 0) + " day";
            var hoursStr = (hours > 0 ? hours : 0) + " hour";
            var minutesStr = (minutes > 0 ? minutes : 0) + " minute";
            var secondsStr = (seconds > 0 ? seconds : 0) + " second";
            if (days > 1) dayStr += "s";
            if (hours > 1) hoursStr += "s";
            if (minutes > 1) minutesStr += "s";
            if (seconds > 1) secondsStr += "s";

            return [dayStr, hoursStr, minutesStr, secondsStr].join(", ");
        }

        var start_time = JSON.parse($("#jsondata").text()).start_time

        function displayUptime() {
            // js counts time in milliseconds
            $('#uptime').html(prettifyTimespan((Date.now() / 1000 ) - start_time));
        }

        function reloadOverview() {
            //add param to bypass browser caching
            $("#mapOverview").attr("src", "overview?timestamp=" + new Date().getTime());
        }

        function playerRow(player) {
            return $('<tr>').append(
                $('<td>').text(player.name),
                $('<td>').text(player.latency),
                $('<td>').text(player.client),
                $('<td>').text(player.team),
                $('<td>').text(player.kills));
        }

        function updateServerInfo() {
            $.getJSON("json", function (json) {
                $('#gameMode').html(json['gameMode']);
                $('#mapName').html(json['map']['name'] + ' v' + json['map']['version']);
                $('#mapAuthor').html(json['map']['author']);
                $('#scripts').html(json['scripts'].join(", "));

                var players = json['players'];

                $('#playersCurrent').html(players.length);
                $('#playersMax').html(json['maxPlayers']);

                $("#playersTable tbody").empty();

                for (var i = 0; i < players.length; i++) {
                    $("#playersTable tbody").append(playerRow(players[i]));
                }

            })
        };

        setInterval(updateServerInfo, 5000);
        setInterval(reloadOverview, 10000);

        setInterval(function () {
            displayUptime();
        }, 1000);

        $(document).ready(function () {
            displayUptime()
        });

    </script>

</body>

</html>
