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

  <div class="fabric-page-header row-fluid">
      <div class="pull-left">
        <h2 class="inline">Profile: {{profileId}} : Features</h2>
      </div>
      <div class="pull-right">
        <a class="btn" ng-disabled="deletingFeatures.length == 0 && addingFeatures.length == 0" href="" ng-click="save()"><i class="icon-save"></i> Save</a>
      </div>
  </div>

  <div class="row-fluid">
    <p></p>
    <div class="span12">
      <form class="form-horizontal">
        <fieldset>
          <div class="control-group">
            <label class="control-label">Feature Repository: </label>
            <div class="controls">
              <select class="span9" ng-model="selectedRepoId" ng-options="repoId for repoId in repoIds"></select>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>

  <div class="row-fluid">
    <div class="span12">
      <p>
        <strong>Name: </strong>{{selectedRepoName}}
      </p>

      <p ng-show="selectedRepoRepos && selectedRepoRepos.length > 0">
        <h6>Feature Repositories</h6>
        <ul>
          <li style="display: block" ng-repeat="repo in selectedRepoRepos">{{repo}}</li>
        </ul>

      </p>

    </div>
  </div>

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

      <p ng-show="selectedRepoFeatures && selectedRepoFeatures.length > 0">
        <div class="features-toolbar">
          <h6>Features</h6>
          <input type="text" class="search-query" placeholder="Filter..." ng-model="featureGridOptions.filterOptions.filterText">
          <i class="icon-remove clickable" title="Clear Filter" ng-click="featureGridOptions.filterOptions.filterText = ''"></i>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="" class="btn" ng-click="addSelectedFeatures(false)" ng-disabled="selectedRepoSelectedFeatures.length == 0"><i class="icon-plus"></i> Add</a>
          <a href="" class="btn" ng-click="addSelectedFeatures(true)" ng-disabled="selectedRepoSelectedFeatures.length == 0"><i class="icon-plus"></i> Add With Version</a>
        </div>

        <div style="height: 450px" ng-grid="featureGridOptions"></div>
      </p>


    </div>

    <div class="span6">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Profile Features<th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="feature in profileFeatures">
            <td ng-class="getClass(feature)">
              <span ng-class="getClass(feature)">{{feature.id}}</span>
              <span class="remove">
                <i ng-hide="feature.deleting" class="icon-remove clickable red" ng-click="removeFeature(feature)"></i>
                <i ng-show="feature.deleting" class="icon-plus clickable green" ng-click="removeFeature(feature)"></i>
              </span></td>
          </tr>
        </tbody>
      </table>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Inherited Features<th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="feature in parentFeatures">
            <td>{{feature.id}}</td>
          </tr>
        </tbody>
      </table>

    </div>

  </div>

</div>
