{% load i18n spider_paging %}
{% list_parameters "search" as cur_search %}
{% get_searchpath as searchpath %}
<data hidden="hidden" property="spkc:pages.num_pages" datatype="xsd:positiveInteger">{{page_obj.paginator.num_pages}}</data>
<data hidden="hidden" property="spkc:pages.size_page" datatype="xsd:positiveInteger">{{page_obj.paginator.per_page}}</data>
<data hidden="hidden" property="spkc:pages.current_page" datatype="xsd:positiveInteger">{{page_obj.number}}</data>
<div class="">
  <form class="" method="POST" action="{{searchpath}}">
    {% csrf_token %}
    <div style="white-space: nowrap;">
      <span style="display:inline-block; {% if cur_search %}width:70%{% else %}width:80%{% endif %}">
        <select name="search" id="search_field_list_footer" multiple="multiple">
          {% if request.is_special_user and "_unlisted" not in cur_search %}
            <option value="_unlisted">_unlisted</option>
          {% endif %}
          {% for elem in cur_search %}
            <option selected="selected" value="{{elem}}">{{elem}}</option>
          {% endfor %}
        </select>
      </span>
      <button class="w3-button w3-gray" style="vertical-align: top;" aria-label="{% trans 'Search' %}"><i class="fas fa-search" aria-hidden="true"></i></button>
      {# for clearing search #}
      {% if cur_search %}
        <button class="w3-button w3-gray" style="vertical-align: top;" form="list_clear_form" aria-label="{% trans 'clear' %}">X</button>
      {% endif %}
    </div>
    <div class="w3-text-grey w3-padding">
      <small>
        {% blocktrans trimmed %}
          Use ! to negate. Use !! to start a search tag with !. Press Enter to confirm tag. The button with the magnifying glass on the right starts the search.<br/>
          Use _ to start strict search. Escape with __.<br/>
          Use !_ to start negated strict search.
        {% endblocktrans %}
        {% if request.is_special_user %}
        <br/>{% blocktrans trimmed %}
          Use _unlisted to list/search "unlisted" marked content.
        {% endblocktrans %}{% endif %}
      </small>
    </div>
  </form>
  <form hidden="hidden" id="list_clear_form" method="POST" action="{{searchpath}}">
    {% csrf_token %}
  </form>
</div>
{% if page_obj.paginator.num_pages > 1 %}
  <form class="w3-center" style="white-space: nowrap; margin-top:40px" method="POST">
    {% csrf_token %}
    <select hidden="hidden" name="search" multiple="multiple">
      {% for elem in cur_search %}
        <option selected="selected" value="{{elem}}">{{elem}}</option>
      {% endfor %}
    </select>

    {% if page_obj.has_previous %}
      <button type="submit" class="w3-button w3-gray" formaction="{% get_searchpath 1 %}" >&laquo; first</button>
      <button type="submit" class="w3-button w3-gray" formaction="{% get_searchpath page_obj.previous_page_number %}" >{% trans "previous" %}</button>
    {% endif %}

    <span class="current">
      {% blocktrans trimmed with page=page_obj.number num_pages=page_obj.paginator.num_pages %}
        Page {{ page }} of {{ num_pages }}.
      {% endblocktrans %}
    </span>

    {% if page_obj.has_next %}
      <button type="submit" class="w3-button w3-gray" formaction="{% get_searchpath page_obj.next_page_number %}">next</button>
      <button type="submit" class="w3-button w3-gray" formaction="{% get_searchpath page_obj.paginator.num_pages %}">last &raquo;</button>
    {% endif %}
  </form>
{% endif %}

<script>
document.addEventListener("DOMContentLoaded", function(){
  $("#search_field_list_footer").selectize({
    create: true,
    placeholder: '{% trans "Search" %}',
    delimiter: null,
    plugins: {
      'remove_button': {}
    }
  });
});
</script>
