{% extends "default/index.html" %}
{% block header %}
<script type="text/Javascript" src="/@@media/jquery.min.js"></script>
<script type="text/Javascript" charset="utf-8">
    function showServices(id){
        var content='<b>Services:</b><br/>';
        if (id == '') {
            $('#service').html(content);
        }
        var spans = document.getElementsByTagName('span');
        for ( i=0; i < spans.length; i++ ) {
            if (spans[i].id.substr(0,4) == 'host'){
                spans[i].style.backgroundColor = 'white';
            }
        }
        sp = document.getElementById('host'+id);
        if (sp != null) sp.style.backgroundColor = '#92CC47';
        $.getJSON("/json/servicesforhost/"+id+"/", function(j) {
            for (var i = 0; i < j.length; i++ ) {
                content += j[i].fields['service_description'] + "<br/>";
            }
            $('#service').html(content)
        });
    }
    $(function(){
            $('#direct_host').change(function() { showServices($(this).val()); });
    });
</script>
{% endblock header %}
{% block content %}
<p>Welcome {{ user.username }}.<br/>Here is the list of installed hosts and services:</p>
<div style='float: left;width:150pt'>
<b>Hosts:</b><br/>
{% for host in hosts.object_list %}
<span id='host{{host.id}}'><a href='#' onclick='showServices({{host.id}});'>{{ host }}</a></span><br/>
{% endfor %}
<br/>
<select id='direct_host'>
    <option value="" selected="selected">---------</option>
{% for host in hlist %}
    <option value='{{host.id}}'>{{ host }} </option>
{% endfor %}
</select>
</div>
<div id='service' style='float:right;margin-left:15pt;'>
    <b>Services:</b>
</div>
{% endblock content %}
{% block pagination %}
<div id='pagination'>
{% if hosts.has_previous %}
<a href="?page={{ hosts.previous_page_number }}">previous</a> ||
{% endif %}
Page {{ hosts.number }} of {{ hosts.paginator.num_pages }}
{% if hosts.has_next %}
 || <a href="?page={{ hosts.next_page_number }}">next</a>
{% endif %}
</div>
{% endblock %}