{% 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]}}")
		var host = "{{s[1]}}"
		host = host.replace(/\./g, '\\.');
		hostnamea.push(host)
	{% endfor %}
</script>
{% if servers_all|length == 0 %}
	{% include 'include/getstarted.html' %}
{% else %}
<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;">
				<span class="service-reload"></span>
			</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()">
	<span class="service-reload"></span>
</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>
<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px; clear: both;">
	You can read the description and watch a video about WAF <a href="https://haproxy-wi.org/description.py?description=waf" title="WAF" target="_blank">here</a>
</div>
{% endif %}
{% endblock %}