<div class="controller-section" ng-controller="Osgi.BundleListController">
  <div class="row-fluid">

    <div class="pull-left">
      <form class="form-inline no-bottom-margin">
        <fieldset>
          <div class="btn-group inline-block">
            <a ng-href="#/osgi/bundle-list?p=container"
                    type="button"
                    class="btn active"
                    title="List view">
              <i class="icon-list"></i>
            </a>
            <a ng-href="#/osgi/bundles?p=container"
                    type="button"
                    class="btn"
                    title="Table view">
              <i class="icon-table"></i>
            </a>
          </div>

          <div class="input-append">
            <input class="input-large" type="text" placeholder="Install Bundle..." ng-model="bundleUrl">
            <button ng-disabled="installDisabled()" class="btn" ng-click="install()" title="Install"><i
                    class="icon-ok"></i></button>
          </div>
        </fieldset>
      </form>

    </div>


    <div class="pull-right">
      <select class="input-large no-bottom-margin" ng-model="display.sortField" id="sortField">
        <option value="Identifier">Sort by ID</option>
        <option value="Name">Sort by Name</option>
        <option value="SymbolicName">Sort by Symbolic Name</option>
      </select>
      <select class="input-large no-bottom-margin" ng-model="display.bundleField" id="bundleField">
        <option value="Name">Display Name</option>
        <option value="SymbolicName">Display Symbolic Name</option>
      </select>
      <input class="input-small search-query" type="number" min="0"
             ng-model="display.startLevelFilter"
             placeholder="Start Level..."/>
      <input class="input-large search-query" type="text"
             ng-model="display.bundleFilter"
             placeholder="Filter..."/>
    </div>

  </div>

  <div class="row-fluid" id="bundleTableHolder">
    <!-- Just create a bit of space between the form and the controls -->
    <p></p>

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

    <div class="bundle-list"
         hawtio-auto-columns=".bundle-item">
      <div ng-repeat="bundle in bundles"
           class="bundle-item"
           ng-show="filterBundle(bundle)"
           hawtio-template-popover title="Bundle Details">
        <a id="{{bundle.Identifier}}"
           ng-href="#/osgi/bundle/{{bundle.Identifier}}?p=container">
          <span class="badge" ng-class="getStateStyle(bundle.State)">{{getLabel(bundle)}}</span>
        </a>
      </div>
    </div>
  </div>
</div>
