{% load i18n coop_utils %}
{% if page_obj.paginator.num_pages > 1 %}
  {% if not disable_js_patches %}
  <script>
    {%  include "coop_cms/_pagination_js.html" %}

    $(function() {
      // when page number input change
      $("li.paginate-form input").change(function() {
        window.location = patchUrl($(this).val());
      });

      // when clicking on pagination link
      $('ul.pagination li a').click(function() {
        var href = $(this).attr('href');
        var hrefArgs = getUrlVars(href);
        var page = hrefArgs.page;

        if (page && href && (href !== '#')) {
          window.location = patchUrl(page);
          return false;
        }
      });

    });
  </script>
  {% endif %}
<ul class="pagination">
    {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">&laquo;</a></li>
    {% else %}
        <li class="disabled page-item"><a class="page-link" href="#">&laquo;</a></li>
    {% endif %}

    {% for page_number in page_obj|reduced_page_range %}
      {% if page_number == 0 %}
        <li class="disabled page-item"><a  class="page-link"href="#">...</a></li>
      {% else %}
        {% if page_number == page_obj.number %}
              <li class="active page-item"><a class="page-link" href="#">{{ page_number }} <span class="sr-only">(current)</span></a></li>
          {% else %}
              <li class="page-item"><a class="page-link" href="?page={{ page_number }}">{{ page_number }}</a></li>
          {% endif %}
      {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">&raquo;</a></li>
    {% else %}
        <li class="disabled page-item"><a class="page-link" href="#">&raquo;</a></li>
    {% endif %}

    {% if page_obj.paginator.num_pages > 10 %}
    <li style="padding-left: 20px;" class="paginate-form">
      <input class="form-control" style="display: inline-block; width: 80px;" type="number" value="{{ page_obj.number }}" />
    </li>
    {% endif %}
</ul>
{% endif %}