{% extends "base.html" %}
{% block content %}
{% from 'include/input_macros.html' import input, select, copy_to_clipboard, checkbox %}
<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 - Roxy-WI">Users</a></li>
		<li><a href="#groups" title="Admin area: Manage groups - Roxy-WI">Groups</a></li>
		<li><a href="#servers" title="Admin area: Manage servers - Roxy-WI">Servers</a></li>
		<li><a href="#ssh" title="Admin area: Manage SSH credentials - Roxy-WI">SSH credentials</a></li>
		<li><a href="#checker" title="Admin area: Manage checker - Roxy-WI">Checker</a></li>
		<li><a href="#openvpn" title="Admin area: OpenVPN - Roxy-WI">OpenVPN</a></li>
		<li><a href="#settings" title="Admin area: Manage Roxy-WI settings - Roxy-WI">Settings</a></li>
		<li><a href="#services" title="Admin area: Manage Roxy-WI services - Roxy-WI">Services</a></li>
		<li><a href="#updatehapwi" title="Admin area: Update Roxy-WI - Roxy-WI">Update</a></li>
		<li><a href="#backup" title="Admin area: Backup configs - Roxy-WI">Backup</a></li>
		<li><a href="#installmon" title="Servers: Monitoring service installation - Roxy-WI">Monitoring installation</a></li>
		{% include 'include/login.html' %}
	</ul>
	<ul id='browse_histroy'></ul>

	<div id="users">
		{% include 'include/admin_users.html' %}
	</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.group_id }}" class="{{ loop.cycle('odd', 'even') }}">
			{% if group.name == "All" %}
				<td class="padding10 first-collumn">{{ group.name }}</td>
				<td>{{ group.description }}</td>
				<td></td>
			{% else %}
				<td class="padding10 first-collumn">
					{% set id = 'name-' + group.group_id|string() %}
					{{ input(id, value=group.name) }}
				</td>
				<td>
					{% set id = 'descript-' + group.group_id|string() %}
					{% if group.description is not none %}
						{{ input(id, value=group.description, size='60') }}
					{% else %}
						{{ input(id, value='', size='60') }}
					{% endif %}
				</td>
				<td>
					<a class="delete" onclick="confirmDeleteGroup({{ group.group_id }})" title="Delete group {{group.name}}" 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 alert addName alert-info" style="width: inherit; margin-right: 15px;">
			How to setup groups you can read in this <a href="https://roxy-wi.org/howto.py?howto=server_groups" title="How to use groups and roles" target="_blank">article</a>
			and this <a href="https://roxy-wi.org/howto.py?howto=setup" title="How to setup servers, group and SSH credentials" target="_blank">article</a>
		</div>
	</div>
	<div id="servers">
		{% include 'include/admin_servers.html' %}
	</div>

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

	<div id="openvpn"></div>
	
	<div id="settings">
		{% include 'include/admin_settings.html' %}
	</div>
	
	<div id="services">
		<table id="services_table" class="overview">
			<thead>
				<tr class="overviewHead">
					<td class="padding10 first-collumn" style="width: 25%;">
						Service
					</td>
					<td class="padding10 first-collumn">
						Actions
					</td>
					<td class="padding10">Version</td>
					<td style="width: 100%">Description</td>
					<td><span onclick="loadServices()" class="refresh" title="Reload services"></span></td>
				</tr>
			</thead>
			<tbody id="ajax-services-body"></tbody>
		</table>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			You can read about services <a href="https://roxy-wi.org/services.py" title="Roxy-WI services" target="_blank">here</a>
		</div>
	</div>
	
	<div id="updatehapwi">
		<table class="overview">
			<thead>
			<tr class="overviewHead">
				<td class="padding10 first-collumn" style="width: 25%;">Service</td>
				<td class="padding10">Current version</td>
				<td class="padding10">Latest version</td>
				<td class="padding10"></td>
				<td style="width: 100%">
					Description
				</td>
				<td><span onclick="loadupdatehapwi()" class="refresh" title="Reload Update"></span></td>
			</tr>
			</thead>
			<tbody id="ajax-updatehapwi-body"></tbody>
		</table>
		<div class="add-note alert addName alert-info" style="width: inherit; margin-right: 15px;">
			<b style="font-size: 20px; display: block; padding-bottom: 10px;">Note:</b>
			For updating you have to use Roxy-WI RPM or DEB. Read <a href="https://roxy-wi.org/installation.py" title="Roxy-WI installation" target="_blank">here</a>
			how to start using repository
			<br /><br />
			If the Roxy-WI server uses a proxy to connect to the Internet, add the proxy settings to yum.conf
			<br /><br />
			Read more about updating in <a href="https://roxy-wi.org/updates.py" title="Doc" target="_blank">docs</a>
			and <a href="https://roxy-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' %}
<div id="change-user-groups-dialog" style="display: none;">
	<div id="change-user-groups-form"></div>
</div>
<script>
	$( function() {
		{% for user in users %}
			$("#role-{{user.role_id}}" ).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.id}}" ).selectmenu({
				width: 100
			});
			$("#backup-type-{{server.id}}" ).selectmenu({
				width: 130
			});
			$("#backup-credentials-{{server.id}}" ).selectmenu({
				width: 150
			});
		{% endfor %}
	});
</script>
<link href="/inc/servers.css" rel="stylesheet"/>
{% endblock %}