{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, checkbox, select %}
<style>
.container {
	margin-right: 0;
}
</style>
<script src="/inc/users.js"></script>
{% include 'include/del_confirm.html' %}
<input type="hidden" id="new-group" name="new-group" value="{{ group }}">
<input type="hidden" id="new-server-group-add" name="new-server-group-add" value="{{ group }}" >
<input type="hidden" id="new-sshgroup" name="new-sshgroup" value="{{ group }}" >
{{ input('new-telegram-group-add', type='hidden', value=group) }}
<div id="tabs">
	<ul>
		<li><a href="#users" title="Servers: Manage users - HAProxy-WI">Users</a></li>
		<li><a href="#servers" title="Servers: Manage servers - HAProxy-WI">Servers</a></li>
		<li><a href="#ssh" title="Servers: Manage SSH credentials - HAProxy-WI">SSH credentials</a></li>
		<li><a href="#checker" title="Servers: Manage checker - HAProxy-WI">Checker</a></li>
		<li><a href="#settings" title="Admin area: Manage HAProxy-WI settings - HAProxy-WI">Settings</a></li>
		<li><a href="#installproxy" title="Servers: Proxy service installation - HAProxy-WI">Proxy installation</a></li>
		<li><a href="#installmon" title="Servers: Monitoring service installation - HAProxy-WI">Monitoring installation</a></li>
		<li><a href="#backup" title="Servers: Backup configs - HAProxy-WI">Backup</a></li>
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>
	<div id="users">
		{% include 'include/admin_users.html' %}
	</div>

	<div id="servers">
		{% include 'include/admin_servers.html' %}
	</div>

	<div id="ssh">
		{% include 'include/admin_ssh.html' %}
	</div>
	
	<div id="checker">
		{% include 'include/admin_telegram.html' %}
	</div>

	<div id="settings">
		{% include 'include/admin_settings.html' %}
	</div>

	<div id="installproxy">
		<table class="overview">
			<caption><h3>Install HAProxy</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Current version</td>
				<td class="padding10 first-collumn" style="width: 30%;">Available Versions</td>			
				<td class="padding10 first-collumn" style="width: 30%;">Server</td>
				<td>SYN flood protect</td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_hap_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					{% set values = dict() %}
					{% set values = {'2.0.5-1':'2.0.5-1','2.0.6-1':'2.0.6-1', '2.0.7-1':'2.0.7-1', '2.0.9-1':'2.0.9-1',
					'2.0.11-1':'2.0.11-1', '2.0.12-1':'2.0.12-1', '2.0.13-1':'2.0.13-1', '2.0.14-1':'2.0.14-1',
					'2.0.17-1':'2.0.17-1','2.0.18-1':'2.0.18-1','2.2.4-1':'2.2.4-1','2.3.0-1':'2.3.0-1'} %}
					{{ select('hapver',  values=values, selected='2.3.0-1', required='required') }}
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="haproxyaddserv" id="haproxyaddserv">
						<option disabled selected>Choose server</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td>
					{{ checkbox('syn_flood', title="Enable SYN flood protect", checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="install" title="Install HAProxy">Install</span>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Install Nginx</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Current version</td>
				<td class="padding10 first-collumn" style="width: 30%;">Available Versions</td>			
				<td class="padding10 first-collumn" style="width: 30%;">Server</td>
				<td>SYN flood protect</td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_nginx_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					HAProxy-WI will try to install the latest Nginx version from official Nginx repository
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="nginxaddserv" id="nginxaddserv">
						<option disabled selected>Choose server</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td>
					{{ checkbox('nginx_syn_flood', title="Enable SYN flood protect", checked='checked') }}
				</td>
				<td>
					<span class="ui-button ui-widget ui-corner-all" id="nginx_install" title="Install Nginx">Install</span>
				</td>
			</tr>
		</table>
		<div id="ajax"></div>
	</div>

	<div id="installmon">
		{% include 'include/mon_installation.html' %}
	</div>

	<div id="backup">
		{% include 'include/admin_backup.html' %}
	</div>
	
</div>
<div id="group_error" style="display: none; clear: both;">
	<div class="alert alert-danger">
		<b>Do not edit this section if your group is "ALL"!</b> Add first<a href="users.py#groups" title="Admin Area: Groups">group</a> or edit your own group at<a href="users.py#users" title="Admin Area: Users">users</a> page
	</div>
</div>
{% include 'include/admins_dialogs.html' %}
{% include 'include/change_pass_form.html' %}
<script>
	if($('#new-server-group-add').val() == 1) {
		$('#group_error').css('display', 'block');
		$('#add-user-button').css('display', 'none');
		$('#add-server-button').css('display', 'none');
		$('.passwordChange').css('display', 'none');
		$('#add-ssh-button').css('display', 'none');
		$('#ssh_key_upload').css('display', 'none');
		$('#add-telegram-button').css('display', 'none');
		$('input').css('color', 'rgba(0, 0, 0, 0.3)');
		setTimeout(function() {
			$("input[type=checkbox]").checkboxradio( "disable" );
			$("select").selectmenu( "disable" );
			$("button").button( "disable" );
			$("input").attr( "readonly", "readonly" );
			$('.delete').remove()
			$('#hapver').selectmenu('enable');
			$('#haproxyaddserv').selectmenu('enable');
			$('#nginxaddserv').selectmenu('enable');
			$('#haproxy_exp_addserv').selectmenu('enable');
			$('#nginx_exp_addserv').selectmenu('enable');
			$('#geoipserv').selectmenu('enable');
			$('#syn_flood').checkboxradio('enable');
			$('#nginx_syn_flood').checkboxradio('enable');
			$('#updating_geoip').checkboxradio('enable');
		}, 500 );
		
	}
	$( function() {
		{% for user in users %}
			$("#role-{{user.0}}" ).selectmenu({
				  width: 100
			});	
		{% endfor %}
		{% for server in servers %}
			$("#slavefor-{{server.0}}" ).selectmenu({
			  width: 130
			});
			$("#credentials-{{server.0}}" ).selectmenu({
			  width: 150
			});
		{% endfor %}
		{% for ssh in sshs %}
			$("#sshgroup-{{ ssh.0}}" ).selectmenu({
				  width: 150
			});
		{% endfor %}
	});
</script>
<style>
.ui-selectmenu-button.ui-button {
    width: 10em;
}
.checkbox {
	width: 90px;
}
</style>
{% endblock %}