<div>
  <div ng-show="loading">
    Please wait, loading profile details...
  </div>
  <div ng-hide="loading">
    <div class="fabric-page-header row-fluid">

      <div class="pull-left">
        <h2 class="inline" title="Profile: {{row.id}}">{{row.id}}</h2>
      </div>

      <div class="pull-right" ng-show="inDirective">
        <a class="btn" href="" title="Manually trigger provisioning of this profile on all associated containers" ng-click="refreshProfile(versionId, profileId)"><i class="icon-refresh"> Refresh</i></a>
        <a class="btn" href="" title="Create a new profile that is a copy of this one" ng-click="copyProfileDialog = true"><i class="icon-copy"></i> Copy</a>
        <a class="btn" ng-href="#/fabric/assignProfile?vid={{versionId}}&pid={{profileId}}" title="Assign this this profile to an existing container"><i class="icon-truck"></i> Assign</a>
        <a class="btn" ng-href="#/fabric/containers/createContainer?versionId={{versionId}}&profileIds={{profileId}}" title="Deploy this profile to a new container"><i class="icon-truck"></i> New</a>
      </div>
      <div class="pull-right" ng-hide="inDirective">
        <a class="btn" ng-href="#/fabric/containers/createContainer?versionId={{versionId}}&profileIds={{profileId}}" title="Deploy this profile to a new container"><i class="icon-truck"></i> Create Container</a>
        <a class="btn" href="" title="Create a new profile that is a copy of this one" ng-click="copyProfileDialog = true"><i class="icon-copy"></i> Copy</a>
      </div>
    </div>

    <div class="row-fluid">
      <div class="pull-left">
        <a href="#/fabric/containers?q={{profileId}}" title="View containers running this profile">
          <ng-pluralize count="row.containerCount"
                        when="{'0': 'Not assigned to any containers',
                                   'one': 'Assigned to 1 container',
                                   'other': 'Assigned to {} containers'}">
          </ng-pluralize>
        </a>
      </div>
    </div>

    <div class="row-fluid profile-details">

      <div class="span3">

        <ul class="unstyled switches">
          <li>
            <div class="switch-container">
              <label class="switch-light switch-ios" ng-click="changeAttribute('abstract', !row.abstract)">
                <input type="checkbox" ng-checked="row.abstract">
                <span>Abstract
                  <span>No</span>
                  <span>Yes</span>
                </span>
                <a></a>
              </label>
            </div>
          </li>
          <li>
            <div class="switch-container">
              <label class="switch-light switch-ios" ng-click="changeAttribute('locked', !row.locked)">
                <input type="checkbox" ng-checked="row.locked">
                <span>Locked
                  <span>No</span>
                  <span>Yes</span>
                </span>
                <a></a>
              </label>
            </div>
          </li>
        </ul>


        <dl ng-show="row.parentIds.length > 0">
          <dt>Parents:</dt>
          <dd>
            <ul class="unstyled">
              <li ng-repeat="profile in row.parentIds">
                <i class="red clickable icon-remove" title="Remove parent {{profile}}" ng-click="removeParentProfile(profile)"></i>
                <a href="#/wiki/branch/{{versionId}}/view/fabric/profiles/{{profilePath(profile)}}{{hash}}">{{profile}}</a>
              </li>
            </ul>
          </dd>
        </dl>
        <dl ng-show="row.childIds.length > 0">
          <dt>Children:</dt>
          <dd>
            <ul class="unstyled">
              <li ng-repeat="profile in row.childIds">
                <a href="#/wiki/branch/{{versionId}}/view/fabric/profiles/{{profilePath(profile)}}{{hash}}">{{profile}}</a>
              </li>
            </ul>
          </dd>
        </dl>
      </div>


      <div class="span9">

        <div class="tabbable hawtio-form-tabs" ng-model="activeTab">

          <div class="tab-pane" value="features" title="Features ({{row.features.length}})">
            <ul class="unstyled">
              <li ng-repeat="feature in row.features">
                <i class="red clickable icon-remove" title="Delete {{feature}}" ng-click="deleteThing('Feature', 'Features', row.features, feature)"></i>
                <editable-property ng-model="row.features" property="$index" on-save="updateThing('Feature', 'Features',  row.features)"></editable-property>
              </li>
              <li class="add green">
                <i class="clickable icon-edit green" ng-click="goto('/wiki/profile/{{versionId}}/{{profileId}}/editFeatures')" title="Edit features"></i>
              </li>
            </ul>
          </div>


          <div class="tab-pane" value="repos" title="Feature Repositories ({{row.repositories.length}})">
            <ul class="unstyled">
              <li ng-repeat="repository in row.repositories">
                <i class="red clickable icon-remove" title="Delete {{repository}}" ng-click="deleteThing('Feature Repository', 'Repositories', row.repositories, repository)"></i>
                <editable-property ng-model="row.repositories" property="$index" on-save="updateThing('Feature Repository', 'Repositories',  row.repositories)"></editable-property>
              </li>
              <li class="add">
                <form ng-submit="addNewThing('Feature Repository', 'Repositories', row.repositories)">
                  <span><strong>Add: </strong></span>
                  <input class="input-xxlarge" type="text" ng-model="newThingName" typeahead="name for name in doCompletionFabric($viewValue) | filter:$viewValue" typeahead-wait-ms="200">
                  <i class="clickable icon-plus green" ng-click="addNewThing('Feature Repository', 'Repositories', row.repositories)" title="Add Feature Repository"></i>
                  <span class="help-block">
                    example: "mvn:group.id/artifact.id/version/xml/features"
                  </span>
                </form>
              </li>
            </ul>
          </div>

          <div class="tab-pane" value="bundles" title="Bundles ({{row.bundles.length}})">
            <ul class="unstyled">
              <li ng-repeat="bundle in row.bundles">
                <i class="red clickable icon-remove" title="Delete {{bundle}}" ng-click="deleteThing('Bundle', 'Bundles', row.bundles, bundle)"></i>
                <a ng-href="{{mavenLink(bundle)}}">
                  <editable-property ng-model="row.bundles" property="$index" on-save="updateThing('Bundle', 'Bundles',  row.bundles)"></editable-property>
                </a>
              </li>
              <li class="add">
                <form ng-submit="addNewThing('Bundle', 'Bundles', row.bundles)">
                  <span><strong>Add: </strong></span>
                  <input class="input-xxlarge" type="text" ng-model="newThingName" typeahead="name for name in doCompletionFabric($viewValue) | filter:$viewValue" typeahead-wait-ms="200">
                  <i class="clickable icon-plus green" ng-click="addNewThing('Bundle', 'Bundles', row.bundles)" title="Add Bundle"></i>
                  <span class="help-block">
                    example: "mvn:group.id/artifact.id/version"
                  </span>
                </form>
              </li>
            </ul>
          </div>

          <div class="tab-pane" value="fabs" title="FABs ({{row.fabs.length}})">
            <ul class="unstyled">
              <li ng-repeat="fab in row.fabs">
                <i class="red clickable icon-remove" title="Delete {{fab}}" ng-click="deleteThing('Fuse Application Bundle', 'Fabs', row.fabs, fab)"></i>
                <editable-property ng-model="row.fabs" property="$index" on-save="updateThing('Fuse Application Bundle', 'Fabs',  row.fabs)"></editable-property>

              </li>
              <li class="add">
                <form ng-submit="addNewThing('Fuse Application Bundle', 'Fabs', row.fabs)">
                  <span><strong>Add: </strong></span>
                  <input class="input-xxlarge" type="text" ng-model="newThingName" typeahead="name for name in doCompletionFabric($viewValue) | filter:$viewValue" typeahead-wait-ms="200">
                  <i class="clickable icon-plus green" ng-click="addNewThing('Fuse Application Bundle', 'Fabs', row.fabs)" title="Add Fuse Application Bundle"></i>
                  <span class="help-block">
                    example: "mvn:group.id/artifact.id/version"
                  </span>
                </form>
              </li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </div>


  <div hawtio-confirm-dialog="deleteThingDialog" ok-button-text="Delete" on-ok="doDeleteThing()">
    <div class="dialog-body">
      <p>Delete {{currentThingItem}}?</p>
    </div>
  </div>


  <div hawtio-confirm-dialog="copyProfileDialog" ok-button-text="Copy" on-ok="copyProfile()">
    <div class="dialog-body">
      <p>Enter a new profile name to copy this profile to</p>
      <input type="text" ng-model="newProfileName">
    </div>
  </div>

  <div hawtio-confirm-dialog="deleteFileDialog" ok-button-text="Delete" on-ok="doDeleteFile()">
    <div class="dialog-body">
      <p>Delete file {{markedForDeletion}}?</p>

      <p>This operation cannot be undone so please be careful.</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="removeParentDialog" ok-button-text="Remove" on-ok="doRemoveParentProfile()">
    <div class="dialog-body">
      <p>Remove parent {{markedForDeletion}}?</p>
    </div>
  </div>

  <div hawtio-confirm-dialog="changeParentsDialog" title="Change {{row.id}} parent profiles..." ok-button-text="Change Parents" on-ok="doChangeParents()">
    <div class="dialog-body">
      <p>Select what profiles this profile should inherit from.</p>
      <div fabric-profile-selector="selectedParents" version-id="versionId"></div>
    </div>
  </div>

  <div modal="newFileDialog">
    <form name="newFile" class="form-horizontal no-bottom-margin" ng-submit="doCreateFile()">
      <div class="modal-header"><h4>Create new configuration file...</h4></div>
      <div class="modal-body">
        <label style="display: inline">File Name: </label>
        <input name="id" class="input-xlarge" type="text" ng-model="newFileName" required
               ng-pattern="/^[.a-zA-Z0-9_-]*$/">
        <span class="help-block" ng-show="newFile.id.$error.required">Please enter a file name</span>
        <span class="help-block" ng-show="newFile.id.$error.pattern">File name can only contain letters, numbers, '-', '_' and '.'</span>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!newFile.$valid" type="submit" value="Create">
        <input class="btn btn-primary" ng-click="newFileDialog = false" value="Cancel">
      </div>
    </form>
  </div>
  <div ng-include="'app/fabric/html/changeVersionDialog.html'"></div>
</div>


