{# ★ ページャここから ★ #}
<div id="pagination_wrap" class="box-footer">
    <div class="text-center">
        <ul class="pagination">
            {% if pages.previous is defined %}
                <li class="pagenation__item-previous">
                    {% if categoryId is defined %}
                    <a href="{{ path(routes, app.request.query.all|merge({'categoryId': categoryId, 'page_no': pages.previous})) }}" aria-label="Previous"><span aria-hidden="true">前へ</span></a>
                    {% else %}
                    <a href="{{ path(routes, app.request.query.all|merge({'page_no': pages.previous})) }}" aria-label="Previous"><span aria-hidden="true">前へ</span></a>
                    {% endif %}
                </li>
            {% endif %}

            {% for page in pages.pagesInRange %}
                <li{% if page == pages.current %} class="pagenation__item active"{% endif %}>
                    {% if categoryId is defined %}
                    <a href="{{ path(routes, app.request.query.all|merge({'categoryId': categoryId, 'page_no': page})) }}"><span>{{ page }}</span></a>
                    {% else %}
                    <a href="{{ path(routes, app.request.query.all|merge({'page_no': page})) }}"><span>{{ page }}</span></a>
                    {% endif %}
                </li>
            {% endfor %}

            {% if pages.next is defined %}
                <li class="pagenation__item-next">
                    {% if categoryId is defined %}
                    <a href="{{ path(routes, app.request.query.all|merge({'categoryId': categoryId, 'page_no': pages.next})) }}" aria-label="Next"><span aria-hidden="true">次へ</span></a>
                    {% else %}
                    <a href="{{ path(routes, app.request.query.all|merge({'page_no': pages.next})) }}" aria-label="Next"><span aria-hidden="true">次へ</span></a>
                    {% endif %}
                </li>
            {% endif %}
        </ul>
    </div>
</div>
{# ★ ページャここまで ★ #}