<form role="form">
  <div class="form-group finder-form">
    <div class="finder-form-options">
      <a class="small" ng-click="finder.manageObjects(finder.properties.name)">manage {{finder.properties.nouns}}</a>
    </div>
    <div class="clearfix visible-xs-block"></div>
    <input
      input-focus
      ng-model="filter"
      ng-attr-placeholder="{{finder.properties.noun}} Filter"
      ng-keydown="finder.filterKeyDown($event)"
      class="form-control"
      name="filter"
      type="text" />

    <span class="finder-hit-count"><strong>{{finder.hitCount}}</strong> {{finder.hitCountNoun()}}</span>
  </div>
</form>
<paginate list="finder.hits" per-page="5">
  <ul
    class="list-group list-group-menu"
    ng-class="{'select-mode': finder.selector.enabled}">

    <li
      class="list-group-item list-group-menu-item"
      ng-class="{'active': finder.selector.index === $index && finder.selector.enabled}"
      ng-repeat="hit in page"
      ng-keydown="finder.hitKeyDown($event, page, paginate)"
      ng-click="finder.onChoose(hit, $event)">

      <a
        ng-href="{{finder.makeUrl(hit)}}"
        ng-blur="finder.hitBlur($event)"
        ng-click="finder.preventClick($event)">

        <i aria-hidden="true" class="fa" ng-if="hit.icon" ng-class="hit.icon"></i> {{hit.title}}
        <p ng-if="hit.description" ng-bind="hit.description"></p>
      </a>
    </li>
    <li
      class="list-group-item list-group-no-results"
      ng-if="finder.hits.length === 0">
      <p ng-bind="'No matching ' + finder.properties.nouns + ' found.'"></p>
    </li>
  </ul>
</paginate>