{% if pages > 1 %}
    {# the left and right key should not become 0 or higher than allowed #}
    {% if page == 1 %}{% set leftpage = 1 %}{% else %}{% set leftpage = page - 1 %}{% endif %}
    {% if page == pages %}{% set rightpage = pages %}{% else %}{% set rightpage = page + 1 %}{% endif %}

    {# the number of first and last pages to be displayed #}
    {% set extremePagesLimit = 3 %}

    {# the number of pages that are displayed around the active page #}
    {% set nearbyPagesLimit = 2 %}

    <ul id="pagination" class="pagination">
        <li class="page-item{% if page == 1 %} disabled{% endif %}">
            <a class="page-link" data-page="{{ leftpage }}"
               href="{{ url }}?{{ {'page': leftpage, 'search': search}|url_encode }}">&laquo;</a>
        </li>
        {# before #}
        {% if page > 1 %}
            {% for i in range(1, extremePagesLimit) %}
                {% if i < page - nearbyPagesLimit %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ i }}" href="{{ url }}?{{ {'page': i, 'search': search}|url_encode }}">{{ i }} <span
                                class="sr-only">(current)</span></a>
                </li>
                {% endif %}
            {% endfor %}
            {% if extremePagesLimit + 1 < page - nearbyPagesLimit %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ page }}" href="{{ url }}?{{ {'page': page, 'search': search}|url_encode }}">...
                        <span class="sr-only"></span></a>
                </li>
            {% endif %}
            {% for i in range(page-nearbyPagesLimit, page-1) %}
                {% if i > 0 %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ i }}" href="{{ url }}?{{ {'page': i, 'search': search}|url_encode }}">{{ i }} <span
                                class="sr-only">(current)</span></a>
                </li>
                {% endif %}
            {% endfor %}
        {% endif %}

        {# current #}
        <li class="page-item active">
            <a class="page-link" data-page="{{ page }}" href="{{ url }}?{{ {'page': page, 'search': search}|url_encode }}">{{ page }}
                <span class="sr-only">(current)</span></a>
        </li>

        {# after #}
        {% if page < pages %}
            {% for i in range(page+1, page + nearbyPagesLimit) %}
                {% if i <= pages %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ i }}" href="{{ url }}?{{ {'page': i, 'search': search}|url_encode }}">{{ i }} <span
                                class="sr-only">(current)</span></a>
                </li>
                {% endif %}
            {% endfor %}
            {% if (pages - extremePagesLimit) > (page + nearbyPagesLimit) %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ page }}" href="{{ url }}?{{ {'page': page, 'search': search}|url_encode }}">...
                        <span class="sr-only"></span></a>
                </li>
            {% endif %}
            {% for i in range(pages - extremePagesLimit+1, pages) %}
                {% if i > page + nearbyPagesLimit %}
                <li class="page-item">
                    <a class="page-link" data-page="{{ i }}" href="{{ url }}?{{ {'page': i, 'search': search}|url_encode }}">{{ i }} <span
                                class="sr-only">(current)</span></a>
                </li>
                {% endif %}
            {% endfor %}
        {% endif %}


        <li class="page-item{% if page == pages %} disabled{% endif %}">
            <a class="page-link" data-page="{{ rightpage }}"
               href="{{ url }}?{{ {'page': rightpage, 'search': search}|url_encode }}">&raquo;</a>
        </li>
    </ul>
{% endif %}