<div class="group-list">

    <script type="text/ng-template" id="nestedGroup.html">

        <!-- Connection -->
        <div class="connection" ng-show="isVisibleConnection(item)">
            <div class="caption">
                <ng-include src="connectionTemplate"/>
            </div>
        </div>

        <!-- Connection group -->
        <div class="group" ng-show="isVisibleConnectionGroup(item)">
            <div class="caption">

                <!-- Connection group icon -->
                <div class="icon group type" ng-click="toggleExpanded(item)"
                     ng-class="{expanded: item.isExpanded, empty: !item.children.length, balancer: item.isBalancing}"></div>

                <ng-include src="connectionGroupTemplate"/>

            </div>

            <!-- Children of this group -->
            <div class="children" ng-show="item.isExpanded">
                <div class="list-item" ng-repeat="item in item.children | orderBy : 'name'" ng-include="'nestedGroup.html'">
            </div>

        </div>

    </script>

    <!-- Root-level connections / groups -->
    <div class="group-list-page">
        <div class="list-item" ng-repeat="item in childrenPage" ng-include="'nestedGroup.html'"></div>
    </div>

    <!-- Pager for connections / groups -->
    <guac-pager page="childrenPage" items="rootItems | orderBy : 'name'"
                page-size="pageSize"></guac-pager>

</div>
