{% extends "base_site.html" %}
{% load staticfiles %}

{% block title %}
    {{server}}
{% endblock %}

{% block content %}
    <h1>
        {{server}}
    </h1>

    <a class="btn btn-default" href="{{server.game_url}}" rel="nofollow">Launch game</a>
    {% if server.site_url %}
        <a class="btn btn-default" href="{{server.site_url}}" rel="nofollow">Homepage</a>
    {% else %}
        <button class="btn btn-default">No homepage</button>
    {% endif %}

    <h2>Player Population</h2>
    <p>Currently <span class="bold">
        {{server.current_players}} players
    </span>online.</p>

    <p>Last updated <span class="bold" title="{{server.last_updated|date:'r'}} GMT">
        {{server.last_updated|timesince}}
    </span>ago.</p>

    <table class="table table-hover">
        <thead>
            <tr>
                <th>Time period</th>
                <th>Average</th>
                <th>Min</th>
                <th>Max</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Last day</th>
                <th>{{daily_average|floatformat}}</th>
                <th>{{daily_min}}</th>
                <th>{{daily_max}}</th>
            </tr>
            <tr>
                <th>Last week</th>
                <th>{{weekly_average|floatformat}}</th>
                <th>{{weekly_min}}</th>
                <th>{{weekly_max}}</th>
            </tr>
            <tr>
                <th>Last month</th>
                <th>{{monthly_average|floatformat}}</th>
                <th>{{monthly_min}}</th>
                <th>{{monthly_max}}</th>
            </tr>
    </table>

    <div id="chart"></div>
    <div id="tooltip"></div>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.flot.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.flot.time.js' %}"></script>
    <script type="text/javascript">
        $(function() {
            var series = [
                {# convert timestamp to ms, because javascript... #}
                {% for item in weekly_history %}
                    [{{item.created|date:'U'}} * 1000, {{item.players}}],
                {% endfor %}
            ];

            var options = {
                xaxis: {
                    mode: "time",
                    timezone: "browser",
                },
                lines: {
                    show: true,
                    fill: true,
                },
                grid: {
                    hoverable: true,
                    borderWidth: 0,
                },
            };

            $.plot("#chart", [series], options);

            $("#chart").bind("plothover", function (event, pos, item) {
                if (item) {
                    var time = item.datapoint[0];
                    var players = item.datapoint[1];
                    var timestamp = new Date(time).toString();
                    $("#tooltip")
                        .html(players + " players at " + timestamp)
                        .css({top: item.pageY+5, left: item.pageX+5})
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            });
        });
</script>
{% endblock %}