<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">Profile: {{row.id}}</h2>
        &nbsp;
        in version: <a ng-href="#/fabric/view?cv={{versionId}}&sp={{row.id}}">{{versionId}}</a>
        &nbsp;
        <!--
        TODO : add this link back in when the overview supports filtering via active profile in the address bar
        <a href="#/fabric/containers?cv={{versionId}}&cp={{row.id}}">
        -->
        <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 class="pull-right">
        <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 ng-show="!inDirective" 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 profile-details">
      <div class="span2">
        <ul class="unstyled">
          <li>
            <strong>Abstract:</strong> {{row.abstractProfile}}
          </li>
          <li>
            <strong>Locked:</strong> {{row.locked}}
          </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>
              <li>
                <i class="clickable icon-edit" ng-click="showChangeParentsDialog()" title="Change parent profiles"></i>
            </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="span4">
        <dl>
          <dt>Features ({{row.features.length}}):</dt>
          <dd>
            <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>
                <i class="clickable icon-edit" ng-click="goto('/wiki/profile/{{versionId}}/{{profileId}}/editFeatures')" title="Edit features"></i>
              </li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>Fuse Application Bundles ({{row.fabs.length}}):</dt>
          <dd>
            <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>
                <i class="clickable icon-plus" ng-click="addNewThing('Fuse Application Bundle', 'Fabs', row.fabs)" title="Add Fuse Application Bundle"></i>
              </li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt>Bundles ({{row.bundles.length}}):</dt>
          <dd>
            <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>
                <editable-property ng-model="row.bundles" property="$index" on-save="updateThing('Bundle', 'Bundles',  row.bundles)"></editable-property>
              </li>
              <li>
                <i class="clickable icon-plus" ng-click="addNewThing('Bundle', 'Bundles', row.bundles)" title="Add Bundle"></i>
              </li>
            </ul>
          </dd>
        </dl>
      </div>
      <div class="span6">
        <dl>
          <dt>Feature Repositories ({{row.repositories.length}}):</dt>
          <dd>
            <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>
                <i class="clickable icon-plus" ng-click="addNewThing('Feature Repository', 'Repositories', row.repositories)" title="Add Feature Repository"></i>
              </li>
            </ul>
          </dd>
        </dl>
        <!--
        <dl ng-hide="inDirective">
          <dt ng-hide="configFolderLink">
            Configuration Files ({{row.configurations.length}})
          </dt>
          <dd ng-hide="configFolderLink">
            <ul class="unstyled">
              <li ng-repeat="configuration in row.configurations">
                <i ng-click="deleteFile(configuration)" title="Delete {{configuration}}" class="clickable red icon-remove"></i>
                <a href="#/fabric/profile/{{versionId}}/{{profileId}}/{{configuration}}">{{configuration}}</a>
              </li>
              <li>
                <i class="clickable icon-plus" ng-click="newFileDialog = true" title="Create new configuration file"></i>
              </li>
            </ul>
          </dd>
          <dd ng-show="configFolderLink" class="file-list">
            <div wiki-file-list branch="{{versionId}}" page-id="/fabric/profiles/{{row.id}}" caption="Configuration Files ({{row.configurations.length}}):"></div>
          </dd>
        </dl>
        -->
      </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="addThingDialog" ok-button-text="Add" on-ok="doAddThing()" title="Add {{thingName}}...">
    <div class="dialog-body">
      <p>Enter a new {{thingName}} to add to this profile</p>
      <input type="text" ng-model="newThingName">
    </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>
