url = "/blogs"
layout = "default"
title = "Blogs"

[collection]
handle = "Blog\Post"
sortColumn = "published_at"
sortDirection = "desc"
==
<!--Start breadcrumb area-->     
<div class="breadcrumb-area" style="background-image: url({{this.theme.blog_banner | media}});">
	<!--<div class="container text-center">
		<h1>Blog</h1>
			<div class="breadcrumbs_path">
			    <a href="#">Home</a>&nbsp;&nbsp;-&nbsp;&nbsp;Blog
			</div>		
	</div>-->
</div>
<!--End breadcrumb area-->

<div id="blog-area" class="blog-with-sidebar-area">
    <div class="container">
        <div class="row">
            <div class="col-12">
              <div class="blog-post">
                <div class="row">
                {% set posts = collection.paginate(12) %}
                {% for post in posts %}
                  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <!--Start single latest blog-->
                    <div class="single-blog-post">
                        <div class="img-holder">
                            <a href="{{ url('/blog/post/') }}/{{ post.slug }}"><img src="{{ post.banner[0]|media }}" alt="{{ post.title }}"></a>
                        </div>
                        <div class="text-holder">
                            <a href="{{ url('/blog/post/') }}/{{ post.slug }}">
                                <h3 class="blog-title">{{ post.title }}</h3>
                            </a>
                            <div class="meta-info clearfix">
                                <div class="left pull-left">
                                    <ul class="post-info">
                                        <li><i class="fa fa-calendar" aria-hidden="true"></i> {{ post.published_at|date('M d, Y') }}</li>    
                                    </ul>    
                                </div>
                            </div>  
                            <div class="text">
                                <p>{{ post.featured_text }}</p>
                                <a href="{{ url('/blog/post/') }}/{{ post.slug }}"> Read More </a>
                            </div> 
                        </div>
                    </div>
                    <!--End single latest blog-->
                  </div>
                  {% if not loop.index%3 %}
                </div>
                <div class="row">
                  {% endif %}
                {% endfor %}
                </div>
                <div class="row">
                    <div class="col-md-12">
                        {{ pager(posts) }}
                    </div> 
                </div>
              </div>
            </div>

            <!--Start sidebar Wrapper-->
            <!--
            <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
                <div class="sidebar-wrapper linkedin">
                    <iframe class="sk-ww-linkedin-page-post" src='https://widgets.sociablekit.com/linkedin-page-posts/iframe/25416701' marginheight="0" marginwidth="0" seamless="seamless" frameborder="0" allowtransparency="true" width='100%' height='420px'></iframe>
                </div>    
            </div>
            -->
            <!--End Sidebar Wrapper-->  
        </div>
    </div>
</div>