{% extends 'layout.html' %}
{% block content %}
<div id="groups-wrapper">
    <!-- Groups' toolbar -->
    <div id="groups-toolbar" class="ui-widget-content ui-corner-all">
        <button id="new_group" title="{{ _('Add a new group') }}" class="with-icon ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-plusthick"></span>{{ _('New group') }}
        </button>
        <button id="expandAll" title="{{ _('Expand all groups') }}" class="with-icon ui-state-default ui-corner-left">
            <span class="ui-icon ui-icon-folder-open"></span>{{ _('Expand all') }}
        </button>
        <button id="collapseAll" title="{{ _('Collapse all groups') }}" class="with-icon ui-state-default ui-corner-right">
            <span class="ui-icon ui-icon-folder-collapsed"></span>{{ _('Collapse all') }}
        </button>
        <!-- Search host -->
        <span id="search-host">{{ _('Search a host') }} <input class="ui-widget-content" name="searchHost" placeholder="{{ _('Hostname') }}"></span>
    </div>
    <!-- Groups -->
    <div id="groups">
    </div>
</div>

<div id="hosts-wrapper" style="display:none">
    <!-- Hosts' toolbar -->
    <div id="hosts-toolbar" class="ui-widget-content ui-corner-all">
        <div class="filter">{{ _('View') }} :
            <button title="{{ _('View all tunnels') }}" class="view_all ui-state-default ui-state-active ui-corner-left">{{ _('ALL') }}</button> 
            <button title="{{ _('View tunnels ON only') }}" class="view_on ui-state-default">{{ _('Tunnel ON') }}</button>
            <button title="{{ _('View tunnels OFF only') }}" class="view_off ui-state-default ui-corner-right">{{ _('Tunnel OFF') }}</button> 
        </div>
    </div>
    <!-- hosts -->
    <div id="hosts" class="ui-widget">
    </div>
</div>
{% endblock %}