{# Based on https://pimcore.com/docs/pimcore/current/Development_Documentation/Objects/Working_with_PHP_API.html#page_Working-with-Knp-Component-Pager-Paginator #}<nav aria-label="Pagination"> <ul class="flex items-center justify-center gap-4"> <li> <a class="shrink-0 w-[50px] h-[50px] border-2 rounded-full border-blue-500 flex items-center justify-center {% if paginationVariables.previous is defined %} opacity-100 {% else %} opacity-40 {% endif %}" {% if paginationVariables.previous is defined %} href="{{ pimcore_url({'page': paginationVariables.previous}) | trimUrl }}" {% endif %} aria-label="Previous" > <span aria-hidden="true"></span> <svg class="w-4 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path fill="#0072BB" fill-rule="evenodd" d="M15.106 6.883H3.396l3.218 3.218a.885.885 0 1 1-1.252 1.252L.707 6.695a1 1 0 0 1 0-1.414L5.362.626a.885.885 0 1 1 1.252 1.252L3.396 5.095h11.71a.894.894 0 0 1 0 1.788Z"></path></svg> </a> </li> <li class="text-center"> {{ paginationVariables.current }} {{ 'pagination-range' | trans }} {{ paginationVariables.last }} </li> <li> <a class="shrink-0 w-[50px] h-[50px] border-2 rounded-full border-blue-500 flex items-center justify-center {% if paginationVariables.next is defined %} opacity-100 {% else %} opacity-40 {% endif %}" {% if paginationVariables.next is defined %} href="{{ pimcore_url({ page: paginationVariables.next }) | trimUrl }}" {% endif %} aria-label="Next" > <span class="flip" aria-hidden="true"></span> <svg class="w-4 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path fill="#0072BB" fill-rule="evenodd" d="M.894 5.095h11.71L9.386 1.878A.885.885 0 1 1 10.638.626l4.655 4.656a1 1 0 0 1 0 1.414l-4.655 4.656A.885.885 0 1 1 9.386 10.1l3.218-3.217H.894a.894.894 0 0 1 0-1.788Z"></path></svg> </a> </li> </ul></nav>