<form
  role="form"
  class="kuiVerticalRhythm"
>
  <div class="kuiBar">
    <div class="kuiBarSection">
      <div class="kuiSearchInput fullWidth">
        <div class="kuiSearchInput__icon kuiIcon fa-search"></div>
        <input
          class="kuiSearchInput__input"
          input-focus
          disable-input-focus="disableAutoFocus"
          ng-model="filter"
          ng-attr-placeholder="{{ finder.properties.nouns | label }} Filter..."
          ng-keydown="finder.filterKeyDown($event)"
          name="filter"
          type="text"
          autocomplete="off"
          data-test-subj="savedObjectFinderSearchInput"
        >
      </div>
    </div>

    <div class="kuiBarSection">
      <p class="kuiText kuiSubduedText"
        i18n-id="common.ui.savedObjectFinder.pageItemsFromHitCountDescription"
        i18n-default-message="{pageFirstItem}-{pageLastItem} of {hitCount}"
        i18n-values="{pageFirstItem, pageLastItem, hitCount: finder.hitCount}"
      ></p>
      <div class="kuiButtonGroup">
        <button
          class="kuiButton kuiButton--primary"
          ng-if="onAddNew"
          ng-click="onAddNew()"
          data-test-subj="addNewSavedObjectLink"
          i18n-id="common.ui.savedObjectFinder.addNewItemButtonLabel"
          i18n-default-message="Add new {item}"
          i18n-values="{item: finder.properties.noun}"
          i18n-description="{item} can be a type of object in Kibana, like 'visualization', 'dashboard', etc"
        ></button>

        <button
          class="kuiButton kuiButton--secondary"
          ng-if="!useLocalManagement"
          ng-click="finder.manageObjects(finder.properties.name)"
          i18n-id="common.ui.savedObjectFinder.manageItemsButtonLabel"
          i18n-default-message="Manage {items}"
          i18n-values="{items: finder.properties.nouns}"
          i18n-description="{items} can be a type of object in Kibana, like 'visualizations', 'dashboards', etc"
        ></button>
      </div>
    </div>
  </div>
</form>

<paginate
  list="finder.hits"
  per-page="20"
  class="kuiVerticalRhythm"
>
  <button
    class="paginate-heading list-group-item list-sort-button"
    ng-click="finder.sortHits(finder.hits)"
    aria-live="assertive"
  >
    <span class="euiScreenReaderOnly"
      i18n-id="common.ui.savedObjectFinder.sortByButtonLabelScreenReaderOnly"
      i18n-default-message="Sort by"
    ></span>
    <span
      i18n-id="common.ui.savedObjectFinder.sortByButtonLabel"
      i18n-default-message="Name"
    ></span>
    <span
      class="fa"
      ng-class="finder.isAscending ? 'fa-caret-up' : 'fa-caret-down'"
    >
      <span class="euiScreenReaderOnly"
        ng-if="finder.isAscending"
        i18n-id="common.ui.savedObjectFinder.sortByButtonLabeAscendingScreenReaderOnly"
        i18n-default-message="ascending"
      ></span>
      <span class="euiScreenReaderOnly"
        ng-if="!finder.isAscending"
        i18n-id="common.ui.savedObjectFinder.sortByButtonLabeDescendingScreenReaderOnly"
        i18n-default-message="descending"
      ></span>
    </span>
  </button>
  <ul class="li-striped 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)">
          <span aria-hidden="true" class="finder-type fa" ng-if="hit.icon" ng-class="hit.icon"></span>
          <div class="kuiIcon fa-flask ng-scope" ng-if="hit.type.shouldMarkAsExperimentalInUI()"></div>
          <span>{{hit.title}}</span>
          <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 i18n-id="common.ui.savedObjectFinder.noMatchesFoundDescription"
        i18n-default-message="No matching {items} found."
        i18n-values="{items: finder.properties.nouns}"
        i18n-description="{items} can be a type of object in Kibana, like 'visualizations', 'dashboards', etc"
      ></p>
    </li>
  </ul>
</paginate>
