<div>

  <div ng-repeat="container in containers" ng-show="filterContainer(container)">
    <div class="box" ng-class="getSelectedClass(container)">

      <div class="box-left">

        <i ng-show="!container.selected && showSelect" class="icon-circle-blank clickable" title="Not Selected" ng-click="container.selected = true"></i>
        <i ng-show="container.selected && showSelect" class="icon-circle clickable" title="Status of the container" ng-click="container.selected = false"></i>

        <i class="clickable" title="{{getStatusTitle(container)}}" ng-class='statusIcon(container)' ng-click="container.selected = !container.selected"></i>

        <div ng-click="container.selected = !container.selected">
          <a ng-click="showContainer(container)">{{container.id}}</a> / {{container.versionId}}
        </div>

        <i class="icon-cloud clickable" title="Ensemble member" ng-click="showContainer(container)" ng-show="isEnsembleContainer(container.id)"></i>
      </div>

      <div class="box-middle">
        <ul class="inline">
          <li ng-repeat="service in container.services" ng-switch="service.type">
            <i ng-switch-when="icon" class="{{service.src}}" title="{{service.title}}"></i>
            <img ng-switch-when="img" ng-src="{{service.src}}" title="{{service.title}}">
          </li>
        </ul>
      </div>

      <div class="box-right">

        <i class="icon-plus clickable" ng-show="container.root && container.alive" title="Create a new child container" ng-click="createChildContainer(container)"></i>

        <i class="icon-signin clickable"
           ng-show="canConnect(container)"
           title="Open a new window and connect to this container"
           ng-click="doConnect(container)"></i>
      </div>

    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>
  <div ng-include="'app/fabric/html/changeVersionDialog.html'"></div>

</div>
