garagehq.deuxfleurs.fr/templates/partials/shared/paginator.html

40 lines
No EOL
2.2 KiB
HTML

{% if paginator.previous or paginator.next %}
<section class="section">
<div class="container max-w-5xl mx-auto flex items-center justify-center">
<nav class="pagination flex items-center my-12 text-garage-gray" role="navigation" aria-label="pagination">
{% if paginator.previous %}
<a class="flex items-center justify-center space-x-2 hover:text-garage-orange"
href='{{ paginator.previous }}' {% if not paginator.previous %}disabled{% endif %}>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
</svg>
<span>Prev</span>
</a>
{% endif %}
<ul class="flex space-x-4 px-4">
{% for pager in range(start=1, end=paginator.number_pagers+1) %}
<li>
<a class="font-semibold inline-flex items-center justify-center h-7 w-7 rounded hover:shadow hover:bg-garage-orange bg-garage-gray bg-opacity-20 border-b-2 {% if paginator.current_index == pager %}border-garage-orange{% else %}border-transparent{% endif %}"
href='{{ paginator.base_url }}{{pager}}' aria-label="Goto page {{pager}}">
{{pager}}
</a>
</li>
{% endfor %}
</ul>
{% if paginator.next %}
<a class="flex items-center justify-center space-x-2 hover:text-garage-orange" href='{{ paginator.next }}'
{% if not paginator.next %}disabled{% endif %}>
<span>Next</span>
<svg class="mt-0.5 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
</path>
</svg>
</a>
{% endif %}
</nav>
</div>
</section>
{% endif %}