description = "Posts Pagination"

[viewBag]
==
<div class="d-flex justify-content-center py-10" {% if this.theme.blog_posts_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
    <nav>
        {% if posts.lastPage > 1 %}
        <ul class="pagination m-0">
            {% if posts.currentPage > 1 %}
            <li class="page-item mr-2">
                <a class="d-flex justify-content-center align-items-center btn btn-default rounded-circle p-0 w-10r h-10r" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}" tabindex="-1" aria-label="Previous">
                <i class="fa fa-arrow-left"></i>
                <span class="sr-only">Previous</span>
                </a>
            </li>
            {% endif %}
            {% for page in 1..posts.lastPage %}
            <li class="page-item mr-2">
                <a class="{{ posts.currentPage == page ? 'active' : null }} d-flex justify-content-center align-items-center btn btn-default rounded-circle p-0 w-10r h-10r" href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }} <span class="sr-only">(current)</span></a>
            </li>
            {% endfor %}
            {% if posts.lastPage > posts.currentPage %}
            <li class="page-item mr-2">
                <a class="d-flex justify-content-center align-items-center btn btn-default rounded-circle p-0 w-10r h-10r" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}" aria-label="Next">
                <i class="fa fa-arrow-right"></i>
                <span class="sr-only">Next</span>
                </a>
            </li>
            {% endif %}
        </ul>
        {% endif %}
    </nav>
</div>