{% extends "base.html" %}

{% block js %}
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.6.0/moment.js"></script>
	<script>window.sysvitals.api_key = '{{ api_key }}';</script>
	<script src="/static/js/stats.js"></script>
{% end %}
{% block css %}
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.4.6/rickshaw.css">
	<link rel="stylesheet" href="/css/stats.css">
{% end %}

{% block main %}
	{% for server in servers %}
		<br>
		<a href="/stats/{{ server['group_id'] }}/{{ server['id'] }}">{{ server['hostname'] }}</a>
	{% end %}
	<p>
	<select id="resolution">
		<option value="1" selected>today</option>
		<option value="7">last 7 days</option>
		<option value="30">last 30 days</option>
		<option value="90">last 90 days</option>
	</select>
	</p>
	{% for i, field in enumerate(['cpu', 'mem', 'net', 'disk']) %}
		<div id="{{ field }}" class="graph_container"></div>
		{% if i == 1 %}<br>{% end %}
	{% end %}
{% end %}