{% import 'languages/'+lang|default('en')+'.html' as lang %}
{% from 'include/input_macros.html' import input, checkbox, copy_to_clipboard %}
{% for agent in agents %}
<div id="agent-{{agent.id}}" class="div-server-hapwi">
    <div class="server-name">
        <span class="overflow" style="width: 192px;">
            <span id="agent-name-{{agent.id}}" style="margin-top: 4px;display: inline-block;">
                <a href="/rmon/agent/{{ agent.id }}" title="{{ lang.words.more|title }} {{ lang.words.info }}">{{agent.name.replace("'","")}}</a>
            </span>
            <span id="agent-desc-{{agent.id}}">{% if agent.description %} ({{agent.description.replace("'", "")}}) {% endif %}</span>
        </span>
    {% if g.user_params['group_id']|string() == agent.group_id|string() or g.user_params['role'] == 1 %}
        <span class="server-action">
            {% if g.user_params['role']|string() <= '3' %}
                <a id="start-{{ agent.id }}" class="start" title="{{lang.words.start|title()}}">
                    <span class="service-start" onclick="confirmAjaxAction('start', '{{agent.id}}')"></span>
                </a>
                <a id="reload-{{ agent.id }}" class="reload" title="{{lang.words.restart|title()}}">
                    <span class="service-reload" onclick="confirmAjaxAction('restart', '{{agent.id}}')"></span>
                </a>
                <a id="stop-{{ agent.id }}" class="stop" title="{{lang.words.stop|title()}}">
                    <span class="service-stop" onclick="confirmAjaxAction('stop', '{{agent.id}}')"></span>
                </a>
            {% endif %}
            {% if g.user_params['role'] <= 2 %}
            <a class="edit" onclick="addAgentDialog('{{agent.id}}', true)"></a>
            <a class="delete" onclick="confirmDeleteAgent('{{agent.id}}')"></a>
            <a class="move" onclick="moveChecksDialog('{{ agent.id }}', '{{ agent.ip }}')" title="{{ lang.smon_page.desc.move_checks }}"></a>
            {% endif %}
        </span>
    {% endif %}
    </div>
    <div class="server-desc">
        <div>
            <b>{{ lang.words.server|title() }}</b>: {{ copy_to_clipboard(value=agent.hostname) }}
            <b>{{ lang.words.server|title() }} IP</b>: {{ copy_to_clipboard(value=agent.ip) }}
        </div>
        <div>
            <b>{{ lang.words.version|title() }}</b>:
            <span id="agent-version-{{ agent.id }}"></span>
            <span id="agent-update-{{ agent.id }}" class="tooltip" style="color: var(--red-color); cursor: help; display: none;" title="Need to be updated">!</span>
        </div>
        <div>
            <b>{{lang.smon_page.desc.total_checks}}</b>:
            <span id="agent-total-checks-{{ agent.id }}"></span>
        </div>
        <div>
            <b>{{lang.words.uptime|title()}}</b>: <time class="timeago" datetime="" id="agent-uptime-{{ agent.id }}" title="{{ lang.words.agent|title() }} {{ lang.words.uptime }}"></time>
            <b>{{ lang.words.enabled|title() }}</b>: {% if agent.enabled %} {{ lang.words.yes|title() }} {% else %} {{ lang.words.no|title() }} {% endif %}
        </div>
        <div>
            <b>{{ lang.words.agent|title() }} ID</b>: {{ agent.id }}
            <b>{{ lang.words.shared|title() }}</b>: {% if agent.shared %} {{ lang.words.yes|title() }} {% else %} {{ lang.words.no|title() }} {% endif %}
        </div>
        <div>
            <b>{{ lang.words.region|title() }}</b>: {% if agent.region_id %} {{ agent.region_id.name.replace("'", "") }} {% endif %}
        </div>
    </div>
</div>
    <script>
        getAgentVersion('{{ agent.ip }}', '{{ agent.id }}');
        getAgentStatus('{{ agent.ip }}', '{{ agent.id }}');
        getAgentTotalChecks('{{ agent.ip }}', '{{ agent.id }}');
        setInterval(getAgentStatus, 30000, '{{agent.ip}}', '{{agent.id}}');
        setInterval(getAgentTotalChecks, 60000, '{{agent.ip}}', '{{agent.id}}');
        getAgentUptime('{{ agent.ip }}', '{{ agent.id }}');
        $( function() {
            $('.copyToClipboard').hover(function () {
                $.getScript("/static/js/fontawesome.min.js");
            });
            $('.copyToClipboard').click(function () {
                let str = $(this).attr('data-copy');
                const el = document.createElement('textarea');
                el.value = str;
                el.setAttribute('readonly', '');
                el.style.position = 'absolute';
                el.style.left = '-9999px';
                document.body.appendChild(el);
                el.select();
                document.execCommand('copy');
                document.body.removeChild(el);
            });
        })
        showOverviewServer('{{ agent.ip }}');
    </script>
{% endfor %}