<style type="text/css">
  .configuration-header {
    margin: 20px 20px;
  }

  ul.configurations,
  ul.configurations li {
    list-style: none;
  }

  ul.configurations {
    margin: 0px 20px;
  }

  ul.configurations .bundle-item {
    display: list-item;
    margin-bottom: 4px;
  }

  ul.configurations li.bundle-item a {
    /*
      TODO it'd be nice to use the natural widgth here,
      but then it might be nice to use multiple columns?
    */
    width: 450px;
  }
</style>

<div class="controller-section" ng-controller="Osgi.ConfigurationsController">
  <div class="row-fluid">
    <div class="configuration-header">
      <div class="configuration-filter">
        <input type="text" class="span8 search-query" placeholder="Filter..." ng-model="filterText">
        <i class="icon-remove clickable" title="Clear filter" ng-click="filterText = ''"></i>
        <button class="btn pull-right" ng-click="addPidDialog.open()" title="Add a new configuration"><i
                class="icon-plus"></i> Configuration
        </button>
      </div>
    </div>
  </div>

  <ul class="configurations">
    <li ng-repeat='config in configurations | filter:filterText' class='{{config.class}} bundle-item'>
      <a ng-href="{{config.pidLink}}" title="{{config.description}}">
        <span class="{{config.kind.class}}" title="{{config.kind.title}}">{{config.name}}</span>
      </a>
      <ul ng-show="config.isFactory">
        <li ng-repeat="child in config.children" class='{{child.class}} bundle-item'>
          <a ng-href="{{child.pidLink}}" title="{{child.description}}">
            <span class="{{child.kind.class}}" title="{{child.kind.title}}">{{child.name}}</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>

  <div modal="addPidDialog.show" close="addPidDialog.close()" options="addPidDialog.options">
    <form name="addPidDialogForm" class="form-horizontal no-bottom-margin" ng-submit="addPid(newPid)">
      <div class="modal-header"><h4>Add New Configuration</h4></div>
      <div class="modal-body">
        <div class="control-group">
          <label class="control-label" for="newPid">New configuration ID</label>

          <div class="controls">
            <input class="input-xlarge" type="text" id="newPid" ng-model="newPid"/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <input class="btn btn-success" ng-disabled="!(newPid !== '' && newPid !== undefined)" type="submit" value="Add">
        <input class="btn btn-primary" ng-click="addPidDialog.close()" type="button" value="Cancel">
      </div>
    </form>
  </div>
</div>

