{% from 'include/input_macros.html' import input, checkbox, copy_to_clipboard %}
{% if user_status == 0 or user_plan == 'user' %}
{% endif %}
{% if not adding %}
<table class="overview" id="ajax-servers">
	<thead>
		<tr class="overviewHead">
			<th class="padding10 first-collumn">Name</th>
			<th class="ip-field" style="width: 10%">IP</th>
			<th class="checkbox-head" style="width: 5%" class="help_cursor"><span title="SSH port">Port</span></th>
			{% if page != "servers.py" %}
			<th style="width: 10%">Group</th>
			{% endif %}
			<th class="checkbox-head" style="min-width: 70px;">Enabled</th>
			<th style="min-width: 50px; padding-left: 5px;" class="help_cursor">
				<span title="Virtual IP, something like VRRP">Virt</span>
			</th>
			<th class="checkbox-head" style="min-width: 75px">HAProxy</th>
			<th class="checkbox-head" style="min-width: 65px;">Nginx</th>
			<th class="checkbox-head" style="min-width: 65px;">Apache</th>
			<th style="min-width: 100px;" class="help_cursor">
				<span title="If the server has a firewall enabled, enable this option">Firewalld</span>
			</th>
			<th class="checkbox-head" style="min-width: 80px;" class="help_cursor">
				<span title="If protection is enabled, then the server is inaccessible for editing by everyone except the admin role">Protected</span>
			</th>
			<th style="width: 10%" class="help_cursor">
				<span  id="slavefor-th" title="Actions with the master config will automatically apply on the slave">Slave for</span>
			</th>
			<th class="cred-field">Credentials</th>
			<th style="width: 100%">Description</th>
			<th style="min-width: 17px;"></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
{% endif %}
		{% for server in servers %}
		<tr id="server-{{server.0}}" class="{{ loop.cycle('odd', 'even') }} {% if adding %}newserver{% endif %}">
			<td class="padding10 first-collumn">
				{% set id = 'hostname-' + server.0|string() %}
				{{ input(id, value=server.1, size='15') }}
			</td>
			<td>
				{% set id = 'ip-' + server.0|string() %}
				{{ copy_to_clipboard(id=id, value=server.2, style='margin-right: 6px;') }}
			</td>
			<td>
				{% set id = 'port-' + server.0|string() %}
				{{ input(id, value=server.10, type='number', style='width: 50px;') }}
			</td>
			{% if page != "servers.py" %}
			<td>
				<select id="servergroup-{{server.0}}" name="servergroup-{{server.0}}">
					<option disabled selected>------</option>
					{% for group in groups %}
					{% if server.3 == group.group_id|string() %}
					<option value="{{ group.group_id }}" selected>{{ group.name }}</option>
					{% else %}
					<option value="{{ group.group_id }}">{{ group.name }}</option>
					{% endif %}
					{% endfor %}
				</select>
			</td>
			{% else %}
			<input type="hidden" id="servergroup-{{server.0}}" name="servergroup-{{server.0}}" value="{{ group }}" />
			{% endif %}
			<td class="checkbox">
				{% set id = 'enable-' + server.0|string() %}
				{% if server.5 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox" style="padding-left: 0px;">
				{% set id = 'typeip-' + server.0|string() %}
				{% if server.4 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox">
				{% set id = 'haproxy-' + server.0|string() %}
				{% if server.15 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox" style="padding-left: 5px;">
				{% set id = 'nginx-' + server.0|string() %}
				{% if server.14 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox" style="padding-left: 5px;">
				{% set id = 'apache-' + server.0|string() %}
				{% if server.24 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox" style="padding-left: 0">
				<div class="controlgroup">
					{% set id = 'firewall-' + server.0|string() %}
					{% if server.18 == 1 %}
					{{ checkbox(id, checked='checked') }}
					{% else %}
					{{ checkbox(id) }}
					{% endif %}
					<button onclick="viewFirewallRules('{{server.2}}')" title="View firewall rules on server {{server.1}}">view</button>
				</div>
			</td>
			<td class="checkbox" style="padding-left: 15px;">
				{% set id = 'protected-' + server.0|string() %}
				{% if server.20 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td>
				<select id="slavefor-{{server.0}}">
					<option value="0" selected>Not slave</option>
					{% for master in masters %}
						{% if master.0 == server.6  %}
							<option value="{{master.0}}" selected>{{master.1}}</option>
						{% else %}
							{% if master.0 != server.0 %}
							<option value="{{master.0}}">{{master.1}}</option>
							{% endif %}
						{% endif %}
					{% endfor %}
				</select>
			</td>
			<td>
				<div class="controlgroup">
					<select id="credentials-{{server.0}}">
						<option disabled selected>------</option>
						{% for ssh in sshs %}
							{% if ssh.id == server.7 %}
								<option value="{{ssh.id}}" selected>{{ssh.name}}</option>
							{% else %}
								<option value="{{ssh.id}}">{{ssh.name}}</option>
							{% endif %}
						{% endfor %}
					</select>
					<button onclick="checkSshConnect('{{server.2}}')" title="Check SSH connect to the server {{server.1}}">check</button>
				</div>
			</td>
			<td>
				{% set id = 'desc-' + server.0|string() %}
				{% if server.11 is not none %}
					{{ input(id, value=server.11, size='20') }}
				{% else %}
					{{ input(id, size='20') }}
				{% endif %}
			</td>
			<td>
				<a href="history.py?service=server&serv={{server.2}}" title="View history for this server" class="history"></a>
			</td>
			<td style="min-width: 17px;">
				<a class="info" onclick="showServerInfo('{{server.0}}', '{{server.2}}')" id="server_info_link-{{server.0}}" title="Show server info" style="cursor: pointer; color: var(--green-color)"></a>
			</td>
			<td>
				<a class="add" onclick="cloneServer({{server.0}})" id="clone-{{server.0}}" title="Clone {{server.1}}" style="cursor: pointer;"></a>
			</td>
			<td>
				<a class="delete" onclick="confirmDeleteServer({{server.0}})" title="Delete server {{server.1}}" style="cursor: pointer;"></a>
			</td>
		</tr>
		<tr id="server_info-{{server.0}}" style="display: none"></tr>
		{% endfor %}
{% if not adding %}
	</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 alert-info" style="width: inherit; margin-right: 15px;">
	You can read the description of all parameters <a href="https://roxy-wi.org/description.py?description=servers" title="Servers description" target="_blank">here</a>
	or read HowTo in 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>
{% endif %}
<script>
	$( function() {
		$('select:regex(id, slavefor)').selectmenu();
		$('select:regex(id, slavefor)').selectmenu("disable");
		{% if user_status == 0 %}
			$('#slavefor-th').attr("title", "Actions with the master config will automatically apply on the slave. You are not subscribed. Please subscribe to have access to this feature");
		{% elif user_plan == 'user' %}
			$('#slavefor-th').attr("title", "Actions with the master config will automatically apply on the slave. This feature is not available for your plan");
		{% endif %}
	});
</script>