{% 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 %}