<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Adagios - {% block title %}block=title?{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Adagios - Nagios Configuration Made Easy">
    <meta name="author" content="Tomas Edwardsson, Pall Sigurdsson">
    <!-- Le styles -->
    <link href="{% url media path="css/style.css" %}" rel="stylesheet">
    <link href="{% url media path="css/status.css" %}" rel="stylesheet">

    <link href="{% url media path="datepicker/css/datepicker.css" %}" rel="stylesheet">
    <link href="{% url media path="slider/css/slider.css" %}" rel="stylesheet">



    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="{% url media path="ico/favicon.ico" %}">
    <link rel="apple-touch-icon-precomposed" sizes="114x114"
          href="{% url media path="ico/apple-touch-icon-114-precomposed.png" %}">
    <link rel="apple-touch-icon-precomposed" sizes="72x72"
          href="{% url media path="ico/apple-touch-icon-72-precomposed.png" %}">
    <link rel="apple-touch-icon-precomposed"
          href="{% url media path="ico/apple-touch-icon-57-precomposed.png" %}">

    <!-- Block header starts -->
    {%  block header %}{% endblock %}
    <!-- Block header ends -->
</head>

<body>


<!-- block top_navigation starts -->
{% block top_navigation %}
    {%  include "snippets/top_navigation_bar.html" %}
{% endblock %}
<!-- block top_navigation ends -->

<!-- Here we start the main view -->
<div id="near_top" class="near_top">
    <div class="container-fluid content">
    <div class="row-fluid ">
        <ul class="breadcrumb">
            <li><i class="glyph-right-arrow"></i>
            </li>
            <li>
                <a href="{% url home %}"> Home</a> <span class="divider">/</span>
            </li>
            <li>
                {% block nav1 %}
                    <a href="{% url status.views.services %}">Status</a>
                {% endblock %}
                <span class="divider">/</span>
            </li>
            <li>
                {% block nav2 %}
                {% endblock %}
            </li>
        </ul>
    </div>

    <div class="row-fluid">
        <div class="pull-left" id="titlebar">
            <h2>
                <small>{% block smallheader %}block=smallheader{% endblock %}</small>
                {% block largeheader %}block=largeheader {% endblock %}
            </h2>
        </div>
        <div  class="" id="right_of_title">
            {% if okconfig %}
                <div class="pull-right btn-group"><a class="btn " href="{% url okconfig_.views.addhost %}">Add Host
            {% else %}
                <div class="pull-right btn-group"><a class="btn " href="{% url adagios.objectbrowser.views.add_object 'host' %}">Add Host
            {% endif %}
                </a><a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>

                            <ul class="dropdown-menu">
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'host' %}"> Host</a></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'service' %}"> Service</a></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'contact' %}"> Contact</a></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'timeperiod' %}"> Timeperiod</a></li>
                                <li class="divider"></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'hostgroup' %}"> Hostgroup</a></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'servicegroup' %}"> Servicegroup</a></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'contactgroup' %}"> Contactgroup</a></li>
                                <li class="divider"></li>
                                <li><a href="{% url adagios.objectbrowser.views.add_object 'template' %}"> Template</a></li>
                                <li class="divider"></li>
                                <li><a href="{% url bi.views.add %}"> Business Process</a></li>
                            </ul>
                        </a>
                </div>
                <br>
        </div>
        <div id="error_messages"  class="pull-left">
            {% if errors|length %}
                {%  for error in errors %}
                    <div class="alert">
                        <button class="close" data-dismiss="alert">×</button>
                        <strong>Warning!</strong> {{ error }}
                    </div>
                {%  endfor %}
            {% endif %}
            {% if messages|length %}
                {%  for message in messages  %}
                    <div class="alert alert-success">
                        <button class="close" data-dismiss="alert">×</button>
                        <strong>Info!</strong> {{ message }}
                    </div>
                {%  endfor %}
            {% endif %}
        </div>
    </div>
</div>
</div>

<hr id="seperate_top_and_content">

<div class="container-fluid content">
    <div class="row-fluid" id="container">
        <div class="span2"   id="left_sidebar">
            <h5>Shortcuts</h5>
            <ul class="nav nav-list">
                <li><a href="{% url status.views.status_index %}">Overview </a></li>
                <li >
                    <a {% if num_problems %}{% endif %} href="{% url status.views.services %}?unhandled">Problems {% if num_problems %}<span>({{ num_problems }})</span>{% endif %}</a>
                </li>
                <li><a href="{% url status.views.status_host %}">Hosts</a></li>
                <li><a href="{% url status.views.services %}">Services </a></li>
                <li><a href="{% url status.views.contact_list %}">Contacts</a></li>
                <li><a href="{% url status.views.status_parents %}">Network Parents </a></li>
                <li><a href="{% url objectbrowser.views.list_object_types %}">Configuration</a></li>
            </ul>

            <h5>Reports</h5>
            <ul class="nav nav-list">
                <li><a href="{% url status.views.state_history %}">State History </a></li>
                <li><a href="{% url status.views.status_log %}">Log</a></li>
                <li><a href="{% url status.views.comment_list %}">Comments</a></li>
                <li><a href="{% url status.views.downtime_list %}">Downtimes</a></li>
            </ul>

            <h5>Groups</h5>
            <ul class="nav nav-list">
                <li><a href="{% url status.views.status_hostgroups %}">Hostgroups</a></li>
                <li><a href="{% url status.views.status_servicegroups %}">Servicegroups</a></li>
                <li><a href="{% url status.views.contact_list %}#contactgroups">Contactgroups</a></li>
            </ul>

            <h5>Experimental</h5>
            <ul class="nav nav-list">
                <li><a href="{% url misc.views.map_view %}">Map</a></li>
                <li><a href="{% url status.views.status_boxview %}">Box View </a></li>
                <li><a href="{% url status.views.status_paneview %}">Pane View </a></li>
                <li><a href="{% url status.views.perfdata %}">Performance Data</a></li>
                <li><a href="{% url bi.views.index %}">Business Intelligence</a></li>
                <li><a href="{% url status.views.dashboard %}">Dashboard</a></li>
            </ul>
        </div>


        <div class="span10" id="main_content">
            {% block toolbar %}
            <div id="toolbar">

                {% block view_buttons %}
                <div class="btn-group pull-left" id="view_buttons">
                    <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="glyph-eye-open" title="View"> </i> <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="?q={{ request.GET.q }}&unhandled"> Open Problems</a></li>
                        <li><a href="?q={{ request.GET.q }}&state__isnot=0"> All Problems</a></li>
                        <li><a href="?q={{ request.GET.q }}&state=0"> All OK</a></li>
                        <li><a href="?q={{ request.GET.q }}"> Everything</a></li>
                    </ul>
                </div>
                {% endblock %}

                    {% block action_buttons %}
                <div class="pull-left" id="action_buttons" >

                    <button class="btn btn-small adagios_service_multi" title="Recheck - Execute selected checks immediately" data-loading-text='<img src="{% url media path="select2/spinner.gif" %}"> <span id="reschedule_text"> Running...</span>' id="reschedule_button" onclick="reschedule();">
                        <i class="glyph-refresh" > </i> <span id="reschedule_text">Recheck</span>
                    </button>
                    <button class="btn btn-small adagios_service_multi" title="Acknowledge - selected items will be hidden from unhandled and notifications will no longer be sent out" data-toggle="modal" data-target="#acknowledge_modal" id="acknowledge_button" data-loading-text='<img src="{% url media path="select2/spinner.gif" %}"> <span id="acknowledge_text"> Running...</span>'>
                        <i class="glyph-check" > </i><span id="acknowledge_text"> Acknowledge</span>
                    </button>
                    <button class="btn btn-small adagios_service_multi" title="Downtime - Selected items will be hidden from unhandled and notifications will not be sent until downtime is over" data-toggle="modal" data-target="#downtime_modal" id="downtime_button" data-loading-text='<img src="{% url media path="select2/spinner.gif" %}"> <span id="downtime_text"> Running...</span>'>
                        <i class="glyph-clock" > </i> Downtime
                    </button>
                    <button class="btn btn-small adagios_service_multi" title="Send out mail for selected items" id="mail_button" data-toggle="modal" data-target="#mail_modal">
                        <i class="glyph-envelope" > </i>
                    </button>

                    <button class="btn btn-small adagios_service_multi" title="Copy {{ my_object.object_type }}" onclick="copy_selected_objects();">
                        <i class="icon-copy"> </i>
                    </button>
                    <button class="btn btn-small adagios_service_multi" title="Edit {{ my_object.object_type }}" id="configure_button" onclick="edit_selected_objects();">
                        <i class="glyph-edit" > </i>
                    </button>
                    <button class="btn btn-small adagios_service_multi" title="Delete {{ my_object.object_type }}" id="delete_button" onclick="delete_selected_objects();" >
                        <i class="glyph-bin" > </i>
                    </button>

                </div>

                    <div class="btn-group pull-left">
                        <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" style="margin-left: 4px;font-weight: normal">
                            More <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu">
                            <li>
                                <a class="enable_on_select" title="Add to businesgroup" id="add_to_businessprocess_button" onclick="add_to_business_process();">
                                    Add to business process
                                </a>
                            </li>
                            <li>
                                <a class="enable_on_select" title="Add to contactgroup" onclick="add_to_group('contactgroup');">
                                    Add to contactgroup
                                </a>
                            </li>
                            <li>
                                <a class="enable_on_select" title="Add to contactgroup" onclick="add_to_group('servicegroup');">
                                    Add to servicegroup
                                </a>
                            </li>
                        </ul>

                </div>


                    {% endblock %}






                <div class=" pull-right" id="search_box">
                    <form action="{% url status.views.services %}" method="get" >
                        <div class="pull-left">
                            <input name="q"  id="search_field"  value="{{ request.GET.q }}" class="search-query" placeholder="hosts, services, etc..." />
                        </div>
                        <div class="btn-group pull-left"><button class="btn btn-small"  type="submit" href="{% url status.views.services %}"><i class="icon-search"></i> Search</button><a class="btn  dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="{% url status.views.services %}?unhandled"> Open Problems</a></li>
                                <li><a href="{% url status.views.services %}?state__isnot=0"> All Problems</a></li>
                                <li><a href="{% url status.views.services %}?state=0"> All OK</a></li>
                                <li><a href="{% url status.views.services %}"> Everything</a></li>
                            </ul>
                        </div>
                    </form>
                </div>

            </div>
            {% endblock %}
            <div id="block-content">
            <!-- block content starts -->
            {% block content %}block=content{% endblock %}
            <!-- block content ends -->
            </div>

        </div>



    </div>

            <div id="footers" class="row-fluid">
            <hr>
            <div class="pull-right" id="make_a_wish" >
                <input type="text" class="input-medium"  placeholder="i wish this page could..." onclick='$("#wish_modal").modal("show");' />
                <button class="btn btn-" style="margin-bottom: 9px;" onclick='$("#wish_modal").modal("show");'>Make a wish</button>
            </div>
        </div>

    <!-- Acknowledge modal -->
    <div class="modal hide fade" id="acknowledge_modal">
        <form class="form-horizontal" onsubmit='$("#acknowledge_modal").modal("hide"); acknowledge(); return false;' >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Acknowledge problem</h3>
            </div>
            <div class="modal-body">
                <p>Acknowledge means that someone is handling this problem. It will no longer be marked as unhandled and Nagios will stop sending notifications about it until it goes back to OK status.</p>
                <div class="control-group">
                    <label class="control-label" for="id_acknowledgement_author">
                        Author
                    </label>
                    <div class="controls" id="author_field">
                        <input id="id_acknowledgement_author" type="text" class="required" disabled=disabled value="{{ remote_user }}" name="author" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_comment">
                        Comment
                    </label>
                    <div class="controls" id="host_name_field">
                        <input id="id_comment" type="text" class="required" placeholder="Write some comment" name="comment" />
                        <label class="help-block">Other people looking at this service will see this comment.</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" onclick='$("#acknowledge_modal").modal("hide");'>Cancel</a>
                <button type="submit" id="acknowledge_submit_button" class="btn btn-primary">Acknowledge Problem</button>
            </div>
        </form>
    </div>
    <!-- Acknowledge modal ends -->


    <!-- downtime modal -->
    <div class="modal hide fade" id="downtime_modal">
        <form name="downtime" class="form-horizontal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Schedule Downtime</h3>
            </div>
            <div class="modal-body">
                <p>Putting hosts and services into scheduled downtime means they are expected to fail during that period. Nagios will not send out any notifications during scheduled downtime and problems will not show up as unhandled problems.</p>
                <div class="control-group">
                    <label class="control-label" for="id_downtime_author">
                        Author
                    </label>
                    <div class="controls" id="downtime_author_field">
                        <input id="id_downtime_author" type="text" class="required" disabled=disabled value="{{ remote_user }}" name="author" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_downtime_start_time">
                        Start Time
                    </label>
                    <div class="controls" id="downtime_start_time_field">
                        <div id="datepicker_start_time" class="date pull-left">
                            <input name="start_time_picker" style="width: 70px" type="text">
                        </div>
                        <div class="control-group pull-left">
                            <input name="start_hours" style="width: 40px" type="text">&nbsp;
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_downtime_end_time">
                        End Time
                    </label>
                    <div class="controls" id="id_downtime_end_time_field">
                        <div id="datepicker_end_time" class="date pull-left">
                            <input name="end_time_picker" style="width: 70px" type="text">
                        </div>
                        <div class="control-group pull-left">
                            <input name="end_hours" style="width: 40px" type="text">&nbsp;
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_downtime_comment">
                        Comment
                    </label>
                    <div class="controls" id="downtime_comment_field">
                        <input id="id_downtime_comment" type="text" class="required" placeholder="Write some comment" name="comment" />
                        <label class="help-block">Other people looking at this service will see this comment.</label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" onclick='$("#downtime_modal").modal("hide");'>Cancel</a>
                <button type="submit" class="btn btn-primary">Schedule Downtime</button>
            </div>
        </form>
    </div>
    <!-- Downtime modal ends -->

    <!-- Mail modal -->
    <div class="modal hide fade" id="mail_modal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Mail</h3>
            </div>
            <div class="modal-body">
                <p>You can send manual e-mail notification to a specified email address.</p>

                <div class="control-group">
                    <label class="control-label" for="id_mail_to">
                        To:
                    </label>
                    <div class="controls" id="mail_to_field">
                        <input id="id_mail_to" type="text" class="required" value="" name="to" style="width: 100%" />
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label" for="id_mail_message">
                        Message
                    </label>
                    <div class="controls" id="id_mail_message_field">
                        <textarea id="id_mail_message" type="text" class="required" placeholder="Hey everyone, please check the link and services below." name="message" ></textarea>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="id_add_myself_to_cc">
                    </label>
                    <div class="controls" id="id_add_myself_to_cc_field">
                        <input type="checkbox" checked="checked" name="add_myself_to_cc" value="on" id="id_add_myself_to_cc" />
                        Add myself to CC
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label" for="id_acknowledge_all_problems">
                    </label>
                    <div class="controls" id="id_acknowledge_all_problems_field">
                        <input type="checkbox" checked="checked" name="add_myself_to_cc" value="on" id="id_acknowledge_all_problems" />
                        Acknowledge Unhandled Problems
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <a href="#" class="btn" onclick='$("#mail_modal").modal("hide");'>Cancel</a>
                <button type="submit" class="btn btn-primary" onclick='$("#mail_modal").modal("hide"); send_mail();'>Send</button>
            </div>
    </div>
    <!-- Mail modal ends -->

    <!-- Wish modal -->
    <div class="modal hide fade" id="wish_modal">
        <form class="form-horizontal" action="https://opensource.ok.is/cgi-bin/wish.cgi" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Make a wish</h3>
            </div>
            <div class="modal-body">
                <p>Anything cool you think Adagios could be doing for you ?
                </p>
                <p>
                Sweet ask for it here, and we'll see what we can do.
                </p>
                <p>We love to hear from you but we cannot guarantee that your wish will come true.

                </p>
                <textarea style="width:100%;" cols="200" rows="10" name="wish" placeholder="i wish this page could..."></textarea>
                <hr>
                <input name="bribes" id="id_bribes" class="pull-left" type="checkbox"  />
                <label class="pull-left" for="id_bribes">I'll back it up with bribes.</label>
            </div>

            <div class="modal-footer">
                <a href="#" class="btn" onclick='$("#wish_modal").modal("hide");'>Cancel</a>
                <button type="submit" id="wish_submit_button" class="btn">Make a wish</button>
            </div>
        </form>
    </div>
    <!-- Wish modal ends -->

</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% url home %}rest/pynag.js"></script>
<script src="{% url home %}rest/status.js"></script>
<script src="{% url home %}rest/okconfig.js"></script>

<script src="{% url media path="jquery/jquery-1.9.1.min.js" %}"></script>
<script src="{% url media path="bootstrap/js/bootstrap.min.js" %}"></script>

<script src="{% url media path="datatables/js/jquery.dataTables.min.js" %}"></script>
<script src="{% url media path="datatables/DT_bootstrap.js" %}"></script>

<script src="{% url media path="select2/select2.min.js" %}" type="text/javascript"></script>
<script src="{% url media path="js/adagios.js" %}"></script>
<script src="{% url media path="js/adagios_status.js" %}"></script>

<script src="{% url media path="datepicker/js/bootstrap-datepicker.js" %}"></script>
<script src="{% url media path="slider/js/bootstrap-slider.js" %}"></script>


<script>
    var BASE_URL = "{% url home %}";
    var MEDIA_URL = "{% url media path="" %}";
</script>

<!-- block footer starts -->
{% block footer %}
    <script type="text/javascript" xmlns="http://www.w3.org/1999/html">
        // Change our table into a jquery datatable
        $(function() {
            oTable = $('.datatable').dataTable( {
                "bPaginate": true,
                "iDisplayLength": 100
            });
            $('.dataTables_length').hide();

        });
        $(document).ready(function() {
            var start_time = (new Date).valueOf() / 1000;
            var end_time = (new Date);
            end_time.setHours(end_time.getHours() + 2);
            end_time = end_time.valueOf() / 1000;
            $("form[name='downtime']").adagios_datetimepicker(start_time, end_time);
            $("form[name='downtime']").submit(function(e) {
                $("#downtime_modal").modal("hide");
                downtime();
                e.preventDefault();
                return false;
            });
        });

        // When somebody clicks the acknowledge button, lets focus on the comment field
        $('#acknowledge_modal').on('shown', function () {
            document.getElementById('id_comment').focus()
        });


        // When somebody clicks the downtime button, lets focus on the comment field
        $('#downtime_modal').on('shown', function () {
            document.getElementById('id_downtime_comment').focus()
        });

        // When somebody clicks the notification button, lets load contact email addresses
        $('#mail_modal').on('shown', function () {
            var url = '{% url rest/status %}json/emails?fields=email';
            document.getElementById('id_mail_to').focus();
            $.getJSON(url, function(data) {
                $("#id_mail_to").select2({
                    tags:data,
                    tokenSeparators: [","],
                    placeholder:"Comma seperated list of email addresses to send to"
                });
            });
        });


        function reschedule() {
            $("#reschedule_button").button('loading');
            var my_services = get_selected_services();
            var services_done = 0;
            var total = my_services.length;
            $.each(my_services, function(i, item) {
                host_name =  item['host_name'];
                service_description = item['service_description'];
                console.log('Rescheduling ' + host_name + ' ' + service_description);
                var url = '{% url rest/status %}json/reschedule?wait=1&host_name='+host_name+'&service_description='+service_description;
                $.getJSON(url, function(data) {
                    services_done++;
                    $("#reschedule_text").html(services_done + "/" + total + " done");
                    if (services_done >= total) {
                        $("#reschedule_text").html('All Done. Reloading page.');
                        location.reload();
                    }
                });
                if (total > i && services_done == 0) {
                    $("#reschedule_text").html(i+1 + "/" + total + " rescheduled");
                }
                else {
                    $("#reschedule_text").html("0/" + total + " done");
                }


            });


        }
        // This function responsible for acknowledge on all selected rows
        function acknowledge() {
            $('#acknowledge_modal').modal('hide');
            var comment = document.getElementById("id_comment").value;
            if (comment == '') {
                comment = "No comment was entered...";
            }
            $("#acknowledge_button").button('loading');
            var my_services = get_selected_services();
            var services_done = 0;
            $.each(my_services, function(i, item) {
                host_name =  item['host_name'];
                service_description = item['service_description'];

                my_data = {
                    "host_name":host_name,
                    "service_description":service_description,
                    "comment":comment,
                    "author":"{{ remote_user }}",
                    "sticky":"1",
                    "persistent":"0",
                    "notify":"1"
                }
                $.ajax({
                    type: 'POST',
                    url: '{% url rest/status %}json/acknowledge',
                    data: my_data,
                    async: false,
                    success: function(data) {
                        services_done++;
                        $("#acknowledge_text").html(services_done + "/" + my_services.length + " done");
                        if (services_done >= my_services.length) {
                            $("#acknowledge_text").html('All Done. Reloading page.');
                            location.reload();
                        }
                    },
                    contentType: "application/json",
                    dataType: 'json'
                });
            });
        }

        // This function responsible for downtime on all selected rows
        function downtime() {
            var $form_downtime = $("form[name='downtime']");
            $('#downtime_modal').modal('hide');
            var comment = document.getElementById("id_downtime_comment").value;
            if (comment == '') {
                comment = "No comment was entered...";
            }
            var start_time = $form_downtime.find("input[name='start_time']").val();
            var end_time = $form_downtime.find("input[name='end_time']").val();
            $("#downtime_button").button('loading');
            var my_services = get_selected_services();
            var services_done = 0;
            $.each(my_services, function(i, item) {
                host_name =  item['host_name'];
                service_description = item['service_description'];

                my_data = {
                    "host_name":host_name,
                    "service_description":service_description,
                    "comment":comment,
                    "author":"{{ remote_user }}",
                    "start_time":start_time,
                    "end_time":end_time
                }
                $.ajax({
                    type: 'POST',
                    url: '{% url rest/status %}json/downtime',
                    data: my_data,
                    async: false,
                    success: function(data) {
                        services_done++;
                        $("#downtime_text").html(services_done + "/" + my_services.length + " done");
                        if (services_done >= my_services.length) {
                            $("#downtime_text").html('All Done. Reloading page.');
                            location.reload();
                        }
                    },
                    contentType: "application/json",
                    dataType: 'json'
                });
            });
        }
        // This function sends email to selected recipients for all selected rows
        function send_mail() {
            $('#mail_modal').modal('hide');
            my_data = {
                "to":document.getElementById("id_mail_to").value,
                "csrfmiddlewaretoken": window.csrftoken,
                "add_myself_to_cc": document.getElementById("id_add_myself_to_cc").checked,
                "acknowledge_all_problems": document.getElementById("id_acknowledge_all_problems").checked,
                "message":document.getElementById("id_mail_message").value,
                "service": []
            }

            var my_services = get_selected_services();
            for (i=0;i<my_services.length;i++){
                shortname = my_services[i]["host_name"] + "/" + my_services[i]["service_description"];
                my_data['service'].push( shortname);
            }
            jQuery.param( my_data["service"], true);
            console.log(my_data['service']);
            $.ajax({
                type: 'POST',
                url: '{% url misc.views.mail %}',
                data: my_data,
                async: true,
                success: function(data) {
                    $("#mail_button_text").html("Sent")
                },
                contentType: "application/json",
                dataType: 'json'
            });

        }

        function comment(comment,host_name, service_description, persistent ) {
            console.log("Writing Comment: " + comment);
            if (comment == '') {
                comment = "No comment was entered...";
            }
            if (service_description == '_HOST_')
                service_description = undefined;
            my_data  = {
                "host_name":host_name,
                "service_description":service_description,
                "comment":comment,
                "author":"{{ remote_user }}",
                "persistent":"1"
            }
            $.ajax({
                type: 'POST',
                url: '{% url rest/status %}json/comment',
                data: my_data,
                async: false,
                success: function(data) {
                    return data;
                },
                contentType: "application/json",
                dataType: 'json'
            });

        }
        // Function to edit a single attribute of an object
        function change_attribute(object_type,short_name,attribute_name,new_value, success, error) {
            my_data  = {
                "object_type": object_type,
                "short_name": short_name,
                "attribute_name":attribute_name,
                "new_value":new_value
            }
            $.ajax({
                type: 'POST',
                url: '{% url rest/status %}json/edit',
                data: my_data,
                async: true,
                success: function(data) {
                    success(data);
                },
                error: function(data) {
                    error(data);
                },
                contentType: "application/json",
                dataType: 'json'
            });

        }

    </script>

    <script type="text/javascript" xmlns="http://www.w3.org/1999/html">

        $(document).ready(function() {
            // Set keyboard focus on the search box
            search_field = document.getElementById('search_field');
            if (search_field != null) {
                search_field.focus();
            }

            // When searchbox button is pressed, filter table
            var $rows = $('.searchtable tbody .mainrow');
            $('#search_field').keyup(function() {
                var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
                $rows.show().filter(function() {
                    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();

                    return !~text.indexOf(val);
                }).hide();

                // Some views like status view hide repeated occurances of host_names
                // That does not work well if something is being filtered
                if (val == '')
                    $('.repeated_content').hide();
                else
                    $('.repeated_content').show();
            });

            // When row in datatable is clicked. Select it.
            $('.searchtable tr').click(function(e) {
                if (e.target.type !== 'checkbox' && e.target.tagName != 'A') {
                        $(':checkbox', this).trigger('click');
                }
                else {
                }
                update_selected_rows();
            });

            // Javascript to enable link to specific tab
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
            }

            // Change hash for page-reload
            $('.nav-tabs a').on('shown', function (e) {
                window.location.hash = e.target.hash.replace("#", "#" + prefix);
            });

        });


        $(document).ready(function() {
            update_selected_rows();
            adagios.objectbrowser.check_nagios_needs_reload();
        });

        // Return a list of all services that have been checked. This is used for acknowledge, downtime, etc.
        function get_selected_services() {
            var result = []
            checked_boxes = $( ".selectable :checked" );
            checked_boxes.each(function() {
               var host_name = $(this).next('.input_hostname').val();
               var service_description = $(this).next().next('.input_service_description').val();
               result.push( {'host_name': host_name, 'service_description': service_description} )
            });
            return result;
        }
        // update_selected_rows()
        // highlights all rows that are selected in a table. Also shows/hides toolbar buttons if applicable.
        function update_selected_rows() {
            all_boxes = $( ".chkbox" );
            checked_boxes = $( ".selectable :checked" );
            all_boxes.parent().parent().removeClass('row_selected');
            checked_boxes.parent().parent().addClass('row_selected');
            // Treat acknowledge button depending on if acknowledgements are needed

            if (checked_boxes.length > 0) {
                if (checked_boxes.length > 1) {
                    $('#action_buttons button.adagios_service_single').attr('disabled', 'disabled');
                    $('#action_buttons button.adagios_service_multi').attr('disabled', null);
                    //adagios_service_single
                } else {
                    $('#action_buttons button.adagios_service_single').attr('disabled', null);
                    $('#action_buttons button.adagios_service_multi').attr('disabled', null);
                }
                $('.enable_on_select').attr('disabled', null);
                $('#action_buttons').attr('title',null);
            }
            else {
                $('#action_buttons button').attr('disabled', 'disabled');
                $('.enable_on_select').attr('disabled', 'disabled');
                //$('#action_buttons').attr('title','Select some items below to active toolbar buttons');
            }
        }

        // A Primitive shift-click functionality. Also highlight selected rows
        $( function() {
            var _last_selected = null, checkboxes = $( ".chkbox" );
            checkboxes.click( function( e ) {
                var ix = checkboxes.index( this ), checked = this.checked;
                if ( e.shiftKey && ix != _last_selected ) {
                    checkboxes.slice( Math.min( _last_selected, ix ), Math.max( _last_selected, ix ) )
                            .each( function() {
                                this.checked = checked
                            });
                    _last_selected = null;
                } else { _last_selected = ix }
                update_selected_rows();

            })
        } );

        // Select all/none/problems button in top-left of the table
        $('#select_all').click(function(e) {
            $( ".chkbox").each( function() {
                this.checked = true;
            });
            $('#select_many').prop('checked',true);
            $('#select_many').prop('indeterminate',false);
            update_selected_rows();
        });
        $('#select_none').click(function(e) {
            $( ".chkbox").each( function() {
                this.checked = false;
            });
            $('#select_many').prop('checked',false);
            $('#select_many').prop('indeterminate',false);
            update_selected_rows();
        });
        $('#select_problems').click(function(e) {
            $( "input.problem ").each( function() {
                this.checked = true;
            });
            $('#select_many').prop('checked',false);
            $('#select_many').prop('indeterminate',true);
            update_selected_rows();
        });
        $('#select_unhandled_problems').click(function(e) {
            $( "input.unhandled ").each( function() {
                this.checked = true;
            });
            $('#select_many').prop('checked',false);
            $('#select_many').prop('indeterminate',true);
            update_selected_rows();
        });

        // Return a list of all checkboxes that are checked and have the class 'selectable'
        function get_selected_checbox_names_and_values() {
            var result = []
            return $( ".selectable :checked" );
            checked_boxes.each(function() {
               var host_name = $(this).next('.input_hostname').val();
               var service_description = $(this).next().next('.input_service_description').val();
               result.push( {'host_name': host_name, 'service_description': service_description} )
            });
            return result;
        }
        // When this function is called. Gather all selected services and add them to a specific business process
        function add_to_business_process() {
            var object_type = [];
            var value;
            var querystring = "?";
            var doing_graphs = false; /* special hack, change destination url if we are adding graphs */
            $( ".selectable :checked").each(function() {
                object_type = $(this).attr('name');
                value = $(this).attr('value');
                querystring += "&" + object_type + "=" + value;
                if (object_type == 'graph') {
                    doing_graphs = true;
                }
            });
            if (doing_graphs == true) {
                window.location.href = "{% url bi.views.add_graph %}/?" + querystring;
            }
            else {
                window.location.href = "{% url bi.views.add_subprocess %}/?" + querystring;
            }


            return false;
        }
        // When this function is called, gather all selected objects and add them to a specific group
        function add_to_group(group_type) {
            var object_type, value;
            var querystring = '';
            $( ".selectable :checked").each(function() {
                object_type = $(this).attr('name');
                value = $(this).attr('value');
                querystring += "&" + object_type + "=" + value;
            });
            window.location.href = "{% url objectbrowser.views.add_to_group %}/" + group_type + "?" + querystring;
        }
        function delete_selected_objects() {
            var object_type, value;
            var querystring = '';
            $( ".selectable :checked").each(function() {
                object_type = $(this).attr('name');
                value = $(this).attr('value');
                querystring += "&" + object_type + "=" + value;
            });
            window.location.href = "{% url objectbrowser.views.bulk_delete %}" + "?" + querystring;
        }
        function edit_selected_objects() {
            var object_type, value;
            var querystring = '';
            $( ".selectable :checked").each(function() {
                object_type = $(this).attr('name');
                value = $(this).attr('value');
                querystring += "&" + object_type + "=" + value;
            });
            window.location.href = "{% url objectbrowser.views.bulk_edit %}" + "?" + querystring;
        }

        function copy_selected_objects() {
            var object_type, value;
            var querystring = '';
            $( ".selectable :checked").each(function() {
                object_type = $(this).attr('name');
                value = $(this).attr('value');
                querystring += "&" + object_type + "=" + value;
            });
            window.location.href = "{% url objectbrowser.views.bulk_copy %}" + "?" + querystring;
        }




    </script>
{% endblock %}
<!-- block footer ends -->

<!--
GLYPHICONS FREE are released under the Creative Commons Attribution 3.0 Unported (CC BY 3.0). The Glyphicons FREE can
be used both commercially and for personal use, but you must always add a link to www.glyphicons.com in a prominent
place (e.g. the footer of a website), include the CC-BY license and the reference to www.glyphicons.com on every page
using Glyphicons.

All logos and trademarks in social icons are the property of the respective trademark owners.®
-->
</body>
</html>
