{% extends "base.html" %}
{% block content %}	
<style>
.alert-danger {
	width: 450px;
	display: inline-block;
	height: 25px;
	padding-top: 0px;
}
</style>
<script>
	$("#secIntervals").css("display", "none");
	var ip = []
	var hostnamea = []
	{% for s in servers_all %}
		ip.push("{{s[2]}}")
		hostnamea.push("{{s[1]}}")
	{% endfor %}
</script>
<table class="overview">
	<tr class="overviewHead">
		<td class="padding10 first-collumn">
			Server
		</td>
		<td class="padding10">
			Action
		</td>
		<td class="padding10">
			WAF mode
		</td  class="padding10">
		<td>
			Metrics
		</td>
		<td>
			<a onclick="showOverviewWaf(ip, hostnamea)" title="Refresh" style="float: right; margin-right: 25px;"><img  src="/inc/images/update.png" alt="Refresh" class="icon"></a>
		</td>
	</tr>
	{% for s in servers_all %}
		<tr class="{{ loop.cycle('odd', 'even') }}" id="{{s[1]}}"></tr>
	{% endfor %}
</table>

<link href="/inc/chart.min.css" rel="stylesheet">
<script src="/inc/overview.js"></script>
<script src="/inc/metrics.js"></script>
<script src="/inc/chart.min.js"></script>
<script src="/inc/waf.js"></script>
<div id="refresh" style="text-align: right;margin-top: 20px;margin-right: 20px;" title="Refresh metrics" onclick="showWafMetrics()">
	<img  src="/inc/images/update.png" alt="Refresh" class="icon">
</div>
{% for s in servers %}
<div class="chart-container">
	<canvas id="s_{{s.0}}" role="img"></canvas>
</div>
{% endfor %}
<div id="dialog-confirm" style="display: none;">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:3px 12px 20px 0;"></span>Are you sure?</p>
</div>
<script>
	function showWafMetrics() {
		{% for s in servers %}
			getWafChartData('{{s.0}}')
		{% endfor %}
	}
	showWafMetrics()
	showOverviewWaf(ip, hostnamea)
</script>
{% endblock %}