73 lines
4.1 KiB
HTML
73 lines
4.1 KiB
HTML
{% load url_extras i18n %}
|
|
{% if page_obj.has_other_pages %}
|
|
<nav aria-label="Page navigation" class="mt-6">
|
|
<div class="flex items-center justify-center gap-2">
|
|
|
|
{# Get the filter parameters (e.g., "q=searchterm&job=dev") #}
|
|
{% add_get_params request.GET as filter_params %}
|
|
|
|
{# --- First & Previous --- #}
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page=1{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
|
|
aria-label="{% trans 'First page' %}">
|
|
<i data-lucide="chevrons-left" class="w-4 h-4"></i>
|
|
</a>
|
|
<a href="?page={{ page_obj.previous_page_number }}{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
|
|
aria-label="{% trans 'Previous page' %}">
|
|
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{# --- Page Numbers --- #}
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if page_obj.number == num %}
|
|
<span class="inline-flex items-center justify-center w-10 h-10 bg-temple-red text-white font-semibold rounded-lg">
|
|
{{ num }}
|
|
</span>
|
|
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
|
|
<a href="?page={{ num }}{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition">
|
|
{{ num }}
|
|
</a>
|
|
{% elif num == 1 or num == page_obj.paginator.num_pages %}
|
|
{# Always show first and last page number #}
|
|
<a href="?page={{ num }}{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition">
|
|
{{ num }}
|
|
</a>
|
|
{% elif num == page_obj.number|add:'-3' or num == page_obj.number|add:'3' %}
|
|
{# Show ellipsis #}
|
|
<span class="inline-flex items-center justify-center w-10 h-10 text-gray-400">
|
|
...
|
|
</span>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{# --- Next & Last --- #}
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
|
|
aria-label="{% trans 'Next page' %}">
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
<a href="?page={{ page_obj.paginator.num_pages }}{% if filter_params %}&{{ filter_params }}{% endif %}"
|
|
class="inline-flex items-center justify-center w-10 h-10 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-temple-red transition"
|
|
aria-label="{% trans 'Last page' %}">
|
|
<i data-lucide="chevrons-right" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{# Page info #}
|
|
<div class="text-center mt-3 text-sm text-gray-500">
|
|
{% blocktrans %}Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}{% endblocktrans %}
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script> |