{% if (blogs) %} 
	<script src="catalog/view/javascript/jquery/ocmp_blog/js/infinite-scroll.pkgd.min.js"></script>
	<section class="ocmp-blog-wrap {{ blog_manager_post_list_layout }}">
		<div class="ocmp-blog-content">
			
			{% set j = 0 %}
			{% for blog in blogs %} {# echo "<pre>"; print_r($blog); echo "</pre>"; #}
				{% set ocmp_class = j%2 == 0 ? 'odd_class' : 'even_class' %} {% set j = j + 1 %}
			
			<div class="blog-template ocmp-blog-template blog-wrap {{ ocmp_class }}">
				<div class="post_thumb animateblock  fa fa-thumb-tack animated">
					<div class="post_content_wrap animateblock animated">
						<div class="post_wrapper box-blog">
							{% if (blog_manager_post_date) %} 
								{% if (blog['date_publish_2']) %} 
									<div class="post-date">
										{% set date_publish = blog.date_publish_2 %}
										{{ '<div class="month-day">' }}
										{{ 	'	<span class="day">'  ~ date_publish|date('d') ~ '</span>' }}
										{{ 	'	<span class="month">' ~ date_publish|date('M') ~ '</span>' }}
										{{ '</div>' }}
										{{ '<span class="year">' ~ date_publish|date('Y') ~ '</span>' }}
											
									</div>
								{% endif %}	
							{% endif %}	
							<div class="ocmp-blog-thumb">
								{% if (blog['blog_type'] == 'video') %} 
									<div class="ocmp-blog-youtube">
										<iframe src=""></iframe>
									</div>
								{% else %} 
									<div class="ocmp-blog-image"><a href="{{ blog['href'] }}"><img src="{{ blog['thumb'] }}" alt="{{ blog['name'] }}" title="{{ blog['name'] }}" class="img-responsive" /></a></div>
								{% endif %}	 
							</div>
							<div class="blog-info">		
								<h3 class="ocmp-blog-title"><a href="{{ blog['href'] }}">{{ blog['name'] }}</a></h3>
								{% if (blog_manager_author_name or blog_manager_comment_total) %} 
									<div class="date_wrap">
										{% if (blog_manager_author_name) %}
											<span class="posted_by" title="{{ blog['author_name'] }}"><i class="fa fa-user"></i> <a href="{{ blog['author_href']}}"> {{ blog['author_name'] }}</a></span>
										{% endif %} 
										{% if (blog_manager_comment_total) %}
											<span class="comment-total" title="{{ blog['total_comment'] }}"><i class="fa fa-comment"> <a href="{{ blog['href'] }}#comments"></i> {{ blog['total_comment'] }}</a></span>
										{% endif %}	
										{% if (blog_manager_no_views) %}
											<span class="viewed"><i class="fa fa-eye"></i> {{ blog['viewed'] }}</span>
										{% endif %}	
									</div>
								{% endif %}	
								<div class="ocmp-blog-desc">
								{% if (blog_manager_show_content_from and blog['short_description'] != '') %} 
									{{ blog['short_description'] }} 
								{% else %}	
									{{ blog['description'] }} 
								{% endif %} 
								</div>
								<div class="read_more"><a href="{{ blog['href'] }}"><i class="fa fa-plus"></i> {{ text_readmore }}</a></div>
							</div>	
						</div>	
						{% if (blog_manager_post_category or blog_manager_show_social_link or blog_manager_show_social_link) %} {% set class = '' %}{% else %} {% set class = 'empty' %}{% endif %} 
						<section class="blog_footer text-capitalize {{ class }}">
							{% if (blog_manager_post_category) %} 
								<span class="categories"><i class="fa fa-folder"></i>&nbsp; {{ text_categories }}:&nbsp;
									{% set q = 0 %}{% for q in q..categories %} 
										{% if (q < (categories|length) - 1) %} 
											<a href="{{ categories[q]['href'] }}">{{ categories[q]['name'] }}</a>,
										{% else %} 
											<a href="{{ categories[q]['href'] }}">{{ categories[q]['name'] }}</a>
										{% endif %}	
									{% endfor %} 
								</span>
							{% endif %}	
							
							 {% if (blog_manager_post_tag) %} 
								{% if (blog['tags']) %} 
									<span class="tags"><i class="fa fa-bookmark"></i> 
									  {{ text_tags }}: &nbsp;
										{% set i = 0 %}{% for i in i..blog %} 
										{% if (i < (blog['tags']|length) - 1) %} 
										<a href="{{ blog['tags'][i]['href'] }}">{{ blog['tags'][i]['tag'] }}</a>,
										{% else %} 
										<a href="{{ blog['tags'][i]['href'] }}">{{ blog['tags'][i]['tag'] }}</a>
										{% endif %} 
										{% endfor %} 
									</span>
								 {% endif %} 
							{% endif %}	 
							{% if (blog_manager_show_social_link) %}
								<div class="social-component default_social_style_1 bottom">
									{% if (blog_manager_facebook_status) %} 
										<div class="social-share">
										  <a href="https://www.facebook.com/sharer/sharer.php?u={{ blog['href'] }}" target= _blank class="ocmp-facebook-share social-share-default"></a>
										</div>  
									{% endif %} 
									{% if (blog_manager_twitter_status) %} 
										<div class="social-share">
										   <a href="https://plus.google.com/share?url={{ blog['href'] }}" target="_blank" class="ocmp-google-share social-share-default"></a>
										 </div>
									{% endif %} 
									{% if (blog_manager_google_status) %} 
										<div class="social-share">
										 <a href="https://twitter.com/share?text={{ blog['name'] }}&url={{ blog['href'] }}" target= _blank class="ocmp-twitter-share social-share-default"></a>
										</div>
									{% endif %} 
									{% if (blog_manager_linkedin_status) %} 
										<div class="social-share">
										  <a href="https://www.linkedin.com/shareArticle?url={{ blog['href'] }}" target= _blank class="ocmp-linkedin-share social-share-default"></a>
										</div>
									{% endif %} 
									{% if (blog_manager_pintrest_status) %} 
										<a href="//pinterest.com/pin/create/button/?url={{ blog['href'] }}&media={{ blog['image'] }}&description={{ blog['name'] }}" target= _blank class="ocmp-pinterest-share social-share-default"> </a>

									{% endif %} 
									{% if (blog_manager_facebook_status) %} 
										<div class="social-share">
										 <a href="http://www.tumblr.com/share/link?url={{ blog['href'] }}&amp;title={{ blog['name'] }}" target="_blank" class="ocmp-tumblr-share social-share-default"></a>
										</div>
									{% endif %} 
								</div>
							{% endif %} 
						</section>
					</div>	
				</div>	
			</div>
		{% endfor %} 
		</div>
	</section>	
	<div class="row pagination-contain">
		<div class="col-sm-6 text-left"><div class="ocmp-pagination-box">{{ pagination }}</div></div>
		<div class="col-sm-6 text-right">{{ results }}</div>
	</div>
{% endif %} 
{% if (not blogs) %}	
	<div class="buttons">
		<div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
	</div>
{% endif %} 
<div class="blog-css">
<style type="text/css">
.blog-template.ocmp-blog-template h3.ocmp-blog-title a{
	{% if (blog_manager_post_title_background_color) %} 
	background: {{ blog_manager_post_title_background_color }};
	{% endif %}	
	{% if (blog_manager_post_title_color) %} 
	color: {{ blog_manager_post_title_color }};
	{% endif %}	
}

	.blog-template.ocmp-blog-template .post_content_wrap, 
	.blog-template.ocmp-blog-template .post_content_wrap .ocmp-blog-desc{
		{% if (blog_manager_post_content_color) %} color:  {{ blog_manager_post_content_color }};{% endif %} 
	}
	{% if (blog_manager_post_title_link_hover_color) %}
	.blog-template.ocmp-blog-template h3.ocmp-blog-title a:hover{
		color: {{ blog_manager_post_title_link_hover_color }};
	}
	{% endif %} 
	{% if (blog_manager_alternative_bg_color) %} 
	.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .post-date, .ocmp-blog-content::before, .post_thumb::before,
	.ocmp-pagination-box .pagination > li > a:hover, .pagination > li > span
	{
		background-color:{{ blog_manager_alternative_bg_color }};
	}
	.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover{
		border:1px solid {{ blog_manager_alternative_bg_color }};
	}
	{% endif %} 
	{% if (blog_manager_alternative_bg_color) %} 
		.ocmp-blog-template.blog-wrap.odd_class .post_content_wrap::before, .ocmp-blog-template.blog-wrap.odd_class .post_content_wrap::after{
			border-left:8px solid {{ blog_manager_alternative_bg_color }};
		}
		.ocmp-blog-template.blog-wrap.even_class .post_content_wrap::before, .ocmp-blog-template.blog-wrap.even_class .post_content_wrap::after{
			border-right:8px solid {{ blog_manager_alternative_bg_color }};
		}
		.ocmp-blog-template.blog-wrap .post_content_wrap{
			border:1px solid {{ blog_manager_alternative_bg_color }};
		}
		.ocmp-blog-template.blog-wrap .post_content_wrap .blog_footer{
			border-top:1px solid {{ blog_manager_alternative_bg_color }};
		}
	{% endif %}	

	.ocmp-blog-template.blog-wrap .comment-total a,.ocmp-blog-template.blog-wrap .posted_by a,
	.ocmp-blog-template .categories a,
	.ocmp-blog-template .tags a{
		{% if (blog_manager_alternative_link_color) %}color:{{ blog_manager_alternative_link_color }}{% endif %};
	}
	.ocmp-blog-template.blog-wrap .comment-total a:hover, 
	.ocmp-blog-template.blog-wrap .posted_by a:hover,
	.ocmp-blog-template .categories a:hover,
	.ocmp-blog-template .tags a:hover{
		{% if (blog_manager_alternative_hover_color) %} color:{{ blog_manager_alternative_hover_color }} {% endif %};
	}

	.ocmp-blog-template.blog-wrap .read_more a{
		display:inline-block;
		{% if (blog_manager_post_readmore_bg_color) %} 
			background: $blog_manager_post_readmore_bg_color  ?>;
		{% endif %}	
	}
	.ocmp-blog-template.blog-wrap .read_more a, .ocmp-blog-template.blog-wrap .read_more i{
		display:inline-block;
		{% if (blog_manager_post_readmore_text_color) %}color:{{ blog_manager_post_readmore_text_color }}; {% endif %} 
	}
	</style>
	<script type="text/javascript">	
		$('.ocmp-blog-wrap').infiniteScroll({
		  // options
		  path: 'ul.pagination li a',
		  append: '.ocmp-blog-wrap',
		  history: false,
		  hideNav: '.pagination-contain',
		  status: '.page-load-status'
		});	
	</script>	
</div>