{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input %}
<style>
.container {
	margin-right: 0;
}
</style>
<script src="/inc/users.js"></script>
<script src="/inc/fontawesome.min.js"></script>
{% include 'include/del_confirm.html' %}
<div id="tabs">
	<ul>
		<li><a href="#users">Users</a></li>
		<li><a href="#groups">Groups</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="#settings">Settings</a></li>
		<li><a href="#updatehapwi">Update</a></li>
		{% include 'include/login.html' %}
	</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>Group</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
			<script>
				$( function() {
				{% for user in users %}
					$("#role-{{user.0}}" ).selectmenu({
						  width: 100
						});
					$("#usergroup-{{user.0}}" ).selectmenu({
						  width: 100
						});
					
				{% endfor %}
				{% for server in servers %}
					$("#servergroup-{{ server.0}}" ).selectmenu({
						  width: 100
						});
					$("#slavefor-{{server.0}}" ).selectmenu({
						  width: 130
						});
					$("#credentials-{{server.0}}" ).selectmenu({
						  width: 150
						});
				{% endfor %}
				});
			</script>
		{% 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 user.4 == role.1 %}
								<option value="{{ role.1 }}" selected>{{ role.1 }}</option>
							{% else %}
								<option value="{{ role.1 }}">{{ role.1 }}</option>
							{% endif %}
						{% endfor %}
					</select>
				</td>
				<td>
					<select id="usergroup-{{user.0}}" name="usergroup-{{user.0}}">
						<option disabled selected>Choose group</option>
						{% for group in groups %}
							{% if user.5 == group.0|string() %}
								<option value="{{ group.0 }}" selected>{{ group.1 }}</option>
							{% else %}
								<option value="{{ group.0 }}">{{ group.1 }}</option>
							{% 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="groups">
		<table class="overview" id="ajax-group">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">Name</td>
				<td>Description</td>
				<td></td>
			</tr>
		{% for group in groups %}
			<tr id="group-{{ group.0 }}" class="{{ loop.cycle('odd', 'even') }}"> 
			{% if group.1 == "All" %}
				<td class="padding10 first-collumn">{{ group.1 }}</td>
				<td>{{ group.2 }}</td>
				<td></td>
			{% else %}
				<td class="padding10 first-collumn">
					<input type="text" id="name-{{ group.0 }}" value="{{ group.1 }}" class="form-control">
				</td>
				<td style="width: 100%;">
					{% if group.2  != "None" %}
						<input type="text" id="descript-{{ group.0 }}" value="{{ group.2 }}" class="form-control" size="60">
					{% else %}
						<input type="text" id="descript-{{ group.0 }}" value="" class="form-control" size="60">
					{% endif %}
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteGroup({{ group.0 }})" title="Delete group {{group.1}}" style="cursor: pointer;"></a>
				</td>
			{% endif %}
			</tr>
		{% endfor %}
		</table>
		<br /><span class="add-button" title="Add group" id="add-group-button">+ Add</span>
		<br /><br />
		<table class="overview" id="group-add-table" style="display: none;">
			<tr class="overviewHead">
				<td class="padding10 first-collumn">New group name</td>
				<td>Description</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{ input('new-group-add') }}
				</td>
				<td>
					{{ input('new-desc', size="60") }}
				</td>
				<td>
					<a class="add-admin" id="add-group" title="Add new group" style="cursor: pointer;"></a>
				</td>
			</tr>
		</table>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			 How to setup groups you can watch in this 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="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="group-field">Group</td>
				<td class="checkbox-head">Enable</td>
				<td class="checkbox-head"><span title="Vitrual IP, something like VRRP">Virt</span></td>
				<td class="checkbox-head"><span title="Alert if backend change status. Before enable add Telgram chanel at Checker tab">Alert</span></td>
				<td class="checkbox-head"><span title="Enable save and show metrics">Metrics</span></td>
				<td class="checkbox-head"><span title="Keep start HAProxy service if down">Start</span></td>
				<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>						
		{% for server in servers %}
			<tr id="server-{{server.0}}" class="{{ loop.cycle('odd', 'even') }}">
				<td class="padding10 first-collumn">
					<input type="text" id="hostname-{{server.0}}" value="{{server.1}}" class="form-control">
				</td>
				<td>
					<input type="text" id="ip-{{server.0}}" value="{{server.2}}" size="14" class="form-control">
				</td>
				<td>
					<input type="text" id="port-{{server.0}}" value="{{server.10}}" size="1" class="form-control">
				</td>
				<td>
					<select id="servergroup-{{server.0}}" name="servergroup-{{server.0}}">
						<option disabled selected>Choose group</option>
						{% for group in groups %}
							{% if server.3 == group.0|string() %}
								<option value="{{ group.0 }}" selected>{{ group.1 }}</option>
							{% else %}
								<option value="{{ group.0 }}">{{ group.1 }}</option>
							{% endif %}
						{% endfor %}
					</select>
				</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 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 use in 'Servers' page for choose credentials">Name<span>
				</td>
				<td class="padding10 first-collumn" style="width: 25%;">
					<span title="If it is 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>Group</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 %}
				<tr style="width: 50%;" id="ssh-table-{{ssh.0}}" class="{{ loop.cycle('odd', 'even') }}">
					<td class="first-collumn">
						<input type="text" id="ssh_name-{{ssh.0}}" class="form-control" value="{{ssh.1}}" style="margin-bottom: 23px;">	
					</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>
						<select id="sshgroup-{{ssh.0}}" name="sshgroup-{{ssh.0}}">
							{% for group in groups %}
								{% if ssh.5 == group.0 %}
									<option value="{{ group.0 }}" selected>{{ group.1 }}</option>
								{% else %}
									<option value="{{ group.0 }}">{{ group.1 }}</option>
								{% endif %}
							{% endfor %}
						</select>
					</td>
					<td style="padding-top: 15px;">
						<p>
							<input type="text" id="ssh_user-{{ssh.0}}" class="form-control" value="{{ssh.3}}">		
						</p>
						{% if ssh.2 == 1 %}
							<input type="password" id="ssh_pass-{{ssh.0}}" class="form-control" value="{{ssh.4}}" style="display: none;">
						{% else %}
							<input type="password" id="ssh_pass-{{ssh.0}}" class="form-control" value="{{ssh.4}}">
						{% endif %}
						<br>
					</td>
					<td>
						<a class="delete" onclick="confirmDeleteSsh({{ssh.0}})" title="Delete SSH credentials {{ssh.1}}" style="cursor: pointer;"></a>
					</td>
				</tr>
			{% 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>Group</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>
					<select id="new-sshgroup" name="new-sshgroup">
						{% for group in groups %}
							<option value="{{ group.0 }}">{{ group.1 }}</option>
						{% endfor %}
					</select>
				</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 %}
							<option value={{ssh.1}}>{{ssh.1}}</option>	
						{% 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>Channel name</td>
				<td>Group</td>
				<td></td>
				<td></td>
			</tr>
			{% for telegram in telegrams %}
				<tr id="telegram-table-{{telegram.0}}" class="{{ loop.cycle('odd', 'even') }}">
					<td class="first-collumn" style="padding-top: 20px;">
						<input type="text" id="telegram-token-{{telegram.0}}" class="form-control" value="{{telegram.1}}" style="margin-bottom: 23px;">	
					</td>
					<td>
						<input type="text" id="telegram-chanel-{{telegram.0}}" class="form-control" value="{{telegram.2}}">		
					</td>
					<td>
						<select id="telegramgroup-{{telegram.0}}" name="telegramgroup-{{telegram.0}}">
							<option disabled selected>Choose group</option>
							{% for group in groups %}
								{% if telegram.3|string() == group.0|string() %}
									<option value="{{ group.0 }}" selected>{{ group.1 }}</option>
								{% else %}
									<option value="{{ group.0 }}">{{ group.1 }}</option>
								{% endif %}
							{% endfor %}
						</select>
					</td>
					<td>
						<a class="add" onclick="cloneTelegram({{telegram.0}})" id="clone-{{telegram.0}}" title="Clone {{telegram.1}}" style="cursor: pointer;"></a>
					</td> 
					<td>
						<a class="delete" onclick="confirmDeleteTelegram({{telegram.0}})" title="Delete channel {{telegram.2}}" style="cursor: pointer;"></a>
					</td>
				</tr>
			{% endfor %}
		</table>
		<br /><span class="add-button" title="Add 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>Chanel name</td>
				<td>Group</td>
				<td></td>
			</tr>
			<tr>
				<td class="padding10 first-collumn">
					{{ input('telegram-token-add') }}
				</td>
				<td>
					{{ input('telegram-chanel-add') }}	
				</td>
				<td>
					<select id="new-telegram-group-add" name="new-telegram-group-add">
						<option disabled selected value="0">Choose group</option>
						{% for group in groups %}
							<option value="{{ group.0 }}">{{ group.1 }}</option>
						{% endfor %}
					</select>
				</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="settings">
		<table id="settings">
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 10%;">
					Parameter
				</td>
				<td>
					Value
				</td>	
				<td>
					Description 
				</td>
			</tr>
			{% set section = namespace(section='') %}
			{% for set in settings %}
			{% if section.section|string() != set.2|string() %}
				<th colspan="3"><h3>{{ set.2 }} section</h3></th>
			{% endif %}
			{% set section.section = set.2 %}	
			<tr class="{{ loop.cycle('odd', 'even') }}">
				<td class="addName">
					<a href="#{{set.0}}" title="{{set.0}}" style="color: #000;">{{set.0}}</a>
				</td>
				<td class="addOption">
					{% if set.0 == 'ldap_password' %}
						{% if set.1 == 'None' %}
								<input type="password" name="{{set.0}}" id="{{set.0}}" value="" title="" size="25" class="form-control">
							{% else %}
								<input type="password" name="{{set.0}}" id="{{set.0}}" value="{{set.1}}" title="" size="25" class="form-control">
							{% endif %}
					{% else %}
						{% if set.1 == 'None' %}
							<input type="text" name="{{set.0}}" id="{{set.0}}" value="" title="" size="25" class="form-control">
						{% else %}	
							<input type="text" name="{{set.0}}" id="{{set.0}}" value="{{set.1}}" title="" size="25" class="form-control">
						{% endif %}
					{% endif %}
				</td>
				<td class="addOption">
					{{set.3}}
				</td>
			</tr>
			{% endfor %}

		</table>
	</div>
	
	<div id="updatehapwi">
		{% set current_ver = versions.0 %}
		{% set new_ver = versions.1 %}
		{% set current_ver_without_dots = versions.2 %}
		{% set new_ver_without_dots = versions.3 %}
		<table class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 25%;">Currnet version</td>
				<td class="padding10">Last version</td>
				<td></td>
			</tr>
			<tr>
			<td class="padding10 first-collumn">
				<b>{{current_ver}}</b>
			</td>
			<td class="padding10">
				<b>{{new_ver}}</b>
			</td>
			<td>			
				{% if new_ver_without_dots > current_ver_without_dots and new_ver != "Sorry cannot get current version" %}
				<a class="ui-button ui-widget ui-corner-all" id="update_haproxy_wi" title="Update HAProxy">Update</a>
				{% endif %}
			</td>
		</table>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			<b style="font-size: 20px; display: block; padding-bottom: 10px;">Note:</b>
			For update you have to use HAProxy-WI repository. How start use repository read <a href="https://haproxy-wi.org/installation.py" title="HAProxy-WI installation" target="_blank">here</a>	
			<br /><br />
			If server uses proxy to connection Internet add proxy settings in yum.conf
			<br /><br />
			Read more about update in <a href="https://haproxy-wi.org/updates.py" title="Doc" target="_blank">docs</a>
			and <a href="https://haproxy-wi.org/changelog.py" title="Changelog" target="_blank">changelog</a>
		</div>
		<div id="ajax-update"></div>
	</div>
</div>
<div id="user-add-table" style="display: none;">	
	<table class="overview">
		{% include 'include/admin_add_user.html' %}
		<tr>
			<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 %}
						<option value="{{ role.1 }}">{{ role.1 }}</option>
					{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td class="padding20">
				Group
				<span class="need-field">*</span>
			</td>
			<td>
				<select id="new-group" name="new-group">
					<option disabled selected>Choose group</option>
					{% for group in groups %}
						<option value="{{ group.0 }}">{{ group.1 }}</option>
					{% endfor %}
				</select>
			</td>
		</tr>
	</table>
</div>
<div id="server-add-table" title="View certificate " style="display: none;">	
	<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>Choose credentials</option>
					{% for ssh in sshs %}
						<option value="{{ssh.0}}">{{ssh.1}}</option>
					{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td class="padding20">
				Group
				<span class="need-field">*</span>
			</td>
			<td>
				<select id="new-server-group-add" name="new-server-group-add">
					<option disabled selected value="0">Choose group</option>
					{% for group in groups %}
						<option value="{{ group.0 }}">{{ group.1 }}</option>
					{% endfor %}
				</select>
			</td>
		</tr>
		
	</table>
</div>	
{% include 'include/change_pass_form.html' %}
<style>
.ui-selectmenu-button.ui-button {
    width: 10em;
}
.first-collumn {
    width: 10%;
}
</style>
{% endblock %}