<div>

    <!-- Text displayed if no recent connections exist -->
    <p class="placeholder" ng-hide="hasRecentConnections()">{{'HOME.INFO_NO_RECENT_CONNECTIONS' | translate}}</p>

    <!-- All active connections -->
    <div ng-repeat="activeConnection in activeConnections" class="connection">
        <a href="#/client/{{activeConnection.client.id}}">

            <!-- Connection thumbnail -->
            <div class="thumbnail">
                <guac-thumbnail client="activeConnection.client"></guac-thumbnail>
            </div>

            <!-- Connection name -->
            <div class="caption">
                <span class="name">{{activeConnection.name}}</span>
            </div>

        </a>
    </div>
    
    <!-- All recent connections -->
    <div ng-repeat="recentConnection in recentConnections" class="connection">
        <a href="#/client/{{recentConnection.entry.id}}">

            <!-- Connection thumbnail -->
            <div class="thumbnail">
                <img alt="{{recentConnection.name}}" ng-src="{{recentConnection.entry.thumbnail}}"/>
            </div>

            <!-- Connection name -->
            <div class="caption">
                <span class="name">{{recentConnection.name}}</span>
            </div>

        </a>
    </div>

</div>
