{% if pagesInRange|length > 1 %}
<div class="pg grid-x align-spaced align-middle cell large-8 small-8">
{% if route in [
'single_training_center',
'single_provider_audio',
'single_provider',
'single_provider_orl'
] %}
<div class="pg-numbers grid-x align-spaced">
{% for page in pagesInRange %}
{# <span class="pg-number {{ page == current ? 'active':'' }}"
data-href="{{ path(route, query|merge({
(pageParameterName) : page,
'from': 'ajax'
})) }}"
>{{ page }}</span> #}
<span class="pg-number {{ page == current ? 'active':'' }}">{{ page }}</span>
{% endfor %}
</div>
{% else %}
<a href="{{ path(route, query|merge({ (pageParameterName) : previous})) }}" class="pg-button pg-button_prev" rel="prev">
<img class="pg-arrow " alt="flèche précédente" src="/assets/images/svg/icon_left_arrow.svg"/>
</a>
<div class="pg-numbers grid-x align-spaced">
{% for page in pagesInRange %}
<a class="pg-number {{ page == current ? 'active' : '' }}"
href="{{ path(route, query|merge({ (pageParameterName) : page})) }}"
>{{ page }}</a>
{% endfor %}
</div>
<a href="{{ path(route, query|merge({ (pageParameterName) : next})) }}" class="pg-button pg-button_next" rel="next">
<img class="pg-arrow " alt="flèche suivante" src="/assets/images/svg/icon_right_arrow.svg"/>
</a>
{% endif %}
</div>
{% endif %}