<!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">
    <style>
        body {
            padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
            background: none;
        }
        .near_top {
            background: white;
            background-color: white;
        }
        .main {
            background: white;
            background-color: white;
        }
        @media (max-width: 979px) {
            body {
                padding-top: 0;
            }
        }
        .state_0 {
            color: #468847;
            background-color: #90ee90; /* DFF0D8 */
        }
        .state_1 {
            color: orange; /* yellow or orange */
            background-color: #FCEFB0; /* yellow or orange */
        }
        .state_2 {
            color: #B94A48;
            background-color: #F2DEDE; /* pink */
        }
        .state_3 {
            background-color: #d3d3d3;
        }

        .table td {
            line-height: 10px;
        }
        .circle {
            border-radius: 50%;
            width: 12px;
            height: 12px;
            display: inline-block;
            border-style: solid;
            border-width: 1px;
            /* width and height can be anything, as long as they're equal */
        }

        .table td {
            line-height: 10px;
        }
        .circle {
            border-radius: 50%;
            width: 12px;
            height: 12px;
            display: inline-block;
            /* width and height can be anything, as long as they're equal */
        }
        .row_selected {
            background-color: lightblue;
        }
        a {
            color: black;
        }
        .table tbody tr:hover td, .table tbody tr:hover th {
            background-color: lightblue;
        }

        @-webkit-keyframes spin {
		  from { -webkit-transform: rotate(0deg); }
		  to { -webkit-transform: rotate(360deg); }
		}

        @-moz-keyframes spin {
		  from { -moz-transform: rotate(0deg); }
		  to { -moz-transform: rotate(360deg); }
		}

        @-ms-keyframes spin {
		  from { -ms-transform: rotate(0deg); }
		  to { -ms-transform: rotate(360deg); }
		}
        img {
            background: url('{% url media path="select2/spinner.gif" %}') no-repeat;
        }
        .circle-spin {

            background-image: -moz-radial-gradient(12px 12px 12deg, circle cover, yellow 0%, orange 100%, red 95%);
            background-image: -webkit-radial-gradient(10px 10px, circle cover, red, white);
            background-image: radial-gradient(12px 12px 12deg, circle cover, yellow 0%, orange 100%, red 95%);


            /* webkit chrome, safari, mobile */
            -webkit-animation-name: spin;
            -webkit-animation-duration: 3s; /* 3 seconds */
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;

            /* mozilla ff */
            -moz-animation-name: spin;
            -moz-animation-duration: 3s; /* 3 seconds */
            -moz-animation-iteration-count: infinite;
            -moz-animation-timing-function: linear;

            /* microsoft ie */
            -ms-animation-name: spin;
            -ms-animation-duration: 3s; /* 3 seconds */
            -ms-animation-iteration-count: infinite;
            -ms-animation-timing-function: linear;
        }
    </style>

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

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="{% url media path="img/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>


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

{% block titlebar %}
<!-- Here we start the main view -->
<div class="near_top block">
    <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 style="padding-top: 10px; margin-bottom: 0px; line-height: 0px;" id="right_of_title">
            <div class="pull-right btn-group">
                <a class="btn btn-success" href="{% url okconfig_.views.addhost %}">
                    Add Host
                </a>
                <a class="btn  btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="{% url okconfig_.views.addtemplate %}{% if host_name %}?host_name={{ host_name }}{% endif %}"> Add Check to host</a></li>
                    <li><a href="{% url okconfig_.views.addtemplate %}{% if host_name %}?host_name={{ host_name }}{% endif %}"> Install Agent on host</a></li>
                </ul>
            </div>
            <br>

        </div>
        <div id="error_messages" style="margin-left: 30px;" 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 style="margin-top: 10px; margin-bottom: 10px;">
{% endblock %}

{% block maincontent %}
<div class="content content-fluid block" id="maincontent">
    <div class="row-fluid ">
        <div class="span2"   id="left_sidebar">
            <ul class="nav nav-list">
                <li><a href="{% url status.views.services %}?acknowledged=0&state__isnot=0">Problems </a></li>
                <li><a href="{% url status.views.status_hostgroups %}">Hostgroups</a></li>
                <li><a href="{% url status.views.services %}">Services </a></li>
                <li><a href="{% url status.views.status_parents %}">Network Parents </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>
            </ul>
        </div>


        <div class="span10" id="main_content">
            {% block toolbar %}
            <div class id="toolbar row-fluid" style="margin-bottom: 40px;">

                <div class="btn-group pull-left" id="view_buttons" style="margin-right: 15px;">
                    <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 }}&acknowledged=0&state__isnot=0"> 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>
                        <hr>
                        <li>More Action are available if you select any objects</li>
                    </ul>
                </div>

                <div class="pull-left" id="action_buttons" >

                            <button class="btn btn-small" 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" 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" title="Downtime - Selected items will be hidden from unhandled and notifications will not be sent until downtime is over" id="downtime_button">
                                <i class="glyph-clock" > </i> Downtime
                            </button>

                           <button class="btn btn-small">
                                <i class="glyph-eye-open" title="Open in Nagios"> </i>
                            </button>
                            <a class="btn btn-small" title="Configure {{ my_object.object_type }}" id="configure_button" {% if my_object %}href="{% url edit_by_shortname my_object.object_type my_object.short_name %}"{% endif %}>
                                <i class="glyph-edit" > </i>
                            </a>
                            <button class="btn btn-small" title="Delete {{ my_object.object_type }}" id="delete_button">
                                <i class="glyph-bin" > </i>
                            </button>

                </div >



                <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" style="width: 200px;  line-height: 22px; margin-left: 5px;" value="{{ request.GET.q }}" class="search-query" placeholder="Filter..." />
                        </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 %}?acknowledged=0&state__isnot=0"> 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>

    <!-- 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" class="btn btn-primary">Acknowledge Problem</button>
            </div>
        </form>
    </div>
    <!-- Acknowledge modal ends -->
</div>
</div> <!-- /container -->

{% endblock %}
<!-- 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/js/pagination.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>
    var BASE_URL = "{% url home %}";
</script>

<script type="text/javascript" xmlns="http://www.w3.org/1999/html">
    $(document).ready(function() {
        adagios.objectbrowser.check_nagios_needs_reload();
    });
</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 = $('.dtable').dataTable( {
                "bPaginate": true,
                "iDisplayLength": 100
            });
            //$('#search_field').keypress(function(){
            //    oTable.fnFilter( $(this).val() );
            //});
            //$('#datatable_filter').hide();
            $('.dataTables_length').hide();

        });
    </script>
    <script type="text/javascript" xmlns="http://www.w3.org/1999/html">
        // When somebody clicks the acknowledge button, lets focus on the comment field
        $('#acknowledge_modal').on('shown', function () {
            document.getElementById('id_comment').focus()
        });

        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":"1",
                    "notify":"0"
                }
                $.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'
                });
            });
        }


    </script>

    <script type="text/javascript" xmlns="http://www.w3.org/1999/html">
        // When row is clicked, lets check the checkbox in front of the row

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

            $('#datatable tr').click(function(e) {
                if (e.target.type !== 'checkbox') {
                        $(':checkbox', this).trigger('click');
                }
                update_selected_rows();
            });
        });

        /*
        // Enable shift+clicking to select multiple elements
        var lastChecked = null;
        $(document).ready(function() {
            var $chkboxes = $('.chkbox');
            function check_range(start) {
                //var start = $chkboxes.index(this);
                var end = $chkboxes.index(lastChecked);
                $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked);
                //$chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).parent().siblings().css('background-color', 'lightblue');
                lastChecked = this;
            }
            $chkboxes.click(function(e) {

                if(!lastChecked) {
                    lastChecked = this;
                    return;
                }

                if(e.shiftKey) {
                    check_range($chkboxes.index(this));
                    //var start = $chkboxes.index(this);
                    //var end = $chkboxes.index(lastChecked);

                    //$chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked);

                }

                lastChecked = this;
            });
        });
        */
        $(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 = $( "td :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 = $( "td :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) {
                $('#action_buttons > .btn').attr('disabled', null);
                $('#action_buttons').attr('title',null);
            }
            else {
                $('#action_buttons > .btn').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();
        });

    </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>
