{% extends "base.html" %}
{% block content %}	
<style>
table, th, tr, td {
	border: 1px solid #ddd;
	align: center;
	text-align: center;
}
th, tr, td {
	width: 6%;
	min-width: 3%;
	padding: 10px;
	}
</style>
<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>
{% if servers|length == 0 %}
	{% include 'include/getstarted.html' %}
{% else %}
	<div id="table_metrics"></div>
	<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 10px;" title="Refresh metrics" onclick="showMetrics()">
		<span class="service-reload"></span>
	</div>
	<div id="sortable">
{% for s in servers %}
	<div class="chart-container">
		<canvas id="{{s.0}}" role="img"></canvas>
	</div>
{% endfor %}
	</div>
<script>
	function showMetrics() {
		let metrics = new Promise(
			(resolve, reject) => {
				{% for s in servers %}
					getChartData('{{s.0}}')
				{% endfor %}
				loadMetrics()
			});	
		metrics.then();
	}
	showMetrics()
 </script>
{% endif %}
{% endblock %}