{{ paginate }}
    {{ links_count = links:all | count }}
    <ul class="flex items-center gap-2 self-center">
        {{# Previous button #}}
        {{ if prev_page }}
            <li>
                <a class="btn btn-orange group" href="{{ prev_page }}">{{ trans:mwb.previous }}</a>
            </li>
        {{ else }}
            <li>
                <span class="btn cursor-default !border-brand-orange/20 !text-black/20 hover:!bg-none active:!bg-none">
                    {{ trans:mwb.previous }}
                </span>
            </li>
        {{ /if }}
        {{# End previous button #}}
        {{ if total_pages > 1 }}
            {{ links:all | first }}
                <li>
                    <a
                        class="btn btn-orange {{ ['!bg-brand-orange !text-white' => current_page === 1] | classes }} w-12"
                        href="{{ url }}"
                    >
                        {{ page }}
                    </a>
                </li>
            {{ /links:all }}
        {{ else }}
            <li>
                <a
                    class="btn btn-orange {{ ['!bg-brand-orange !text-white' => current_page === 1] | classes }} w-12"
                    href="{{ url }}"
                >
                    1
                </a>
            </li>
        {{ /if }}
        {{# Page buttons #}}
        {{ if (links_count > 5) }}
            {{ if current_page === 1 }}
                {{ links:all | offset(1) | limit(2) }}
                    <li>
                        <a class="btn btn-orange w-12" href="{{ url }}">
                            {{ page }}
                        </a>
                    </li>
                {{ /links:all }}
                <li class="self-end px-2"><span>...</span></li>
            {{ elseif current_page === 2 }}
                {{ links:all | offset(current_page | subtract(1)) | limit(2) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
                <li class="self-end px-2"><span>...</span></li>
            {{ elseif current_page === 3 }}
                {{ links:all | offset(current_page | subtract(2)) | limit(3) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
                <li class="self-end px-2"><span>...</span></li>
            {{ elseif (current_page > 3) && (current_page < links_count | subtract(2)) }}
                <li class="self-end px-2"><span>...</span></li>
                {{ links:all | offset(current_page | subtract(2)) | limit(3) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
                <li class="self-end px-2"><span>...</span></li>
            {{ elseif current_page === (links_count | subtract(2)) }}
                <li class="self-end px-2"><span>...</span></li>
                {{ links:all | offset(current_page | subtract(2)) | limit(3) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
            {{ elseif current_page === (links_count | subtract(1)) }}
                <li class="self-end px-2"><span>...</span></li>
                {{ links:all | offset(current_page | subtract(2)) | limit(2) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
            {{ else }}
                <li class="self-end px-2"><span>...</span></li>
                {{ links:all | offset(current_page | subtract(3)) | limit(2) }}
                    {{ partial:pagination/page_button }}
                {{ /links:all }}
            {{ /if }}
        {{ else }}
            {{ links:all | offset(1) | limit(links_count | subtract(2)) }}
                <li>
                    <a
                        class="btn btn-orange {{ ['!bg-brand-orange !text-white' => page === current_page] | classes }} w-12"
                        href="{{ url }}"
                    >
                        {{ page }}
                    </a>
                </li>
            {{ /links:all }}
        {{ /if }}
        {{# End page buttons #}}
        {{ links:all | last }}
            <li>
                <a
                    class="btn btn-orange {{ ['!bg-brand-orange !text-white' => current_page === links_count] | classes }} w-12"
                    href="{{ url }}"
                >
                    {{ page }}
                </a>
            </li>
        {{ /links:all }}
        {{# Next button #}}
        {{ if next_page }}
            <li>
                <a class="btn btn-orange group" href="{{ next_page }}">{{ trans:mwb.next }}</a>
            </li>
        {{ else }}
            <li>
                <span class="btn cursor-default !border-brand-orange/20 !text-black/20 hover:!bg-none active:!bg-none">
                    {{ trans:mwb.next }}
                </span>
            </li>
        {{ /if }}
        {{# End next button #}}
    </ul>
{{ /paginate }}