{% extends "base_status.html" %}

{% load i18n %}

{% block title %}{% trans "Status Overview" %}{% endblock %}
{% block smallheader %}{% endblock %}
{% block largeheader %}{% trans "Service Overview" %}{% endblock %}
{% block nav1 %}{{ block.super }}{% endblock %}
{% block nav2 %}<a href="{% url 'status.views.services' %}">{% trans "Services" %}</a>{% endblock %}
{% load adagiostags %}

{% block sidebar_outer %}
{% endblock %}

{% block content %}
    {% include "snippets/status_servicelist_snippet_js.html" %}
{% endblock %}



{% block footer %}
    {{ block.super }}

    <script>
        function timedRefresh(timeoutPeriod) {
            var interval = setInterval(refreshPage, timeoutPeriod);
        }

        function refreshPage() {
            var checked_boxes = $( ".selectable :checked" );
            var shown_modals = $("div .modal.in");
            if (checked_boxes.length + shown_modals.length == 0) {
                console.log("Refreshing page...");
                location.reload(true);
            }
            else {
                console.log("{% trans "Canceled auto-refresh of page because input boxes or modals have been edited" %}");
                clearInterval(1);
            }
        }

        $(document).ready(function() {
            $("div#search_box").hide();
            timedRefresh(30000);
            var statustable_body = $("table.statustable tbody");
	    var aaData = [];
	    var last_host = "";
	    for (var i = 0;services.length > i; i++) {
		var service = services[i];
		aaData.push( [
			'<input class="chkbox ' + service.tags + '"  type="checkbox" name="service" value="[[ service.host_name }}/[[ service.description }}" data-host_name="[[ service.host_name }}" data-object_type="service" data-service_description="[[ service.description }}">' +
			'<input type="hidden" class="input_hostname" name="host_name" value="[[ service.host_name }}">' +
			'<input type="hidden" class="input_service_description" name="service_description" value="[[ service.description ]]">',
			  '<div title="' + service.host_plugin_output + '" class="circle  state_' + service.host_state + '"></div>' +
			'<a href="{% url 'status.views.detail' %}?host_name=[[ service.host_name ]]" title="Details for host [[ service.host_name ]]"> ' + service.host_name + '</a>',
                    	'<a href="{% url 'status.views.detail' %}?host_name=' + service.host_name + '&service_description=' + service.description + '" title="' + service.status + ' for the past ' + service.last_state_change + '">' +
                        '<div class="circle circle_' + service.unhandled + '  state_' + service.state + (service.unhandled && service.unhandled || "") + '"> </div> ' + service.description + '</a>' +
                        '<span title="' + service.plugin_output + '" class="service_description_short plugin_output">' +
                                          service.plugin_output +
                                 '</span>', "",

                (service.last_state_change != 0 && service.last_state_change),
                    (service.last_state_change != 0 && service.last_state_change || "never") ]);



            }
	    var dt = $("table.statustable").dataTable( { "aaData": aaData, "iDisplayLength": 100, "bStateSave": true, "sPaginationType": "bootstrap" });
        });

    </script>
{% endblock %}
