{% extends "base.html" %}
{% load datehumanize %}
{% block widgets %}
$.ajax({
	url: '/api/stats/user/{{username}}',
	method: 'GET',
	success: function (resp) {
	    var graph = $('#graph');
	    series = [{label: 'Meeting minutes for {{username}}',data: resp['data']}];
		$.plot(graph,series,{
        	lines: { show: true },
        	points: { show: true },
        	xaxis: { mode: "time" }
    	});
    	$('#minutes').append(resp['minutes']);
    	$('#rooms').append(resp['rooms']);
	}
});
$("#graph").ajaxStart(function() {
        this.spin("large")
}).ajaxStop(function() {
        this.spin(false)
});
{% endblock %}
{% block content %}
<h1>Meeting statistics for {{username}}</h1>
<div id="graph" style="width:600px;height:300px; display: block; float: left; margin-right: 20px;"></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 colspan="2" style="padding-top: 10px;"><a href="/stats/domain/{{domain}}">Look at statistics for {{domain}}</a></td></tr>
</table>
</div>
{% endblock %}