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

[collection]
handle = "Blog\Post"
recordsPerPage = 12
sortColumn = "published_at"
sortDirection = "desc"
==
<!--Start breadcrumb area-->     
<div class="breadcrumb-area" style="background-image: url({{'assets/images/background/3.jpg' | 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-lg-9 col-md-8 col-sm-12 col-xs-12">
                <div class="blog-post">
                <div class="row">
                {% for post in collection %}
                  <div class="col-lg-6 col-md-6 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%2 %}
                </div>
                <div class="row">
                  {% endif %}
                {% endfor %}
                </div>

                {% if collection.hasMorePages %}
                    <button
                        class="thm-btn bg-clr1"
                        data-request="onAjax"
                        data-request-update="{ _self: '@' }"
                        data-request-success="this.remove()"
                        data-request-data="{ page: {{ collection.currentPage + 1 }} }"
                        data-attach-loading>
                        Load More
                    </button>
                {% endif %}
                </div>
            </div>

            <!--Start sidebar Wrapper-->
            <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
                <div class="sidebar-wrapper">
                    <!--Start single sidebar-->
                    <div class="single-sidebar">
                        <form class="search-form" action="#">
                            <input placeholder="Search..." type="text">
                            <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </form>
                    </div>
                    <!--End single sidebar-->

                </div>    
            </div>
            <!--End Sidebar Wrapper-->  
        </div>
    </div>
</div>