{% set sorting_direction = "asc" if session["users_sorting"][1] == False else "desc" %}
{% set sorting_attr = session["users_sorting"][0] %}

<tr id="system-users-table-navigation-row">
  <td class="table-navigation" colspan="2">
    <div class="grid-space-between">
      <div>
        <select name="page_size" data-loading-disable form="system-users-table-search" _="on change trigger submit on #system-users-table-search">
          <option {{ "selected" if data.page_size == 1 }} value="1">1</option>
          <option {{ "selected" if data.page_size == 5 }} value="5">5</option>
          <option {{ "selected" if data.page_size == 10 }} value="10">10</option>
          <option {{ "selected" if data.page_size == 20 }} value="20">20</option>
          <option {{ "selected" if data.page_size == 50 }} value="50">50</option>
          <option {{ "selected" if data.page_size == 100 }} value="100">100</option>
        </select>
        <small>Items per page</small>
      </div>
      <div {{ "hidden" if data.elements == 0 }}>
        <select name="page" data-loading-disable form="system-users-table-search" _="on change trigger submit on #system-users-table-search">
        {% for page in range(1, data.pages + 1) %}
          <option {{ "selected" if page == data.page }} value="{{ page }}">{{ page }} / {{ data.pages }}</option>
        {% endfor %}
        </select>
        <small>Page</small>
      </div>
    </div>
    <div class="grid-space-between">
      <div _="on click from <.paging:not(.disabled)/> in me set value of <[name='page']/> in closest <tr/> to target's @data-value then trigger submit on #system-users-table-search end">
        <code class="paging {{ "disabled" if data.page <= 1 else "pointer" }}" data-value="1">❰❰</code>
        <code class="paging {{ "disabled" if data.page <= 1 else "pointer" }}" data-value="{{ data.page - 1 }}">❬</code>
        <code class="paging {{ "disabled" if data.page == data.pages else "pointer" }}" data-value="{{ data.page + 1 }}">❭</code>
        <code class="paging {{ "disabled" if data.page == data.pages else "pointer" }}" data-value="{{ data.pages }}">❱❱</code>
      </div>
      <div>
        <b><span id="users-count">{{- data.page_size if data.elements >= data.page_size else data.elements -}}/{{- data.elements -}}</span></b> elements
      </div>
    </div>
    <br>
    <div>
      {% for attribute in ["login", "created", "updated"] %}
      <button class="sorting {{ "secondary outline" if sorting_attr != attribute }}" data-loading-disable
              type="submit"
              form="system-users-table-search"
              name="sorting"
              value="{{ attribute }}:{{ "desc" if (sorting_direction == "asc" and sorting_attr == attribute) else "asc" }}">
                {{ attribute|capitalize }} {% if sorting_attr == attribute %}{{ "[A-Z]" if sorting_direction == "asc" else "[Z..A]" }}{% endif %}
      </button>
      {% endfor %}
    </div>
  </td>
</tr>