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

    <div class="section-controls">
      <a href="" title="Create a new container" ng-click="createContainer()">
        <i class="icon-plus"></i> Container
      </a>
      <a href="" ng-click="editRequirements.dialogOpen(null)"
         title="Configure the minimum number of required instances for each profile. If you are on OpenShift or using an Auto Scaler they are then created automatically; otherwise click on the count button to manually provision required containers">
        <i class="icon-resize-vertical"></i>
        Target
      </a>
    </div>

    <div class="active-profile-count-title" title="The actual number of instances of each profile that are currently running">
      Count
    </div>

  </div>
  <div class="active-profile-list" ng-repeat="profile in activeProfiles" ng-show="profileMatchesFilter(profile)">
    <div class="expandable" model="profile">
      <div class="active-profile-row">
        <div class="title active-profile-expander">
          <i class="expandable-indicator" ng-show="profile.count"></i>
        </div>
        <div class="title active-profile-icon">
          <i class="icon-book"></i>
        </div>
        <div class="title active-profile-name">
          <a href="" ng-click="showProfile(profile)">{{profile.id}}</a> / {{profile.versionId}}
        </div>
        <div class="active-profile-count"
             title="Current number of instances of this profile. Click to create more containers">
          <a href="" ng-click="createRequiredContainers(profile)">
            <span class="badge {{profile.requireStyle}}">
              {{profile.count}}
            </span>
            <i class="icon-plus clickable" title="Create more containers of this profile"></i>
          </a>
        </div>

        <div class="active-profile-requirements">
          <a ng-click="editRequirements.dialogOpen(profile)">
          <span ng-show="profile.requirements.minimumInstances" class="badge"
                title="The minimum number of required instances of this profile. If you use OpenShift or run an Auto Scaler then this many instances will be created automatically.">
            {{profile.requirements.minimumInstances}}
          </span>
          </a>
        </div>

      </div>
      <div class="expandable-body">
        <ul>
          <li class="no-list" ng-repeat="container in containersForProfile(profile.id)"
              ng-show="containerMatchesFilter(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>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <script type="text/ng-template" id="addProfileRequirement">
    <div>
      <div class="modal-header">
        <h4>Add New Profile Requirements
        </h4>
      </div>
      <div class="modal-body">
        <div fabric-profile-selector="editRequirements.selectedProfiles"
             version-id="editRequirements.versionId"
             excluded-profiles="editRequirements.excludeProfiles"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-disabled="editRequirements.selectedProfiles.length == 0"
                ng-click="editRequirements.addProfileRequirementApply()"
                title="Adds the selected profiles as new requirements">
          <i class="icon-plus"></i> Add
        </button>
        <button class="btn btn-primary" ng-click="editRequirements.addProfileRequirementHide()"
                title="Closes this profile selection panel">Cancel
        </button>
      </div>
    </div>
  </script>


  <script type="text/ng-template" id="addDependentProfile">
    <div>
      <div class="modal-header">
        <h4>Add Dependencies to Profile: <b>{{editRequirements.addDependentProfileDialogProfile}}</b>
        </h4>
      </div>
      <div class="modal-body">
        <div fabric-profile-selector="editRequirements.selectedDependentProfiles"
             version-id="editRequirements.versionId"
             excluded-profiles="editRequirements.excludeDependentProfiles"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-success" ng-disabled="editRequirements.selectedDependentProfiles.length == 0"
                ng-click="editRequirements.addDependentProfileDialogApply()"
                title="Add the selected profiles as dependencies of this profile requirement">
          <i class="icon-plus"></i> Add
        </button>
        <button class="btn btn-primary" ng-click="editRequirements.addDependentProfileDialogHide()"
                title="Closes this profile selection panel">Cancel
        </button>
      </div>
    </div>
  </script>


  <script type="text/ng-template" id="addProfileRequirements">
    <div>
      <form name="requirementsForm" class="form-inline no-bottom-margin">
        <div class="modal-header">
          <h4>Edit Requirements
            <button class="btn pull-right requirement-profile-add"
                    ng-click="editRequirements.addProfileRequirementOpen()"
                    title="Add requirements for a new profile which does not currently have any containers running"><i
                    class="icon-plus"></i> Profile
            </button>
          </h4>
        </div>
        <div class="modal-body">
          <table>
            <thead>
            <th>Profile</th>
            <th title="Minimum number of instances which should be running">Minimum</th>
            <th title="Maximum number of instances">Maximum</th>
            <th title="Profiles which must be provisioned first before this profile">Dependent Profiles</th>
            </thead>
            <tbody>
            <tr ng-repeat="requirement in editRequirements.entity.profileRequirements">
              <td class="property-name">
                <i class="red clickable icon-remove" title="Removes this dependent profile"
                   ng-click="editRequirements.entity.profileRequirements.remove(requirement)"></i>
                {{requirement.profile}}
              </td>
              <td>
                <input name="minimumInstances" type="number" ng-model="requirement.minimumInstances" ng-required="false"
                       class="input-small">
              </td>
              <td>
                <input name="maximumInstances" type="number" ng-model="requirement.maximumInstances" ng-required="false"
                       class="input-small">
              </td>
              <td>
                <div ng-repeat="dependentProfile in requirement.dependentProfiles">
                  <i class="red clickable icon-remove" title="Removes this dependent profile"
                     ng-click="requirement.dependentProfiles.remove(dependentProfile)"></i>
                  <span class="dependent-profile">{{dependentProfile}}</span>
                </div>
                <i class="clickable icon-edit green"
                   ng-click="editRequirements.addDependentProfileDialogOpen(requirement)"
                   title="Add new dependent profiles to this profile"></i>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <input class="btn btn-success" ng-disabled="!requirementsForm.$valid"
                 ng-click="updateRequirements(editRequirements.entity)" value="Update">
          <input class="btn btn-primary" ng-click="editRequirements.dialog.close()" value="Cancel">
        </div>
      </form>
    </div>

  </script>

  <div modal="editRequirements.dialog.show">
    <div compile="currentPage"></div>
  </div>

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