{% extends "mailadmin/base.html" %}
{% load noris_extra %}
{% load i18n %}
{% load plugindescr %}
{% block extra_header %}
    <script type="text/javascript" src="/kundebunt-static/js/stats/server/navigate.js"></script>
{% endblock %}
{% block body_attr %}class="full_page" onload="nav_init({{begin}}, {{end}});"{% endblock %}

{% block javascript %}
{% include "popkern/yui_autocomplete.html" %}
<script type="text/javascript">
    
function set_visibility(el, flag)
{
    if (flag)
        el.style.display = 'block';
    else
        el.style.display = 'none';
}

function set_field_visibility(el, flag) {
    set_visibility(el.parentNode.parentNode, flag)
}

function handle_delta_change() {
    var delta_index = delta_el.selectedIndex;
    set_field_visibility(stop_day_el, delta_index=={{EXPLICIT_END}});
    set_field_visibility(stop_hour_el, delta_index=={{EXPLICIT_END}});
}

function handle_start_quick_change() {
    set_field_visibility(start_day_el, start_quick_el.selectedIndex=={{OTHER_START}});
}

function init_delta() {
    delta_el = document.getElementById("id_delta");
    stop_day_el = document.getElementById("id_stop_day_day");
    stop_hour_el = document.getElementById("id_stop_hour");
    start_day_el = document.getElementById("id_start_day_day");
    start_quick_el = document.getElementById("id_start_quick");
    
    delta_el.onchange = handle_delta_change;
    handle_delta_change();
    start_quick_el.onchange = handle_start_quick_change;
    handle_start_quick_change();
    document.getElementById("id_hostname").focus();
}
</script>
{% endblock %}


{% block content %}

<h1>{% trans "Server-Statistiken" %}</h1>

<form method="post" action="{{request.path}}" class="inline_fset">

<fieldset class="float"><legend>{% trans "Art der Daten" %}</legend>
    {{form.hostname.as_div}}
    {{form.plugin.as_div}}
</fieldset>

<fieldset class="vertical"><legend>{% trans "Zeitraum" %}</legend>
    {{form.start_quick.as_div}}
    {{form.start_day.as_div}}
    {{form.start_hour.as_div}}
    {{form.delta.as_div}}
    {{form.stop_day.as_div}}
    {{form.stop_hour.as_div}}
    <script type="text/javascript">init_delta();</script>
</fieldset>

<div class="submitrow" style="margin-top:2em; margin-bottom:4em">
        <input type="submit"
               id="{{id_prefix}}id_submit" value="{% trans "Anzeigen" %}" />
</div>

</form>

{% if with_table %}
    {% if rows %}
        <table class="searchresults" style="background-color:#eeeeee">
            <tr>
                {% for host in hostnames %}
                    <th style="text-align:center">{{host}}</th>
                {% endfor %}
            </tr>
            {% for row in rows %}
                <tr>
                    {% for plugin in row %}
                        <td style="vertical-align:top">
                            {% for graph_id,url in plugin %}
                                <div class="graph_canvas">
                                    <div class="graph_float">
                                        <img id="{{graph_id}}" class="graph_image" src="{{url}}{{url_suffix}}" alt="" title="{% plugindescr url %}"/>
                                        <div class="controls zoom">
                                            <div title="Earlier"
                                            onclick="nav_move_earlier ('{{graph_id}}');">&#x2190;</div>
                                            <div title="Zoom out"
                                            onclick="nav_zoom_out ('{{graph_id}}');">-</div>
                                            <div title="Zoom in"
                                            onclick="nav_zoom_in ('{{graph_id}}');">+</div>
                                            <div title="Later"
                                            onclick="nav_move_later ('{{graph_id}}');">&#x2192;</div>
                                        </div>
                                        <div class="controls preset">
                                            <div title="Show current hour"
                                            onclick="nav_time_reset ('{{graph_id}}', 3600);">H</div>
                                            <div title="Show current day"
                                            onclick="nav_time_reset ('{{graph_id}}', 86400);">D</div>
                                            <div title="Show current week"
                                            onclick="nav_time_reset ('{{graph_id}}', 7 * 86400);">W</div>
                                            <div title="Show current month"
                                            onclick="nav_time_reset ('{{graph_id}}', 31 * 86400);">M</div>
                                            <div title="Show current year"
                                            onclick="nav_time_reset ('{{graph_id}}', 366 * 86400);">Y</div>
                                            <div title="Set all images to this timespan"
                                            onclick="nav_set_reference ('{{graph_id}}');">!</div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </table>
    {% endif %}
{% else %}
    {% for row in rows %}
        {% for plugin in row %}
            {% for graph_id,url in plugin %}
                                <div class="graph_canvas">
                                    <div class="graph_float">
                                        <img id="{{graph_id}}" class="graph_image" src="{{url}}{{url_suffix}}" alt="" title="{% plugindescr url %}"/>
                                        <div class="controls zoom">
                                            <div title="Earlier"
                                            onclick="nav_move_earlier ('{{graph_id}}');">&#x2190;</div>
                                            <div title="Zoom out"
                                            onclick="nav_zoom_out ('{{graph_id}}');">-</div>
                                            <div title="Zoom in"
                                            onclick="nav_zoom_in ('{{graph_id}}');">+</div>
                                            <div title="Later"
                                            onclick="nav_move_later ('{{graph_id}}');">&#x2192;</div>
                                        </div>
                                        <div class="controls preset">
                                            <div title="Show current hour"
                                            onclick="nav_time_reset ('{{graph_id}}', 3600);">H</div>
                                            <div title="Show current day"
                                            onclick="nav_time_reset ('{{graph_id}}', 86400);">D</div>
                                            <div title="Show current week"
                                            onclick="nav_time_reset ('{{graph_id}}', 7 * 86400);">W</div>
                                            <div title="Show current month"
                                            onclick="nav_time_reset ('{{graph_id}}', 31 * 86400);">M</div>
                                            <div title="Show current year"
                                            onclick="nav_time_reset ('{{graph_id}}', 366 * 86400);">Y</div>
                                            <div title="Set all images to this timespan"
                                            onclick="nav_set_reference ('{{graph_id}}');">!</div>
                                        </div>
                                    </div>
                                </div>
            {% endfor %}
        {% endfor %}
    {% endfor %}
{% endif %}


{% endblock %}