{% 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 }}" >
<div id="tabs">
	<ul>
		<li><a href="#users">Users</a></li>
		<li><a href="#servers">Servers</a></li>
		<li><a href="#ssh">SSH credentials</a></li>
		<li><a href="#checker">Checker</a></li>
		<li><a href="#installhaproxy">Installation</a></li>
		<li><a href="#backup">Backup</a></li>
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>
	<div id="users">
		<table class="overview" id="ajax-users">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Login name</td>
				<td>Password</td>
				<td>Active</td>
				<td>Email</td>
				<td>Role</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
		{% for user in users %}
			<tr id="user-{{user.0}}" class="{{ loop.cycle('odd', 'even') }}">
				{% include 'include/admin_users.html' %}
				<td>
					<select id="role-{{user.0}}" name="role-{{user.0}}">
						<option disabled selected>Choose role</option>
						{% for role in roles %}
							{% if role.1 != "admin" %}
								{% if user.4 == role.1 %}
									<option value="{{ role.1 }}" selected>{{ role.1 }}</option>
								{% else %}
									<option value="{{ role.1 }}">{{ role.1 }}</option>
								{% endif %}
							{% endif %}
						{% endfor %}
					</select>
				</td>
				<td>
					<a class="add" onclick="cloneUser({{user.0}})" id="clone-{{user.0}}" title="Clone {{user.1}}" style="cursor: pointer;"></a>
				</td> 
				<td>
					<a class="delete" onclick="confirmDeleteUser({{user.0}})" title="Delete user {{user.1}}" style="cursor: pointer;"></a>
				</td> 
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="Add user" id="add-user-button">+ Add</span>
		<br /><br />
		
	</div>
	<div id="servers">
		<table class="overview" id="ajax-servers">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Hostname</td>
				<td class="ip-field">IP</td>
				<td class="checkbox-head"><span title="SSH port">Port</span></td></td>
				<td class="checkbox-head">Enable</td>
				<td class="checkbox-head"><span title="Vitrual IP, something like VRRP">Virt</span></td>
				<th class="checkbox-head">HAProxy</th>
				<th class="checkbox-head">Nginx</th>
				<td class="slave-field"><span title="Actions with master config will automatically apply on slave">Slave for</span></td>
				<td class="cred-field">Credentials</td>
				<td>Description</td>
				<td></td>
				<td></td>
			</tr>
		{% set ssh_group = [] %}		
		{% for server in servers %}
		{% do ssh_group.append(server.3) %}
			<tr id="server-{{server.0}}" class="{{ loop.cycle('odd', 'even') }}">
				<td class="padding10 first-collumn">
					{% set id = 'hostname-' + server.0|string() %}
					{{ input(id, value=server.1, size='10') }}
				</td>
				<td>
					<span id="ip-{{server.0}}" style="margin-right: 6px;">{{server.2}}</span>
					<input type="hidden" id="servergroup-{{server.0}}" name="servergroup-{{server.0}}" value="{{ group }}" >					
				</td>
				<td>
					{% set id = 'port-' + server.0|string() %}
					{{ input(id, value=server.10, size='2') }}
				</td>
				{% include 'include/admin_servers.html' %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="Add server" id="add-server-button">+ Add</span>
		<br /><br />		
		<div id="checkSshConnect"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read the description of all parameters <a href="https://haproxy-wi.org/description.py?description=servers" title="Servers description" target="_blank">here</a>
			or watch video <a href="https://haproxy-wi.org/description.py?description=setup" title="How to setup servers, group and SSH credentials" target="_blank">here</a>
		</div>
	</div>

	<div id="ssh">
		<table id="ssh_enable_table" class="overview">
			<tr class="overviewHead" style="width: 50%;">
				<td class="padding10 first-collumn" style="width: 15%;">
					<span title="It's just name alias. This alias will be userd in 'Servers' page for choose credentials">Name</span>
				</td>
				<td class="padding10 first-collumn" style="width: 25%;">
					<span title="If enabled, the key will be used, if turned off - the password. Do not forget to download the keys to all servers or install the sudo without a password">SSH key</span>
				</td>
				<td>
					<span title="Enter SSH user name. If SSH key disabled, enter password for ssh user">Credentials</span>
				</td>
				<td></td>
			</tr>
			{% for ssh in sshs %}
				{% if ssh.5|string() == group %}
					<tr style="width: 50%;" id="ssh-table-{{ssh.0}}" class="{{ loop.cycle('odd', 'even') }}">
						<td class="first-collumn">
							{% set id = 'ssh_name-' + ssh.0|string() %}
							{{ input(id, value=ssh.1, size='10') }}							
						</td>
						<td class="first-collumn" valign="top" style="padding-top: 15px;">
							{% if ssh.2 == 1 %}
								<label for="ssh_enable-{{ssh.0}}">Enable SSH key</label><input type="checkbox" id="ssh_enable-{{ssh.0}}" checked>
							{% else %}
								<label for="ssh_enable-{{ssh.0}}">Enable SSH key</label><input type="checkbox" id="ssh_enable-{{ssh.0}}">
							{% endif %}
						</td>
						<td style="padding-top: 15px;">
							<p>
								{% set id = 'ssh_user-' + ssh.0|string() %}
								{{ input(id, value=ssh.3, size='10') }}		
							</p>
							{% if ssh.2 == 1 %}
								<input type="password" id="ssh_pass-{{ssh.0}}" class="form-control" value="{{ssh.4}}" style="display: none;" autocomplete="new-password">
							{% else %}
								<input type="password" id="ssh_pass-{{ssh.0}}" class="form-control" value="{{ssh.4}}" autocomplete="new-password">
							{% endif %}
							<br>
						</td>
						<td>
							<a class="delete" onclick="confirmDeleteSsh({{ssh.0}})"  style="cursor: pointer;"></a>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
		</table>
		<br /><span class="add-button" title="Add ssh" id="add-ssh-button">+ Add</span>
		<br /><br />
		<table class="overview" id="ssh-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 15%;">Name</td>
				<td class="padding10 first-collumn" style="width: 25%;">SSH key</td>
				<td>Credentials</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{ input('new-ssh-add') }}	
				</td>
				<td>
					<label for="new-ssh_enable">Enable SSH key</label><input type="checkbox" id="new-ssh_enable" checked>
				</td>
				<td style="padding-top: 15px;">
					<p>
						{{ input('ssh_user', value=ssh_user) }}	
					</p>
						{{ input('ssh_pass', type='password', value=ssh_pass, style="display: none;") }}
					<br>
				</td>
				<td>
					<a class="add-admin" id="add-ssh" title="Add new SSH credentials" style="cursor: pointer;"></a>
				</td>
			</tr>
		</table>
		<table id="ssh_key">
			<tr class="overviewHead" style="width: 50%;">
				<td class="padding10 first-collumn" style="width: 25%;">Upload SSH Key</td>
				<td>
					<span title="Private key. Note: The public key must be pre-installed on all servers to which you plan to connect">Key</span>
				</td>
				<td></td>
			</tr>
			<tr style="width: 50%;">
				<td class="first-collumn" valign="top" style="padding-top: 15px;">
					<select id="ssh-key-name">
						<option disabled selected>Choose credentials</option>
						{% for ssh in sshs %}
							{% if ssh.5|string() == group %}
								<option value={{ssh.1}}>{{ssh.1}}</option>	
							{% endif %}
						{% endfor %}
					</select>
				</td>
				<td style="padding-top: 15px;">
					<textarea id="ssh_cert" cols="50" rows="5"></textarea><br /><br />
					<a class="ui-button ui-widget ui-corner-all" id="ssh_key_upload" title="Upload ssh key" onclick="uploadSsh()">Upload</a>		
				</td>
				<td></td>
			</tr>
		</table>
		<div id="ajax-ssh"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read the description of all parameters <a href="https://haproxy-wi.org/description.py?description=creds" title="Servers description" target="_blank">here</a>
			or watch video <a href="https://haproxy-wi.org/description.py?description=setup" title="How to setup servers, group and SSH credentials" target="_blank">here</a>
		</div>
	</div>
	
	<div id="checker">
		<table id="checker_table" class="overview">
			<tr class="overviewHead" style="width: 50%;">
				<td class="padding10 first-collumn" style="width: 25%;">
					<span title="Token that gave you @father_bot">Token</span>
				</td>
				<td>Chanel name</td>
				<td></td>
			</tr>
			{% for telegram in telegrams %}
				{% if telegram.3|string() == group %}
					<tr style="width: 50%;" id="telegram-table-{{telegram.0}}" class="{{ loop.cycle('odd', 'even') }}">
						<td class="first-collumn" style="padding-top: 20px;">
							{% set id = 'telegram-token-' + telegram.0|string() %}
							{{ input(id, value=telegram.1, style="margin-bottom: 23px;") }}
						</td>
						<td>
							{% set id = 'telegram-chanel-' + telegram.0|string() %}
							{{ input(id, value=telegram.2) }}		
						</td>
						<td>
							<a class="delete" onclick="confirmDeleteSsh({{telegram.0}})"  style="cursor: pointer;"></a>
						</td>
					</tr>
				{% endif %}
			{% endfor %}
		</table>
		<br /><span class="add-button" title="Telegram channel" id="add-telegram-button">+ Add</span>
		<br /><br />
		<table class="overview" id="telegram-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 25%;">
					<span title="Token that gave you @father_bot">Token</span>
				</td>
				<td>
					Channel name
				</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{ input('telegram-token-add') }}
					{% for group in ssh_group %}
						{{ input('new-telegram-group-add', value=group.0) }}
					{% endfor %}
				</td>
				<td>
					{{ input('telegram-chanel-add') }}	
				</td>
				<td>
					<a class="add-admin" id="add-telegram" title="Add new Telegram channel" style="cursor: pointer;"></a>
				</td>
			</tr>
		</table>
		<div id="ajax-telegram"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read the description of all parameters <a href="https://haproxy-wi.org/description.py?description=checker" title="Servers description" target="_blank">here</a>
		</div>
	</div>
	<div id="installhaproxy">
		<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'} %}
					{{ select('hapver',  values=values, selected='2.0.14-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>
					<a class="ui-button ui-widget ui-corner-all" id="install" title="Install HAProxy">Install</a>
				</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>
					<a class="ui-button ui-widget ui-corner-all" id="nginx_install" title="Install Nginx">Install</a>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Install Grafana and Prometheus servers</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Current instalation</td>
				<td class="padding10 first-collumn" style="width: 30%;">Available Versions</td>			
				<td class="padding10 first-collumn" style="width: 30%;">Note</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_grafana_ver" class="padding10 first-collumn">
				{% if grafana == "Active:" %}
					Grafana and Prometheus servers have already installed
				{% else %}
					There are no Grafana and Prometheus servers
				{% endif %}
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					HAProxy-WI will try to install the latest Grafana and Prometheus server versions
				</td>
				<td class="padding10 first-collumn">
					Before Install any Exporters install Grafana and Prometheus servers first
				</td>
				<td>
					
				</td>
				<td>
					{% if grafana != "Active:" %}
					<a class="ui-button ui-widget ui-corner-all" id="grafna_install" title="Install Grafana and Prometheus server">Install</a>
					{% endif %}
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Install HAProxy Exporter</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Current instalation</td>
				<td class="padding10 first-collumn" style="width: 30%;">Available Versions</td>			
				<td class="padding10 first-collumn" style="width: 30%;">Server</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_haproxy_exp_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					HAProxy-WI will try to install the latest HAProxy Exporter version
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="haproxy_exp_addserv" id="haproxy_exp_addserv">
						<option disabled selected>Choose server</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td>
				</td>
				<td>
					<a class="ui-button ui-widget ui-corner-all" id="haproxy_exp_install" title="Install HAProxy Exporter">Install</a>
				</td>
			</tr>
		</table>
		<table>
			<caption><h3>Install Nginx Exporter</h3></caption>
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Current instalation</td>
				<td class="padding10 first-collumn" style="width: 30%;">Available Versions</td>			
				<td class="padding10 first-collumn" style="width: 30%;">Server</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td id="cur_nginx_exp_ver" class="padding10 first-collumn">
				</td>
				<td class="padding10 first-collumn" style="width: 20%;">
					HAProxy-WI will try to install the latest Nginx Exporter version
				</td>
				<td class="padding10 first-collumn">
					<select autofocus required name="nginx_exp_addserv" id="nginx_exp_addserv">
						<option disabled selected>Choose server</option>
						{% for select in servers %}
								<option value="{{ select.2 }}">{{ select.1 }}</option>
						{% endfor %}
					</select>
				</td>
				<td>
				</td>
				<td>
					<a class="ui-button ui-widget ui-corner-all" id="nginx_exp_install" title="Install Nginx Exporter">Install</a>
				</td>
			</tr>
		</table>
		<div id="ajax"></div>
	</div>
	
	<div id="backup">
		<table class="overview" id="ajax-backup-table">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Servers</td>
				<td class="padding10">Remote server</td>
				<td class="padding10">Remote folder</td>
				<td class="padding10">Backup type</td>
				<td class="padding10">Period time</td>
				<td class="padding10">Credentials</td>
				<td class="padding10">Description</td>
				<td></td>
				<td></td>
			</tr>
			{% for b in backups %}
				{% for s in servers %}
					{% if b.1 in s.2 %}
						{% include 'include/admin_backup.html' %}
					{% endif %}
				{% endfor %}
			{% endfor %}
		</table>
		<br /><span class="add-button" title="Add a new backup job" id="add-backup-button">+ Add a new backup job</span>
		<br /><br />
		<div id="ajax-backup"></div>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read the description of all parameters <a href="https://haproxy-wi.org/description.py?description=backup" title="Backup description" target="_blank">here</a>
		</div>
	</div>
	
</div>
<div id="group_error" style="display: none;">
	<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>
<div id="user-add-table" style="display: none;">	
	<table class="overview">
		{% include 'include/admin_add_user.html' %}
			<td class="padding20">
				Role
				<span class="need-field">*</span>
			</td>
			<td>
				<select id="new-role" name="new-role">
					<option disabled selected>Choose role</option>
					{% for role in roles %}
						{% if role.1 != "admin" %}
							<option value="{{ role.1 }}">{{ role.1 }}</option>
						{% endif %}
					{% endfor %}
				</select>
			</td>
		</tr>
	</table>
</div>
<div id="server-add-table" style="display: none;">	
	<form id="server-add-form" method="post">
	<table class="overview">
		{% include 'include/admin_add_server.html' %}
		<tr>
			<td class="padding20">
				Credentials
				<span class="need-field">*</span>
			</td>
			<td>
				<select id="credentials" required>
					<option disabled selected value="0">Choose credentials</option>
					{% for ssh in sshs %}
						{% if ssh.5|string() == group %}
							<option value="{{ssh.0}}">{{ssh.1}}</option>
						{% endif %}
					{% endfor %}
				</select>
			</td>
		</tr>
	</table>
	<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
	</form>
</div>
<div id="backup-add-table" title="Add a new backup job " style="display: none;">	
	<table class="overview">
		{% include 'include/add_backup.html' %}
		<tr>
			<td class="padding20">
				Credentials for remote server
				<span class="need-field">*</span>
			</td>
			<td>
				<select id="backup-credentials" required>
					<option disabled selected>Choose credentials</option>
					{% for ssh in sshs %}
						{% if ssh.2 == 1 and ssh.5|string() == group %}
						<option value="{{ssh.0}}">{{ssh.1}}</option>
						{% endif %}
					{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td class="padding20">
				Description
			</td>
			<td>
				{{ input('backup-description', size='30') }}
			</td>
		<tr>
	</table>
</div>
{% 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').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');
			$('#syn_flood').checkboxradio('enable');
			$('#nginx_syn_flood').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 %}