{% load static %}
<nav class="js_resources_table_pagination" aria-label="Page navigation">
  <ul class="pagination flex-wrap justify-content-center">
    {% with info_link_class="bg-secondary bg-gradient text-white fw-bold" %}
    {% if page_info.page_scope_start > 1 %}
      <li class="page-item"><a href="#" data-to="1" class="page-link {{ info_link_class }}">First</a></li>
    {% endif %}
    {% if page_info.page_scope_start > 2 %}
    <!--<li class="page-item disabled"><a href="#" data-to="dot-dot-dot" class="page-link"><i class="bi bi-three-dots"></i></a></li>-->
    {% endif %}
    {% if page_info.current_page > 10 %}
    <li class="page-item"><a href="#" data-to="{{ page_info.current_page | add:-10 }}" class="page-link {{ info_link_class }}">-10</a></li>
    {% endif %}
    {% if page_info.current_page > 1 %}
    <li class="page-item"><a href="#" data-to="{{ page_info.current_page | add:-1 }}" class="page-link {{ info_link_class }}">-1</a></li>
    {% endif %}
    {% for page in page_info.page_list %}
      {% if page == page_info.current_page %}
	<li class="page-item active"><a href="#" data-to="{{ page }}" class="page-link">{{ page }}</a></li>
      {% else %}
	<li class="page-item"><a href="#" data-to="{{ page }}" class="page-link">{{ page }}</a></li>
      {% endif %}
    {% endfor %}
    {% if page_info.current_page < page_info.page_scope_end %}
      <li class="page-item"><a href="#" data-to="{{ page_info.current_page | add:1 }}" class="page-link {{ info_link_class }}">+1</a></li>
    {% endif %}
    {% if page_info.current_page <= page_info.total_page|add:-10 %}
    <li class="page-item"><a href="#" data-to="{{ page_info.current_page | add:10 }}" class="page-link {{ info_link_class }}">+10</a></li>
    {% endif %}
    {% if page_info.page_scope_end|add:1 < page_info.total_page %}
    <!--<li class="page-item disabled"><a href="#" data-to="dot-dot-dot" class="page-link"><i class="bi bi-three-dots"></i></a></li>-->
    {% endif %}
    {% if page_info.page_scope_end < page_info.total_page %}
    <li class="page-item"><a href="#" data-to="{{ page_info.total_page }}" class="page-link {{ info_link_class }}">Last ({{ page_info.total_page }})</a></li>
    {% endif %}
    {% endwith %}
  </ul>
</nav>
{% if noscript %}
{% else %}
<script type="application/javascript" src="{% static 'js/table_pagination.js' %}"></script>
{% endif %}