<!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://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
        body {
            padding-top: 60px;
        }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">{{server.name}}</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#players">Players</a></li>
                        <li><a href="#map">Map</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </nav>

<div class="container">
    <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>
            <table class="table table-striped table-bordered" id="playersTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Latency (ms)</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.team.name}}</td>
                        <td>{{player.kills}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <a href="#" name="map"></a>
            <h3>Map Overview:</h3>
            <img src="overview" id="mapOverview" class="img-responsive"/>
        </div>
    </div>
</div>
<!-- /.container -->

<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 = (((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 uptime = {{(reactor.seconds() - server.start_time)|int}};

    function displayUptime() {
       $('#uptime').html(prettifyTimespan(uptime));
    }

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

    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++) {
                var player = players[i];
                $("#playersTable tbody").append("<tr><td>" +
                    player.name + "</td><td>" +
                    player.latency + "</td><td>" +
                    player.team + "</td><td>" +
                    player.kills + "</td></tr>");
            }

        })
    };

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

    setInterval(function() {
        uptime += 1;
        displayUptime();
    }, 1000);

    $(document).ready(function () {
       displayUptime()
    });
</script>

    </body>
</html>
