<section class="blog-list">
    <div class="container-fluid">
        <div class="row justify-center">
            <div class="col-12 col-xl-10 blog-list__wrap result-wrap">
                {% include "templates/partials/blog-list.twig" with {"posts": posts} %}
            </div>

            <div class="col-12 col-xl-10 blog-list__pagination js-pagination" data-ppp="{{ fields.posts_per_page }}">
                <a href="{{ posts.pagination.prev ? posts.pagination.prev.link : "" }}" class="blog-list__pagination-arrow blog-list__pagination-arrow--left {{posts.pagination.prev.link|length ? '' : 'blog-list__pagination-arrow--disabled'}}">
                    <img src="{{ function("get_frontend_static_asset", "assets/images/pag-arrow.svg") }}" alt="{{ t('Pagination left arrow') }}">
                </a>

                {% for page in posts.pagination.pages %}
                    {% if page.link %}
                        <a href="{{page.link}}" class="page-num">{{page.title}}</a>
                    {% else %}
                        <span class="page-num active">{{page.title}}</span>
                    {% endif %}
                {% endfor %}

                <a href="{{ posts.pagination.next ? posts.pagination.next.link : "" }}" class="blog-list__pagination-arrow {{posts.pagination.next.link|length ? '' : 'blog-list__pagination-arrow--disabled'}}">
                    <img src="{{ function("get_frontend_static_asset", "assets/images/pag-arrow.svg") }}" alt="{{ t('Pagination right arrow') }}">
                </a>
            </div>
        </div>
    </div>
</section>