2022-01-27 14:03:27 +00:00
|
|
|
{% 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 %}"
|
2022-02-01 16:17:01 +00:00
|
|
|
href='{{ paginator.base_url }}{{pager}}/' aria-label="Goto page {{pager}}">
|
2022-01-27 14:03:27 +00:00
|
|
|
{{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 %}
|
