<div class="controller-section" ng-controller="Fabric.ProfilesController">
  <div class="row-fluid">
    <div class="pull-left">
      <form class="form-inline no-bottom-margin">
        <fieldset>
          <div class="btn-group inline-block">
            <a href="" title="Create new Profile" class="btn" ng-click="createProfileDialog = true"><i class="icon-plus"></i></a>
            <a ng-href="#/wiki/branch/{{version.id}}/view/{{profilePath(selected[0].id)}}" class="btn" ng-disabled="selected.length == 0" ng-show="hasFabricWiki()"
               title="View, edit or create configuration files for the profiles in this version"><i class="icon-edit"></i></a>
            <a href="" title="Delete selected Profiles" class="btn" ng-disabled="selected.length == 0 || selectedHasContainers()" ng-click="deleteProfileDialog = true"><i class="icon-minus"></i></a>
          </div>

          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;

          <div class="control-group inline-block">
            <label for="versions">Versions: </label>
            <select id="versions" ng-model="version" ng-options="v.id for v in versions"></select>
          </div>
          <div class="btn-group inline-block">
            <a href="" title="Create new Version" class="btn" ng-click="createVersionDialog = true"><i class="icon-plus"></i></a>
            <a ng-href="#/wiki/branch/{{version.id}}/view/" class="btn" ng-show="hasFabricWiki()"
               title="View, edit or create configuration files for the profiles in this version"><i class="icon-edit"></i></a>
            <a href="" title="Delete this Version" class="btn" ng-disabled="versionCanBeDeleted()" ng-click="deleteVersionDialog = true"><i class="icon-minus"></i></a>
          </div>
          &nbsp;
        </fieldset>
      </form>
    </div>
    <div class="pull-right">
      <form class="form-inline no-bottom-margin">
        <fieldset>
          <div class="control-group inline-block">
            <label for="activeOnly" title="Only show profiles that have been applied to a container">Active only: </label>
            <input type="checkbox" id="activeOnly" name="activeOnly" ng-model="activeOnly">
          </div>
          <div class="control-group inline-block">
            <input class="search-query" type="text" ng-model="gridOptions.filterOptions.filterText" placeholder="Filter...">
          </div>
        </fieldset>
      </form>
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteVersionDialog" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteVersion()">
    <div class="dialog-body">
      <p>Delete version {{version.id}}?</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteProfileDialog" ok-button-text="Yes" cancel-button-text="No" on-ok="deleteSelected()">
    <div class="dialog-body">
      <p>Are you sure you want to delete the selected profiles:</p>
      <ol>
        <li ng-repeat="profile in selected">{{profile.id}}</li>
      </ol>
    </div>
  </div>

  <div modal="createProfileDialog">
    <form name="createProfile" class="form-horizontal no-bottom-margin" ng-submit="doCreateProfile()">
      <div class="modal-header"><h4>Create new Profile in Version {{version.id}}...</h4></div>
      <div class="modal-body">
        <label>Profile Name: </label>
        <input name="id" class="input-xlarge" type="text" ng-model="newProfileName" required ng-pattern="/^[a-zA-Z0-9_-]*$/">
        <span class="help-block" ng-show="createProfile.id.$error.required">Please enter a name for this profile</span>
        <span class="help-block" ng-show="createProfile.id.$error.pattern">Name can only contain letters, numbers, '-', and '_'</span>

        <p></p>
        <label>Select one or more parent profiles as needed: </label>
        <div class='dialogGrid' style="height: 250px;" ng-grid="createProfileGridOptions"></div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!createProfile.$valid" type="submit" value="Create">
        <input class="btn btn-primary" ng-click="createProfileDialog = false" value="Cancel">
      </div>
    </form>
  </div>

  <div modal="createVersionDialog">
    <form name="createVersion" class="form-horizontal no-bottom-margin" ng-submit="doCreateVersion()">
      <div class="modal-header"><h4>Create new Version...</h4></div>
      <div class="modal-body">
        <label>Version Name: </label>
        <input name="id" class="input-xlarge" type="text" ng-model="newVersionName" ng-pattern="/^[.a-zA-Z0-9_-]*$/">
        <span class="help-block" ng-hide="createVersion.id.$invalid">Leave blank to use the next available version number</span>
        <span class="help-block" ng-show="createVersion.id.$error.pattern">Name can only contain letters, numbers, '-', '_' and '.'</span>
        <p></p>
        <label ng-show="newVersionName != ''">Select a version to derive version {{newVersionName}} from if required, otherwise the highest version number will be the parent of version {{newVersionName}}.</label>
        <label ng-hide="newVersionName != ''">Select a version to derive the new version from if required, otherwise the highest version number will be the parent of the new version</label>
        <div class='dialogGrid' style="height: 250px;" ng-grid="createVersionGridOptions"></div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!createVersion.$valid" type="submit" value="Create">
        <input class="btn btn-primary" ng-click="createVersionDialog = false" value="Cancel">
      </div>
    </form>
  </div>

  <div class="row-fluid">
    <div class="gridStyle" ng-grid="gridOptions"></div>
  </div>
</div>
