{% extends "base.html" %}
{% block title %}{{ lang.words.overview|title() }} {{ lang.menu_links.monitoring.smon.agent }}{% endblock %}
{% block h2 %}{{ lang.words.overview|title() }} {{ lang.menu_links.monitoring.smon.agent }}{% endblock %}
{% block content %}
{% from 'include/input_macros.html' import input, select, checking_types %}
<script src="{{ url_for('static', filename='js/overview.js') }}"></script>
<link href="{{ url_for('static', filename='css/chart.min.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/metrics.js') }}"></script>
<script src="{{ url_for('static', filename='js/chart.min-4.3.0.js') }}"></script>
<script src="{{ url_for('static', filename='js/rmon/smon.js') }}"></script>
<script src="{{ url_for('static', filename='js/rmon/agent.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.timeago.js') }}" type="text/javascript"></script>
<link href="{{ url_for('static', filename='css/servers.css') }}" rel="stylesheet"/>
<link href="{{ url_for('static', filename='css/smon.css') }}" rel="stylesheet"/>
<link href="{{ url_for('static', filename='css/ha.css') }}" rel="stylesheet">
<div class="up-pannel" style="padding-top: 10px;">
    {% for agent in agents %}
    <div id="agent-{{agent.id}}" class="div-server-hapwi animated-background"></div>
    <div class="server-info" style="padding-top: 7px;">
        <div class="server-name">
            {{lang.words.agent|title()}} {{lang.words.monitoring}}
            <span class="update-icon">
                <a onclick="showOverviewServer('{{agent.ip}}')" title="{{lang.words.refresh|title()}}">
                    <span class="service-reload"></span>
                </a>
            </span>
        </div>
        <div class="top-info" style="width: 770px;">
            <div id="cpu_div" style="height: 120px;width: 50%;float: left; margin:0; padding:0;">
                <canvas id="cpu" role="img"></canvas>
            </div>
            <div id="ram_div" style="height: 120px;width: 50%;float: right;margin:0; padding:0;">
                <canvas id="ram" role="img"></canvas>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<div id="add-agent-page" style="display: none;">
    <table class="overview" id="add-agent-page-overview"
           title="{{lang.words.create|title()}} {{lang.words.w_a}} {{lang.words.new2}} {{lang.words.agent}}"
           data-edit="{{lang.words.edit|title()}} {{lang.words.agent}}">
        {% include 'include/tr_validate_tips.html' %}
        <tr>
            <td class="padding20">
                {{lang.words.server|title()}}
                <span class="need-field">*</span>
            </td>
            <td>
                <select name="new-agent-server-id" id="new-agent-server-id">
                    <option value="------" disabled selected>------</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="padding20" style="width: 50%">
                {{lang.words.port|title()}}
                <span class="need-field">*</span>
            </td>
            <td>
                {{ input('new-agent-port', autofocus='autofocus', value='5101') }}
            </td>
        </tr>
        <tr>
            <td class="padding20" style="width: 50%">
                {{lang.words.name|title()}}
                <span class="need-field">*</span>
            </td>
            <td>
                {{ input('new-agent-name', autofocus='autofocus') }}
            </td>
        </tr>
        <tr>
            <td class="padding20">{{lang.words.enable|title()}}</td>
            <td>
                {{ checkbox('new-agent-enabled', checked='checked') }}
            </td>
        </tr>
        <tr>
            <td class="padding20">{{lang.words.shared|title()}}</td>
            <td>
                {{ checkbox('new-agent-shared') }}
            </td>
        </tr>
        <tr>
            <td class="padding20" style="width: 50%">
                {{lang.words.desc|title()}}
            </td>
            <td>
                {{ input('new-agent-desc', autofocus='autofocus') }}
            </td>
        </tr>
    </table>
</div>
    {% include 'include/smon/checks_for_overview.html' %}
<div id="dialog-confirm" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:3px 12px 20px 0;"></span>{{lang.phrases.are_you_sure}}</p>
</div>
    {% include 'include/smon/dialogs.html' %}
<script>
    {% for agent in agents %}
        getAgent('{{agent.id}}');
    {% endfor %}
</script>
    {% include 'include/smon/add_form.html' %}
{% endblock %}