{% extends "base.html" %}
{% block content %}	
<table class="overview">
	<tr class="overviewHead">
		<td class="padding10 first-collumn">
			Server
		</td>
		<td>
			<!-- WAF status -->
		</td>
		<td class="padding10">
			Action
		</td>
		<td class="padding10">
			WAF mode
		</td  class="padding10">
		<td>
			Metrics
		</td>
		<td>
			<a onclick="showOverviewWaf()" title="Refresh" style="float: right; margin-right: 25px;"><img  src="/inc/images/update.png" alt="Refresh" class="icon"></a>
		</td>
	</tr>
<tbody id="ajaxwafstatus"></tbody>	
</table>
<div id="ajax"></div>

<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>

{% for s in servers %}
<div class="chart-container" style="">
	<canvas id="{{s.0}}" role="img"></canvas>
</div>
	<script>
		getWafChartData('{{s.0}}')
	</script>
{% endfor %}

<script>
showOverviewWaf()
</script>
{% endblock %}