{% from 'include/input_macros.html' import input, checkbox, copy_to_clipboard %}
{% if not adding %}
<table class="overview overview-overflow" id="ajax-servers">
	<thead>
		<tr class="overviewHead">
			<th class="padding10 first-collumn" id="server-name-th">{{lang.words.name|title()}}</th>
			<th class="ip-field" style="width: 10% " id="server-ip-th">IP</th>
			<th style="width: 5%" class="help_cursor"><span title="SSH port">{{lang.words.port|title()}}</span></th>
			{% if page != "servers.py" %}
			<th style="width: 10%">{{lang.words.group|title()}}</th>
			{% endif %}
			<th class="checkbox-head" style="min-width: 70px;">{{lang.words.enabled|title()}}</th>
			<th style="min-width: 60px; padding-left: 17px;" class="help_cursor">
				<span title="{{lang.words.virtual|title()}} IP, something like VRRP">{{lang.words.virt|title()}}</span>
			</th>
			<th class="checkbox-head" style="min-width: 75px" id="server-haproxy-th">{{lang.words.services|title()}}</th>
			<th style="min-width: 120px;" class="help_cursor" id="server-firewalld-th">
				<span title="If the server has a firewall enabled, enable this option">Firewalld</span>
			</th>
			<th class="checkbox-head help_cursor" style="min-width: 120px;" class="help_cursor" id="server-protected-th">
				<span title="{{lang.phrases.protected_title}}">{{lang.words.protected|title()}}</span>
			</th>
			<th style="width: 10%" class="help_cursor" id="server-slave-th">
				<span  id="slavefor-th" title="{{lang.phrases.slave_for_title}}">{{lang.words.slave_for}}</span>
			</th>
			<th class="cred-field">{{lang.words.creds|title()}}</th>
			<th style="width: 100%">{{lang.words.desc|title()}}</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">
				<span class="serverNone server-status-small" title="{{lang.phrases.server_unknown}}" id="server_status-{{server.0}}"></span>
				{% set id = 'hostname-' + server.0|string() %}
				{{ input(id, value=server.1, size='20') }}
			</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: 15px;">
				{% set id = 'typeip-' + server.0|string() %}
				{% if server.4 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td>
				<span title="{{lang.words.change2|title()}} {{lang.words.active}} {{lang.words.services}}" style="cursor: pointer; margin-left: 15px;" class="div-pic" onclick="openChangeServerServiceDialog('{{server.0}}')"></span>
			</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="{{lang.words.view|title()}} firewall {{lang.words.rules2}} {{lang.words.on}} {{lang.words.server2}} {{server.1}}" class="overflow" style="width: 60px;height: 28px;">{{lang.words.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}}" class="overflow" style="width: 70px;height: 25px;">{{lang.words.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="/app/history/server/{{server.2}}" title="{{lang.words.view|title}} {{lang.words.history}} {{lang.words.for}} {{lang.words.this}} {{lang.words.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="{{lang.words.show|title()}} {{lang.words.server}} {{lang.words.info}}" style="cursor: pointer; color: var(--green-color)"></a>
			</td>
			<td>
				<a class="add" onclick="cloneServer({{server.0}})" id="clone-{{server.0}}" title="{{lang.words.copy|title()}} {{lang.words.settings}} {{server.1}}" style="cursor: pointer;"></a>
			</td>
			<td>
				<a class="delete" onclick="confirmDeleteServer({{server.0}})" title="{{lang.words.delete|title()}} {{lang.words.server}} {{server.1}}" style="cursor: pointer;"></a>
			</td>
		</tr>
		{% endfor %}
{% if not adding %}
	</tbody>
</table>
<br /><span class="add-button" title="{{lang.words.add|title()}} {{lang.words.server}}" id="add-server-button">+ {{lang.words.add|title()}}</span>
<br /><br />
<div id="checkSshConnect"></div>
<div class="add-note addName alert alert-info" style="width: inherit; margin-right: 15px;" id="servers-help-link">
	{{lang.phrases.read_about_parameters}} <a href="https://roxy-wi.org/description/servers" title="{{lang.words.servers|title()}} {{lang.words.desc}}" target="_blank">{{lang.words.here}}</a>, {{lang.phrases.read_howto}} <a href="https://roxy-wi.org/howto/setup" title="How to setup servers, group and SSH credentials" target="_blank">{{lang.words.article}}</a>
</div>
{% endif %}
{% if user_status == 0 or user_plan == 'user' %}
<script>
	$( function() {
		$('select:regex(id, slavefor)').selectmenu();
		$('select:regex(id, slavefor)').selectmenu("disable");
		{% if user_status == 0 %}
			$('#slavefor-th').attr("title", "{{lang.phrases.slave_for_title}}. {{lang.phrases.no_sub}}. {{lang.phrases.pls_sub}}.");
		{% elif user_plan == 'user' %}
			$('#slavefor-th').attr("title", "{{lang.phrases.slave_for_title}}. {{lang.phrases.no_av_feat}}");
		{% endif %}
	});
</script>
{% endif %}
<script>
	{%- for server in servers %}
		setInterval(serverIsUp, 18000, '{{server.2}}', '{{server.0}}');
		serverIsUp('{{server.2}}', '{{server.0}}');
	{%- endfor %}
</script>