{% extends "base.html" %}
{% load datehumanize %}
{% block widgets %}
    $.ajax({
        url: '/api/stats/domain/{{domain}}',
        method: 'GET',
        beforeSend: function() { $('#graph').spin("flotload"); },
        success: function (resp) {
            var graph = $('#graph');
            graph.spin(false);
            series = [{label: 'Meeting minutes for {{domain}}',data: resp['data']}];
            $.plot(graph,series,{
                lines: { show: true },
                points: { show: true },
                xaxis: { mode: "time" }
            });
            $('#minutes').append(resp['minutes']);
            $('#rooms').append(resp['rooms']);
            $('#users').append(resp['users']);
            $('#begin').append(resp['begin']));
            $('#end').append(resp['end']));
        }
    });
{% endblock %}
{% block content %}
<h1>Meeting statistics for {{domain}}</h1>
<div id="graph" style="width:600px;height:300px; display: block; float: left; margin-right: 30px;"></div>
<div>
<h2>Summary</h2>
<table>
	<tr><td><b>Total minutes:</b></td><td id="minutes"></td></tr>
	<tr><td><b>Total rooms:</b></td><td id="rooms"></td></tr>
	<tr><td><b>Total unique users:</b></td><td id="users"></td></tr>
    <tr><td><b>Start time:</b></td><td id="begin"></td></tr>
    <tr><td><b>End time:</b></td><td id="end"></td></tr>
	<tr><td colspan="2" style="padding-top: 10px;"><a href="/stats">Look at your own statistics</a></td></tr>
</table>
</div>
{% endblock %}