<div class="controller-section" ng-controller="Fabric.AssignProfileController">

  <div class="row-fluid">
    <div class="span12" ng-show="containers.length > 0">
      <div class="pull-left">
        Select the containers to assign <strong>{{versionId}}</strong> / <strong>{{profileId}}</strong> to:
      </div>
      <div class="pull-right">
        <button class="btn btn-primary" ng-disabled="selected.length == 0" ng-click="assignProfiles()">Assign</button>
      </div>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span9">

      <div class="section-header" ng-show="containers.length > 0">

        <div class="selection-controls">
          <i class="icon-circle-blank clickable" title="Clear selection" ng-click="setActiveContainer(null)"></i>
          <i class="icon-circle clickable" title="Select all" ng-click="selectAllContainers()"></i>
        </div>

        <div class="section-filter">
          <input type="text" class="search-query" placeholder="Filter..." ng-model="containerIdFilter">
          <i class="icon-remove clickable" title="Clear filter" ng-click="containerIdFilter = ''"></i>
        </div>
      </div>

      <div fabric-container-list at-version="versionId" without-profile="profileId" ng-show="containers.length > 0"></div>
      <div ng-hide="containers.length > 0" class="alert">No available containers to assign "<b>{{profileId}}</b>" from version "<b>{{versionId}}</b>" to, <a href="" ng-click="gotoCreate()">create one</a>?</div>
    </div>

    <div class="span3">
      <div class="row-fluid" ng-show="containers.length > 0">
        <p><strong>Selected Containers</strong></p>
        <ol class="zebra-list">
          <li ng-repeat="c in selected">{{c.id}}</li>
        </ol>
      </div>
    </div>


  </div>


</div>
