<div class="header">
  <div class="title">
    <h1 translate>Search results</h1>
  </div>
</div>

<div class="details">
  <form class="input-group" ng-submit="search()">
    <input type="text" ng-change="search()" ng-model="searchquery" class="form-control">
    <span class="input-group-btn">
      <button type="submit" class="btn btn-default" translate>Search</button>
    </span>
  </form>

  <div class="searchfilter spacer-top">
    <label ng-repeat="filter in results | orderBy: 'weight'" class="checkbox-inline"
      ng-click="filter.checked = !filter.checked">
      <i class="fa" ng-class="filter.checked ? 'fa-check-square-o' : 'fa-square-o'"></i>
      {{ filter.verboseName | translate }}
    </label>
  </div>

  <div class="searchresults spacer-top-lg">
    <div ng-show="results">
      <div ng-repeat="result in results | orderBy: 'weight'" ng-if="result.checked && result.elements.length">
        <h3>{{ result.verboseName | translate }}</h3>
        <div class="hits">
          {{ result.elements.length}} <translate>results</translate>
        </div>
        <ol class="list-unstyled">
          <li ng-repeat="element in result.elements">
            <a ng-if="!element.mediafileUrl" ui-sref="{{ result.urlDetailState }}({id: {{element.id}}})">
              {{ element.getSearchResultName() }}
            </a>
            <a ng-if="element.mediafileUrl" href="{{ element.mediafileUrl }}" target="_blank">
              {{ element.getSearchResultName() }}
            </a>
        </ol>
      </div>
    </div>
    <p ng-show="!results || results.length == 0" translate>No results.</p>

</div>
