{% extends "base.html" %}
{% block content %}	
{% from 'include/input_macros.html' import input, checkbox %}
<script src="/inc/users.js"></script>
<table class="overview">
	<caption><h3>Create new HA cluster</h3></caption>
	<tr class="overviewHead">
		<td class="padding10 first-collumn">Master</td>
		<td>Slave</td>
		<td><span title="Interface for VRRP address">Interface(?)</span></td>
		<td>VRRP IP</td>
		<td><span title="HAProxy-WI will try to install HAProxy">HAProxy(?)</span></td>
		<td><span title="HAProxy-WI will try to install Nginx">Nginx(?)</span></td>
		<td>SYN flood protect</td>
		<td></td>
	</tr>
	<tr>
		<td class="padding10 first-collumn">
			<select id="master">
				<option disabled selected>Choose master</option>
				{% for select in selects %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endfor %}
			</select>
		</td>
		<td>
			<select id="slave">
				<option disabled selected>Choose master</option>
				{% for select in selects %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endfor %}
			</select>
		</td>
		<td>{{ input('interface', size='7') }}</td>
		<td>{{ input('vrrp-ip', size='14') }}</td>
		<td>{{ checkbox('hap') }}</td>
		<td>{{ checkbox('nginx') }}</td>
		<td>{{ checkbox('syn_flood') }}</td>
		<td>
			<button id="create" title="Create HA configuration">Create</button>
		</td>
	</tr>
</table>
		
<table class="overview">
	<caption><h3>Or add VRRP to exist</h3></caption>
	<tr class="overviewHead">
		<td class="padding10 first-collumn">Master</td>
		<td>Slave</td>
		<td><span title="Interface for VRRP address">Interface(?)</span></td>
		<td>VRRP IP</td>
		<td><span title="If checked HAProxy-WI will restart Keepalived">Restart(?)</span></td>
		<td style="width: 23%;"></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td class="padding10 first-collumn">
			<select id="master-add">
				<option disabled selected>Choose master</option>
				{% for select in selects %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endfor %}
			</select>
		</td>
		<td>
			<select id="slave-add">
				<option disabled selected>Choose master</option>
				{% for select in selects %}
					<option value="{{ select.2 }}">{{ select.1 }}</option>
				{% endfor %}
			</select>
		</td>
		<td>{{ input('interface-add', size='7') }}</td>
		<td>{{ input('vrrp-ip-add', size='14') }}</td>
		<td>{{ checkbox('kp') }}</td>
		<td></td>
		<td></td>
		<td>
			<button id="add-vrrp" title="Add HA configuration">Add</button>
		</td>
	</tr>
</table>
<div id="ajax"></div>
<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
	Read <a href="https://haproxy-wi.org/howto.py?howto=ha_cluster" title="How to create high available cluster" target="_blank">How to create high available cluster</a>
</div>
<script>
$( function() {
	$( "select" ).selectmenu({
	  width: 180
	});
});
</script>
{% endblock %}