{% if pageCount > 1 %}
<nav>
<ul class="pagination justify-content-center">
{% if first is defined and current != first %}
<li class="page-item">
<a class="page-link pageBtn" href="{{ path(route, query|merge({(pageParameterName): first})) }}" data-page="{{ first }}" title="first">
<i class="fas fa-fast-backward"></i>
{# <i class="fas fa-chevron-left"></i><i class="fas fa-chevron-left"></i> #}
</a>
</li>
{% endif %}
{% if previous is defined %}
<li class="page-item">
<a class="page-link pageBtn" href="{{ path(route, query|merge({(pageParameterName): previous})) }}" data-page="{{ previous }}" tabindex="-1" aria-disabled="true" title="previous">
<i class="fas fa-step-backward"></i>
{# <i class="fas fa-chevron-left"></i> #}
</a>
</li>
{% endif %}
{% for page in pagesInRange %}
<li class="page-item {{ page == current ? 'active' : '' }}">
<a class="page-link pageBtn" href="{{ path(route, query|merge({(pageParameterName): page})) }}" data-page="{{ page }}" title="Go to {{ page }}">{{ page }}</a>
</li>
{% endfor %}
{% if next is defined %}
<li class="page-item">
<a class="page-link pageBtn" href="{{ path(route, query|merge({(pageParameterName): next})) }}" data-page="{{ next }}" title="next">
<i class="fas fa-step-forward"></i>
{# <i class="fas fa-chevron-right"></i> #}
</a>
</li>
{% endif %}
{% if last is defined and current != last %}
<li class="page-item">
<a class="page-link pageBtn" href="{{ path(route, query|merge({(pageParameterName): last})) }}" data-page="{{ last }}" title="last">
<i class="fas fa-fast-forward"></i>
{# <i class="fas fa-chevron-right"></i><i class="fas fa-chevron-right"></i> #}
</a>
</li>
{% endif %}
</ul>
</nav>
{% endif %}