{% load i18n %}
{% load range %}

<ul class="pagination">
  {% if page_number > 1 %}
  <li class="previous">
    <a type="button" class="btn btn-grey border border-dark" href="?page=1&limit={{ limit }}">
      &laquo;
    </a>
  </li>
  <li class="previous">
    <a type="button" class="btn btn-grey border border-dark" href="?page={{ page_number|add:-1 }}&limit={{ limit }}">
      {% trans 'Previous' %}
    </a>
  </li>
  {% endif %}

  {% if total_pages > 1 %}

  {% for p in total_pages|range_filter:page_number %}
    <li {% if p == page_number %}class="active"{% endif %}>
      <a type="button" class="btn btn-grey{% if p == page_number %}-selected{% endif %}
                  border border-dark"
       {% if p == page_number or p == "..." %}
          href="#">
       {% else %}
          href="?page={{ p }}&limit={{ limit }}">
       {% endif %}
          {{ p }}
     </a>
   </li>
   {% endfor %}
 {% endif %}

  {% if page_number < total_pages %}
  <li class="previous">
    <a type="button" class="btn btn-grey border border-dark" href="?page={{ page_number|add:+1 }}&limit={{ limit }}">
      {% trans 'Next' %}
    </a>
  </li>
  <li class="previous">
    <a type="button" class="btn btn-grey border border-dark" href="?page={{ total_pages }}&limit={{ limit }}">
      &raquo;
    </a>
  </li>
  {% endif %}
</ul>
