{% if loadPages is defined and dataQuery is defined and page is defined %}
    {% if (loadPages > 1) %}
        {% set entity = SingleEntity %}
        <ul class="pagination" data-page="{{ page }}" data-pages="{{ loadPages }}">
            {% if (page > 1) %}
                {# prev button if page > 1 #}
                {# active parameters: null #}
                {% if (searchParam == '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page - 1) : '' }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page - 1) : '' }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                {# prev button if page > 1 #}
                {# active parameters: category, order #}
                {% if (searchParam == '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page - 1) : '' }}?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page - 1) : '' }}?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}

                {# prev button if page > 1 #}
                {# active parameters: search #}
                {% if (searchParam != '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page - 1) : '' }}?search_{{ entity }}={{ searchParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page - 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}

                {# prev button if page > 1 #}
                {# active parameters: search, category, order #}
                {% if (searchParam != '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page - 1) : '' }}?search_{{ entity }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' back-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page - 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-left-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endif %}

            {# buttons pages < 5 #}

            {% for index, singlePage in 1..(total / perPage)|round(0, 'ceil') %}
                {% if (index < 5) %}
                    {% if (singlePage <= loadPages) %}
                        {% if (dataQuery is empty) %}
                            {% if subdomain is not defined %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/list/{{ singlePage }}">{{ singlePage }}</a>
                                </li>
                             {% else %}
                                 <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                     <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}">{{ singlePage }}</a>
                                 </li>
                             {% endif %}
                        {% endif %}

                        {% if (searchParam == '' and categoryParam != '' and orderParam != '') %}
                            {% if subdomain is not defined %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/list/{{ singlePage }}?category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                </li>
                            {% else %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}?category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                </li>
                            {% endif %}
                        {% endif %}

                        {% if (searchParam != '' and categoryParam == '' and orderParam == '') %}
                            {% if subdomain is not defined %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/list/{{ singlePage }}?search_{{ entity }}={{ searchParam }}">{{ singlePage }}</a>
                                </li>
                            {% else %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}">{{ singlePage }}</a>
                                </li>
                            {% endif %}
                        {% endif%}

                        {% if (searchParam != '' and categoryParam != '' and orderParam != '') %}
                            {% if subdomain is not defined %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/list/{{ singlePage }}?search_{{ entity }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                </li>
                            {% else %}
                                <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                    <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                </li>
                            {% endif %}
                        {% endif%}
                    {% endif %}
                {% endif %}
            {% endfor %}

            {# buttons pages >= 5 #}

            {% if (loadPages >= 5) %}
                <div class="expand" onclick="extendResults()">{{ '...' }}</div>
                <div class="expand-container{{ (page > 5) ? 'expand-container-show' : ''}}">
                    {% for index, singlePage in 1..(total / perPage)|round(0, 'ceil') %}
                        {% if (index >= 5) %}
                            {% if (singlePage <= loadPages) %}
                                {% if (dataQuery is empty) %}
                                    {% if subdomain is not defined %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/list/{{ singlePage }}">{{ singlePage }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}">{{ singlePage }}</a>
                                        </li>
                                    {% endif %}
                                {% endif %}

                                {% if (categoryParam != '' and orderParam != '') %}
                                    {% if subdomain is not defined %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/list/{{ singlePage }}/?category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}/?category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% endif %}
                                {% endif %}

                                {% if (searchParam != '' and categoryParam == '' and orderParam == '') %}
                                    {% if subdomain is not defined %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/list/{{ singlePage }}?search_{{ entity }}={{ searchParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% endif %}
                                {% endif%}

                                {% if (searchParam != '' and categoryParam != '' and orderParam != '') %}
                                    {% if subdomain is not defined %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/list/{{ singlePage }}?search_{{ entity }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% else %}
                                        <li class="page{{ (page == singlePage) ? ' page-active' : '' }}">
                                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ singlePage }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">{{ singlePage }}</a>
                                        </li>
                                    {% endif %}
                                {% endif%}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}

            {% if (page == 1) %}
                {# next button if page == 1 #}
                {# active parameters: null #}
                {% if (searchParam == '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page == 1) ? (page + 1) : '' }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page == 1) ? (page + 1) : '' }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                {# next button if page == 1 #}
                {# active parameters: category, order #}
                {% if (searchParam == '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page == 1) ? (page + 1) : '' }}?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page == 1) ? (page + 1) : '' }}?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                {# next button if page == 1 #}
                {# active parameters: search #}
                {% if (searchParam != '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page == 1) ? (page + 1) : '' }}?search_{{ entity }}={{ searchParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page == 1) ? (page + 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                {# next button if page == 1 #}
                {# active parameters: search, category, order #}
                {% if (searchParam != '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page == 1) ? (page + 1) : '' }}?search_{{ entity }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page == 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page == 1) ? (page + 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endif %}

            {% if (page > 1) %}
                {# next button if page > 1 #}
                {# active parameters: null #}
                {% if (searchParam == '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page + 1) : '' }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page + 1) : '' }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
                {# next button if page > 1 #}
                {# active parameters: category, order #}
                {% if (searchParam == '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page + 1) : '' }}/?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page + 1) : '' }}/?category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}

                {# next button if page > 1 #}
                {# active parameters: search #}
                {% if (searchParam != '' and categoryParam == '' and orderParam == '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page + 1) : '' }}?search_{{ entity }}={{ searchParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page + 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}

                {# next button if page > 1 #}
                {# active parameters: search, category, order #}
                {% if (searchParam != '' and categoryParam != '' and orderParam != '') %}
                    {% if subdomain is not defined %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/list/{{ (page > 1) ? (page + 1) : '' }}?search_{{ entity }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% else %}
                        <li class="page{{ (page > 1) ? ' next-enabled' : '' }}">
                            <a href="/{{ entity }}/{{ entityId }}/{{ subdomain }}/{{ (page > 1) ? (page + 1) : '' }}?search_{{ entity }}_{{ subdomain }}={{ searchParam }}&category={{ categoryParam }}&order={{ orderParam }}">
                                <span class="arrow-pagination-right-icon"></span>
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            {% endif %}
        </ul>
    {% endif %}
{% endif %}

<script>
    const pagination = document.querySelector(".pagination");
    const backEnabledBtn = document.querySelector(".back-enabled");
    const nextEnabledBtn = document.querySelector(".next-enabled");

    function extendResults() {
        var element = document.querySelector(".expand-container");
        element.classList.toggle("expand-container-show");
    }

    if (pagination.dataset.page == 1) {
        backEnabledBtn.remove();
    }

    if (pagination.dataset.page == pagination.dataset.pages) {
        nextEnabledBtn.remove();
    }
</script>