{{ paginate }}
<div class="flex flex-wrap justify-center items-center my-8 space-x-4">
    {{ if prev_page }}
        <a href="{{ prev_page }}" class="text-primary-500 underline hover:no-underline">{{ trans key="Previous page" }}</a>
    {{ else }}
        <span class="text-gray-500">{{ trans key="Previous page" }}</span>
    {{ /if }}

    <ul class="flex flex-wrap justify-center items-center space-x-3">
        {{ links:segments }}
            {{ first }}
                {{ if page == current_page }}
                    <li class="active"><span>{{ page }}</span></li>
                {{ else }}
                    <li><a href="{{ url }}" class="text-primary-500 underline hover:no-underline">{{ page }}</a></li>
                {{ /if }}
            {{ /first }}

            {{ if slider }}
                <li class="text-gray-500"><span>...</span></li>
            {{ /if }}

            {{ slider }}
                {{ if page == current_page }}
                    <li class="active"><span>{{ page }}</span></li>
                {{ else }}
                    <li><a href="{{ url }}" class="text-primary-500 underline hover:no-underline">{{ page }}</a></li>
                {{ /if }}
            {{ /slider }}

            {{ if slider || (!slider && last) }}
                <li class="text-gray-500"><span>...</span></li>
            {{ /if }}

            {{ last }}
                {{ if page == current_page }}
                    <li class="active"><span>{{ page }}</span></li>
                {{ else }}
                    <li><a href="{{ url }}" class="text-primary-500 underline hover:no-underline">{{ page }}</a></li>
                {{ /if }}
            {{ /last }}
        {{ /links:segments }}
    </ul>

    {{ if next_page }}
        <a href="{{ next_page }}" class="text-primary-500 underline hover:no-underline">{{ trans key="Next page" }}</a>
    {{ else }}
        <span class="text-gray-500">{{ trans key="Next page" }}</span>
    {{ /if }}
</div>
{{ /paginate }}