description = "Posts"

[viewBag]

[ssbuttons]
fa = "no"
twitter = 1
facebook = 1
google+ = 1
stumbleupon = 0
linkedin = 0
order_twitter = 1
order_facebook = 2
order_google+ = 3
order_stumbleupon = 4
order_linkedin = 5
==

<style>
    
    .blog-pagination nav ul.pagination li.page-item.active a.page-link{
        color: #fff;
    } 
    .blog-pagination nav ul.pagination li.page-item a {
        width: fit-content;
        color: #000;
    }
    .blog-pagination nav ul.pagination li.page-item a:hover {
        color: #fff;
    }
    

    .blog-pagination nav ul.pagination{gap:10px;}
</style>

{% set posts = blogPosts.posts %}
{% for post in posts %}
<div class="news-articles">
    {% if post.featured_images.count == 1 %}
        <img src="{{ post.featured_images.first.getThumb(600, 250, 'crop') }}"
             alt="{{ image.description }}" class="img-fluid"/>
    {% elseif post.featured_images.count < 1 %}
        <img src="{{ 'assets/images/img/600x250.png'|theme }}"
             class="img-fluid"/>
    {% endif %}
    
    <span class="date-published">{{ post.published_at|date('M d, Y') }}</span>
    
    <div class="news-info">
        <h5>{{ post.title }}</h5>
        <p>{{ html_limit(post.summary, 280)|raw }}</p>
        <a href="{{ post.url }}" class="readmore-article">Read more</a>
    </div>
</div>
{% else %}
<article class="blog-post-wrapper" data-aos="fade-up" data-aos-delay="300">{{ noPostsMessage }}</article>
{% endfor %}
<div class="blog-pagination clearfix" data-aos="fade-up" data-aos-delay="300">
   <nav aria-label="..." class="">
      {% if posts.lastPage > 1 %}
      <ul class="pagination">
         {% if posts.currentPage > 1 %}
         <li class="page-item">
            <a class="page-link" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}" tabindex="-1" aria-label="Previous">
            <i class="fa fa-angle-left"></i>
            Prev
            <span class="sr-only">Previous</span>
            </a>
         </li>
         {% endif %}
         {% for page in 1..posts.lastPage %}
         <li class="page-item {{ posts.currentPage == page ? 'active' : null }}">
            <a class="page-link" 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">
            <a class="page-link" href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}" aria-label="Next">
            Next
            <i class="fa fa-angle-right"></i>
            <span class="sr-only">Next</span>
            </a>
         </li>
         {% endif %}
      </ul>
      {% endif %}
   </nav>
</div>
{% if this.theme.settings_disqus %}
<script id="dsq-count-scr" src="//{{ this.theme.settings_disqus_url }}/count.js" async></script>
{% endif %}