{% load entity_renderer %}
<div class="entity-search-results__header">
  <div class="entity-search-results__header-results" id="entity-search-response-header">
    <h4>Results</h4>
    <p>{{ page_obj.start_index|stylise_number }}-{{ page_obj.end_index|stylise_number }} of over {{ page_obj.paginator.count|stylise_number }}</p>
  </div>
  <div class="entity-search-results__header-modifiers">
    <div class="selection-group">
      <p class="selection-group__title">Order By:</p>
      <select id="order-by-filter" placeholder-text="By Relevance" data-element="dropdown" data-controller="filter" data-field="order_by" data-class="option">
        <option value="1" class="dropdown-selection__list-item" selected>Relevance</option>
        <option value="2" class="dropdown-selection__list-item">Created (Asc)</option>
        <option value="3" class="dropdown-selection__list-item">Created (Desc)</option>
        <option value="4" class="dropdown-selection__list-item">Updated (Asc)</option>
        <option value="5" class="dropdown-selection__list-item">Updated (Desc)</option>
      </select>
    </div>
    <div class="selection-group">
      <p class="selection-group__title">Results Per Page:</p>
      <select id="page-size-filter" placeholder-text="20" data-element="dropdown" data-controller="filter" data-field="page_size" data-class="option">
        <option value="1" class="dropdown-selection__list-item" selected>20</option>
        <option value="2" class="dropdown-selection__list-item">50</option>
        <option value="3" class="dropdown-selection__list-item">100</option>
      </select>
    </div>
  </div>
</div>
<div class="entity-search-results__container" id="entity-search-response-content">
  {% render_entity_cards %}
  {% endrender_entity_cards %}
</div>