{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, select %}
<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" title="Admin area: Manage users - HAProxy-WI">Users</a></li>
		<li><a href="#groups" title="Admin area: Manage groups - HAProxy-WI">Groups</a></li>
		<li><a href="#servers" title="Admin area: Manage servers - HAProxy-WI">Servers</a></li>
		<li><a href="#ssh" title="Admin area: Manage SSH credentials - HAProxy-WI">SSH credentials</a></li>
		<li><a href="#checker" title="Admin area: 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="#services" title="Admin area: Manage HAProxy-WI services - HAProxy-WI">Services</a></li>
		<li><a href="#updatehapwi" title="Admin area: Update HAProxy-WI - HAProxy-WI">Update</a></li>
		<li><a href="#backup" title="Admin area: Backup configs - HAProxy-WI">Backup</a></li>
		<li><a href="#installmon" title="Servers: Monitoring service installation - HAProxy-WI">Monitoring installation</a></li>
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>
	<div id="users">
		<table class="overview" id="ajax-users">
			<thead>
				<tr class="overviewHead">
				<th class="padding10 first-collumn">Login name</th>
				<th style="width: 10%">Password</th>
				<th style="width: 10%">Active</th>
				<th style="width: 20%">Email</th>
				<th style="width: 10%">Role</th>
				<th style="width: 100%">Group</th>
				<th></th>
				<th></th>
			</tr>
			</thead>
			<tbody>
		{% 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>
					<span title="Change user groups" style="cursor: pointer; margin-left: 15px;" class="div-pic" onclick="openChangeUserGroupDialog('{{user.0}}')">
				</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 %}
		<tbody>
		</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">
			<thead>
			<tr class="overviewHead">
				<th class="padding10 first-collumn">Name</th>
				<th style="width: 100%;">Description</th>
				<th></th>
			</tr>
			<tbody>
		{% 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">
					{% set id = 'name-' + group.0|string() %}
					{{ input(id, value=group.1) }}
				</td>
				<td>
					{% set id = 'descript-' + group.0|string() %}					
					{% if group.2  != "None" %}
						{{ input(id, value=group.2, size='60') }}
					{% else %}
						{{ input(id, value='', 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 %}
			</tbody>
		</table>
		<br /><span class="add-button" title="Add group" id="add-group-button">+ Add</span>
		<br /><br />
		<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">
			<thead>
			<tr class="overviewHead">
				<th class="padding10 first-collumn">Hostname</th>
				<th class="ip-field" style="width: 5%">IP</th>
				<th class="checkbox-head" style="width: 5%"><span title="SSH port">Port</span></th>
				<th class="group-field" style="width: 10%">Group</th>
				<th class="checkbox-head" style="width: 5%">Enabled</th>
				<th class="checkbox-head" style="width: 5%">
					<span title="Virtual IP, something like VRRP">Virt</span>
				</th>
				<th class="checkbox-head" style="width: 5%">HAProxy</th>
				<th class="checkbox-head" style="width: 5%">Nginx</th>
				<th class="slave-field" style="width: 10%">
					<span title="Actions with the master config will automatically apply on the slave">Slave for</span>
				</th>
				<th class="cred-field" style="width: 15%">Credentials</th>
				<th style="width: 100%">Description</th>
				<th></th>
				<th></th>
			</tr>	
			</thead>
			<tbody>
		{% for server in servers %}
			<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>
				</td>
				<td>
					{% set id = 'port-' + server.0|string() %}
					{{ input(id, value=server.10, size='2') }}
				</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 %}
			</tbody>
		</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">
		{% include 'include/admin_ssh.html' %}
	</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 style="width: 25%;">Channel name</td>
				<td style="width: 100%;">Group</td>
				<td></td>
				<td></td>
			</tr>
			{% for telegram in telegrams %}
				<tr id="telegram-table-{{telegram.0}}" class="{{ loop.cycle('odd', 'even') }}">
					<td class="padding10 first-collumn">
						{% set id = 'telegram-token-' + telegram.0|string() %}
						{{ input(id, value=telegram.1, size='30') }}
					</td>
					<td>
						{% set id = 'telegram-chanel-' + telegram.0|string() %}
						{{ input(id, 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.2}}" 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 />
		<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">
		{% include 'include/admin_settings.html' %}
	</div>
	
	<div id="services">
		<table id="services_table" class="overview">
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 25%;">
					Service
				</td>
				<td class="padding10 first-collumn" style="width: 35%;">
					Actions
				</td>
				<td>Description</td>
			</tr>
			{% for s in services %}
				<tr class="{{ loop.cycle('odd', 'even') }}" id="{{s.0}}">
					<td class="padding10 first-collumn">
						{% if s.1.0 == 'active' %}
							<span title="{{s.0}} is started"><span class="serverUp server-status"></span></span>
						{% else %}
							{% if s.1.0 == 'inactive' or s.1.0 == 'failed' %}
							<span title="{{s.0}} is stoped"><span class="serverDown server-status"></span></span>
							{% else %}
							<span title="{{s.0}} is not installed"><span class="serverNone server-status"></span></span>
							{% endif %}
						{% endif %}
						{{s.0}}
					</td>
					<td class="padding10 first-collumn">
						<a id="start-{{ s.0 }}" class="start" title="Start and enable {{s.0}} service">
							<span class="service-start" onclick="confirmAjaxServiceAction('start', '{{s.0}}')"></span>
						</a>
						<a id="restart-{{ s.2 }}" class="restart" title="Restart {{s.0}} service">
						<span class="service-reload service-restart" onclick="confirmAjaxServiceAction('restart', '{{s.0}}')"></span>
					</a>
						<a id="stop-{{ s.0 }}" class="stop" title="Stop and disable {{s.0}} service">
							<span class="service-stop" onclick="confirmAjaxServiceAction('stop', '{{s.0}}')"></span>
						</a>
					</td>
					<td>
						{{ s.2 }}
					</td>
				</tr>
			{% endfor %}
		</table>
		<div class="add-note addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read about services <a href="https://haproxy-wi.org/services.py" title="HAProxy-WI services" target="_blank">here</a>
		</div>
	</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 id="backup">
		{% include 'include/admin_backup.html' %}
	</div>

	<div id="installmon">
		{% include 'include/mon_installation.html' %}
	</div>
</div>
{% include 'include/admins_dialogs.html' %}
{% include 'include/change_pass_form.html' %}
<div id="change-user-groups-dialog" style="display: none;">
	<div id="change-user-groups-form"></div>
</div>
<style>
	.ui-selectmenu-button.ui-button {
		width: 10em;
	}
	.first-collumn {
		width: 10%;
	}
</style>
<script>
	$( function() {
		{% for user in users %}
			$("#role-{{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 %}
		{% for ssh in sshs %}
			if (window.matchMedia('(max-width: 1280px)').matches) {
				$("#sshgroup-{{ ssh.0}}" ).selectmenu({
					width: 100
				});
			}
		{% endfor %}
		{% for server in backups %}
			$("#backup-time-{{ server.0}}" ).selectmenu({
				width: 100
			});
			$("#backup-type-{{server.0}}" ).selectmenu({
				width: 130
			});
			$("#backup-credentials-{{server.0}}" ).selectmenu({
				width: 150
			});
		{% endfor %}
	});
</script>
{% endblock %}