{% from 'include/input_macros.html' import input, checkbox, copy_to_clipboard %}
{% if not adding %}
<script>
$(document).ready(function() {
    $('#ajax-servers').on('page.dt')
        .DataTable({
            dom: 'Blfrtip',
            colReorder: true,
            "pageLength": 25,
            stateSave: true,
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "columnDefs": [
                {
                    "searchable": false,
                    "orderable": false
                }
            ],
            "stripeClasses": [ 'odd', 'even' ]
        });
});
</script>
<table class="overview overview-overflow" id="ajax-servers">
	<thead>
		<tr class="overviewHead">
            <th class="padding10" style="width: 0;">Id</th>
			<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 g.user_params['role'] <= 1 %}
			<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: 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="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>
                {{ server.0 }}
            </td>
			<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.7, type='number', style='width: 50px;') }}
			</td>
			{% if g.user_params['role'] <= 1 %}
			<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>
			{% endif %}
			<td class="checkbox">
				{% set id = 'server_enabled-' + server.0|string() %}
				{% if server.4 == 1 %}
					{{ checkbox(id, checked='checked') }}
				{% else %}
					{{ checkbox(id) }}
				{% endif %}
			</td>
			<td class="checkbox" style="padding-left: 0">
				<div class="controlgroup">
					<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>
				<div class="controlgroup">
					<select id="credentials-{{server.0}}">
						<option disabled selected>------</option>
						{% for ssh in sshs %}
							{% if ssh.id == server.5 %}
								<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.8 is not none %}
					{{ input(id, value=server.8.replace("'", ""), size='20') }}
				{% else %}
					{{ input(id, size='20') }}
				{% endif %}
			</td>
			<td>
				<a href="/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(--color-blue)"></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://rmon.io/description/servers" title="{{lang.words.servers|title()}} {{lang.words.desc}}" target="_blank">{{lang.words.here}}</a>, {{lang.phrases.read_howto}} <a href="https://rmon.io/howto/setup" title="How to setup servers, group and SSH credentials" target="_blank">{{lang.words.article}}</a>
</div>
{% endif %}
<script>
	{%- for server in servers %}
        setInterval(serverIsUp, 18000, '{{server.0}}');
		serverIsUp('{{server.0}}');
	{%- endfor %}
</script>