<div class="controller-section" ng-controller="Karaf.FeaturesController">

  <div class="row-fluid section-filter">
    <input type="text" class="span12 search-query" placeholder="Filter..." ng-model="filter">
    <i class="icon-remove clickable" title="Clear filter" ng-click="filter = ''"></i>
  </div>

  <script type="text/ng-template" id="popoverTemplate">
    <small>
      <table class="table">
        <tbody>
        <tr ng-repeat="(k, v) in feature track by $index" ng-show="showRow(k, v)">
          <td class="property-name">{{k}}</td>
          <td class="property-value" ng-bind-html-unsafe="showValue(v)"></td>
        </tr>
        </tbody>
      </table>
    </small>
  </script>

  <p></p>
  <div class="row-fluid">
    <div class="span6">
      <h3 class="centered">Installed Features</h3>
      <div ng-show="featuresError" class="alert alert-warning">
        The feature list returned by the server was null, please check the logs and Karaf console for errors.
      </div>
      <div class="bundle-list"
           hawtio-auto-columns=".bundle-item">
        <div ng-repeat="feature in installedFeatures"
             class="bundle-item"
             ng-show="filterFeature(feature)"
             ng-class="inSelectedRepository(feature)">
          <a ng-href="#/osgi/feature/{{feature.Id}}?p=container"
             hawtio-template-popover title="Feature details">
            <span class="badge" ng-class="getStateStyle(feature)">{{feature.Name}} / {{feature.Version}}</span>
          </a>
          <span ng-hide="hasFabric">
            <a class="toggle-action"
               href=""
               ng-show="installed(feature.Installed)"
               ng-click="uninstall(feature)">
              <i class="icon-power-off"></i>
            </a>
            <a class="toggle-action"
               href=""
               ng-hide="installed(feature.Installed)"
               ng-click="install(feature)">
              <i class="icon-play-circle"></i>
            </a>
          </span>
        </div>
      </div>
    </div>

    <div class="span6">
      <h3 class="centered">Available Features</h3>
      <div class="row-fluid repository-browser-toolbar centered">
        <select id="repos"
                class="input-xlarge"
                title="Feature repositories"
                ng-model="selectedRepository"
                ng-options="r.repository for r in repositories"></select>
        <button class="btn"
                title="Remove selected feature repository"
                ng-click="uninstallRepository()"
                ng-hide="hasFabric"><i class="icon-minus"></i></button>
        <input type="text"
               class="input-xlarge"
               placeholder="mvn:foo/bar/1.0/xml/features"
               title="New feature repository URL"
               ng-model="newRepositoryURI"
               ng-hide="hasFabric">
        <button class="btn"
                title="Add feature repository URL"
                ng-hide="hasFabric"
                ng-click="installRepository()"
                ng-disabled="isValidRepository()"><i class="icon-plus"></i></button>
      </div>
      <div class="row-fluid">
        <div class="bundle-list"
             hawtio-auto-columns=".bundle-item">
          <div ng-repeat="feature in selectedRepository.features"
               class="bundle-item"
               ng-show="filterFeature(feature)"
               hawtio-template-popover title="Feature details">
            <a ng-href="#/osgi/feature/{{feature.Id}}?p=container">
              <span class="badge" ng-class="getStateStyle(feature)">{{feature.Name}} / {{feature.Version}}</span>
            </a >
            <span ng-hide="hasFabric">
              <a class="toggle-action"
                 href=""
                 ng-show="installed(feature.Installed)"
                 ng-click="uninstall(feature)">
                <i class="icon-power-off"></i>
              </a>
              <a class="toggle-action"
                 href=""
                 ng-hide="installed(feature.Installed)"
                 ng-click="install(feature)">
                <i class="icon-play-circle"></i>
              </a>
            </span>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
