91 lines
4.7 KiB
HTML
91 lines
4.7 KiB
HTML
{% load i18n static %}
|
|
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination flex items-center justify-center space-x-2 py-4 text-sm">
|
|
{# First Page Link #}
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item rounded-md overflow-hidden">
|
|
<a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page=1{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'First' %}">
|
|
<span class="fas fa-angle-double-left" aria-hidden="true"></span>
|
|
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled rounded-md overflow-hidden">
|
|
<span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
|
|
<span class="fas fa-angle-double-left" aria-hidden="true"></span>
|
|
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Previous Page Link #}
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item rounded-md overflow-hidden">
|
|
<a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Previous' %}">
|
|
<span class="fas fa-chevron-left" aria-hidden="true"></span>
|
|
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled rounded-md overflow-hidden">
|
|
<span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
|
|
<span class="fas fa-chevron-left" aria-hidden="true"></span>
|
|
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Page Numbers #}
|
|
{% for num in page_obj.paginator.page_range %}
|
|
|
|
{% if num == 1 or num == page_obj.paginator.num_pages or num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
|
|
<li class="page-item rounded-md overflow-hidden {% if num == page_obj.number %}bg-blue-600 text-white shadow-md{% else %}bg-white text-blue-600 hover:bg-gray-100{% endif %}">
|
|
<a class="page-link block px-3 py-2 border {% if num == page_obj.number %}border-blue-600{% else %}border-gray-300{% endif %} transition-colors duration-200"
|
|
href="?page={{ num }}{% if q %}&q={{q}}{% endif %}">
|
|
{{ num }}
|
|
</a>
|
|
</li>
|
|
{% elif num == page_obj.number|add:-3 or num == page_obj.number|add:3 %}
|
|
<li class="page-item disabled rounded-md overflow-hidden">
|
|
<span class="page-link px-3 py-2 border border-gray-300 bg-white text-gray-600 cursor-default">...</span>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{# Next Page Link #}
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item rounded-md overflow-hidden">
|
|
<a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.next_page_number }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Next' %}">
|
|
<span class="fas fa-chevron-right" aria-hidden="true"></span>
|
|
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled rounded-md overflow-hidden">
|
|
<span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
|
|
<span class="fas fa-chevron-right" aria-hidden="true"></span>
|
|
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{# Last Page Link #}
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item rounded-md overflow-hidden">
|
|
<a class="page-link px-3 py-2 border border-gray-300 bg-white text-blue-600 hover:bg-gray-100 transition-colors duration-200" href="?page={{ page_obj.paginator.num_pages }}{% if q %}&q={{q}}{% endif %}" aria-label="{% trans 'Last' %}">
|
|
<span class="fas fa-angle-double-right" aria-hidden="true"></span>
|
|
|
|
</a>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item disabled rounded-md overflow-hidden">
|
|
<span class="page-link px-3 py-2 border border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed">
|
|
<span class="fas fa-angle-double-right" aria-hidden="true"></span>
|
|
|
|
</span>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|