{% set defaultButtonClasses = 'bg-white-primary w-11 h-11 pb-1 font-body flex justify-center items-center rounded-md overflow-hidden transition-colors duration-700 xs:hover:bg-mintyy-gray-ii group'  %}
{% set inactiveClasses = ' opacity-50 pointer-events-none' %}
{% set totalPages = (finalResults | length / numShownPosts) | round(0, 'ceil') %}

<div class="explore-homes-pagination-wrapper w-full flex flex-col justify-start items-start sm:mt-6 lg:mt-8 border-t sm:border-0 border-solid border-mintyy-gray-iii">
    <div class="padding-wrapper w-full p-6 sm:p-0 sm:pt-8 flex flex-row justify-between sm:justify-center items-center gap-2 sm:gap-4 lg:gap-6">
        <a href="/explore-homes?query={{ searchQuery }}&page={{ searchPage - 1 }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="back-button {{ defaultButtonClasses }} !p-0 !bg-mintyy-gray-i {{ searchPage == 1 ? inactiveClasses }}">
            <span class="sr-only">Back</span>
            {{ svg(svgPath ~ '/core/arrow-left.svg') | attr({ class: 'w-3 transition-colors duration-700 text-black-primary group-hover:text-black-pure pointer-events-none' }) }}
        </a>
        {% if totalPages > 4 %}
            {% if searchPage <= 3 %}
                {% for i in range(1, numShownPosts) %}
                    {% set additionalClasses = '' %}
                    {% if i == 3 %}
                        {% set additionalClasses = 'hidden xs:flex' %}
                    {% elseif i == 4 %}
                        {% set additionalClasses = 'hidden sm:flex' %}
                    {% elseif i >= 5 %}
                        {% set additionalClasses = 'hidden md:flex' %}
                    {% endif %}
                    <a href="/explore-homes?query={{ searchQuery }}&page={{ i }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ i | integer == searchPage | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }} {{ additionalClasses }}">
                        {{ i }}
                    </a>
                {% endfor %}
                <span class="spacer {{ defaultButtonClasses }} !w-auto xs:hover:!bg-white-primary">
                    ...
                </span>
            {% elseif searchPage >= totalPages - numShownPosts %}
                <a href="/explore-homes?query={{ searchQuery }}&page=1&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ searchPage == 1 | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }}">
                    1
                </a>
                <span class="spacer {{ defaultButtonClasses }} !w-auto xs:hover:!bg-white-primary">
                    ...
                </span>
                {% for i in range((totalPages - numShownPosts), totalPages - 1) %}
                    {% set additionalClasses = '' %}
                    {% if i == totalPages - 1 %}
                        {% set additionalClasses = 'hidden xs:flex' %}
                    {% elseif i == totalPages - 2 %}
                        {% set additionalClasses = 'hidden sm:flex' %}
                    {% elseif i <= totalPages - 3 %}
                        {% set additionalClasses = 'hidden md:flex' %}
                    {% endif %}
                    <a href="/explore-homes?query={{ searchQuery }}&page={{ i }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ i | integer == searchPage | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }} {{ additionalClasses }}">
                        {{ i }}
                    </a>
                {% endfor %}
            {% else %}
                <a href="/explore-homes?query={{ searchQuery }}&page=1&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ searchPage == 1 | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }}">
                    1
                </a>
                <span class="spacer {{ defaultButtonClasses }} !w-auto xs:hover:!bg-white-primary">
                    ...
                </span>
                {% for i in range(searchPage, searchPage + numShownPosts) %}
                    {% set additionalClasses = '' %}
                    {% if i == searchPage + 1 %}
                        {% set additionalClasses = 'hidden xs:flex' %}
                    {% elseif i == searchPage + 2 %}
                        {% set additionalClasses = 'hidden sm:flex' %}
                    {% elseif i >= searchPage + 3 %}
                        {% set additionalClasses = 'hidden md:flex' %}
                    {% endif %}
                    <a href="/explore-homes?query={{ searchQuery }}&page={{ i }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ i | integer == searchPage | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }} {{ additionalClasses }}">
                        {{ i }}
                    </a>
                {% endfor %}
                <span class="spacer {{ defaultButtonClasses }} !w-auto xs:hover:!bg-white-primary">
                    ...
                </span>
            {% endif %}
            <a href="/explore-homes?query={{ searchQuery }}&page={{ totalPages }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ totalPages | integer == searchPage | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }}">
                {{ totalPages }}
            </a>
        {% else %}
            {% for i in range(1, totalPages) %}
                <a href="/explore-homes?query={{ searchQuery }}&page={{ i }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="page-link {{ defaultButtonClasses }}{{ i | integer == searchPage | integer ? ' !bg-mintyy-gray-ii xs:hover:!bg-mintyy-gray-i' }}">
                    {{ i }}
                </a>
            {% endfor %}
        {% endif %}
        <a href="/explore-homes?query={{ searchQuery }}&page={{ searchPage + 1 }}&sort={{ sortQuery }}&filter={{ searchFilter }}&region={{ regionQuery }}&bedrooms={{ bedroomsQuery }}&bathrooms={{ bathroomsQuery }}&cars={{ carsQuery }}&homes={{ homesQuery }}" class="next-button {{ defaultButtonClasses }} !p-0 !bg-mintyy-gray-i {{ searchPage == totalPages ? inactiveClasses }}">
            <span class="sr-only">Next</span>
            {{ svg(svgPath ~ '/core/arrow-right.svg') | attr({ class: 'w-3 transition-colors duration-700 text-black-primary group-hover:text-black-pure pointer-events-none' }) }}
        </a>
    </div>
</div>