{% set totalPage = (totalCount / numItemsPerPage) | round(0, 'ceil') %}
{% if totalPage > 0 %}
    <div class="pagination-wrapper mt-3 d-flex justify-content-between align-items-center">
        <div>{{ 'Page {current} of {totalPage}' | trans({'{current}': current, '{totalPage}': totalPage}) }}</div>
        <nav class="pagination-page">
            <nav aria-label="Page navigation example">
                {% if pageCount > 1 %}
                    <ul class="pagination justify-content-center">
                        {% if first is defined and current != first %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{{ path(route, query|merge({(pageParameterName): first})) }}">
                                    <i class="fa fa-angle-double-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% if previous is defined %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="{{ path(route, query|merge({(pageParameterName): previous})) }}">
                                    <i class="fa fa-angle-left"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% for page in pagesInRange %}
                            {% if page != current %}
                                <li class="page-item">
                                    <a class="page-link"
                                       href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
                                </li>
                            {% else %}
                                <li class="page-item active" aria-current="page">
                                    <a class="page-link" href="#">{{ page }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if next is defined %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): next})) }}">
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </li>
                        {% endif %}

                        {% if last is defined and current != last %}
                            <li class="page-item">
                                <a class="page-link" href="{{ path(route, query|merge({(pageParameterName): last})) }}">
                                    <i class="fa fa-angle-double-right"></i>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                {% endif %}
            </nav>
        </nav>
    </div>
{% endif %}