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

  <script type="text/ng-template" id="featureCellTemplate.html">
    <div class="ngCellText"
         title="">
      <a href="">{{row.entity.name}</a>
    </div>
  </script>

  <script type="text/ng-template" id="featureColumnTemplate.html">
    <div class="ngHeaderSortColumn {{col.headerClass}}"
         ng-style="{'cursor': col.cursor}"
         ng-class="{ 'ngSorted': !noSortVisible }">
      <div class="ngHeaderText" ng-hide="pageId === '/'">
        <a ng-href="{{parentLink()}}"
           class="wiki-file-list-up"
           title="Open the parent folder">
          <i class="icon-level-up"></i> Up a directory
        </a>
      </div>
    </div>
  </script>


  <div class="features fabric-page-header row-fluid">
      <div class="pull-left">
        <h2 class="inline">Edit {{profileId}} Features</h2>
      </div>
      <div class="pull-right">
        <a class="btn btn-success" href="" title="Back to main profile page" ng-click="gotoProfile(versionId, profileId)"><i class="icon-check"></i> Done</a>
        <a class="btn btn-primary" ng-disabled="deletingFeatures.length == 0 && addingFeatures.length == 0" href="" ng-click="save()"><i class="icon-save"></i> Save Changes</a>
      </div>
  </div>

  <div class="row-fluid edit-feature-lists">
    <div class="span6">

      <p ng-show="selectedRepoFeatures && selectedRepoFeatures.length > 0">
        <div class="features-toolbar">
          <div class="row-fluid">
            <div class="pull-left">
              <div class="section-filter">
                <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>
              </div>
            </div>
            <div class="pull-right">
              <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>
        </div>

        <!--
        <div style="height: 450px" ng-grid="featureGridOptions"></div>-->
        <ul class="zebra-list">
          <li class="mouse-pointer"
              ng-repeat="feature in selectedRepoFeatures"
              ng-show="filter(feature)"
              ng-class="getSelectedClass(feature)">
              <div ng-click="selectFeature(feature, $event)">
                {{feature.name}} / {{feature.version}}
              </div>
          </li>
        </ul>
      </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>
