{% if (blogs) %} 
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
	<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_wrapper box-blog">

				<div class="col-sm-6 col-xs-12 box-left">
					<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'] }}" width="{{ blog['width'] }}" height="{{ blog['height'] }}" class="img-responsive" /></a></div>
					{% endif %}	 
					</div>
				</div>
				<div class="col-sm-6 col-xs-12 box-right">
					<div class="content-area">
						<h3 class="ocmp-blog-title"><a href="{{ blog['href'] }}">{{ blog['name'] }}</a></h3>
						{% if (blog_manager_post_category) %} 
							<div class="categories">
								{% 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 %} 
							</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 text-center">
							<a class="more-tag" href="{{ blog['href'] }}" >{{ text_readmore }} </a>
						</div>					

						{% if (blog_manager_author_name or blog_manager_no_views or blog_manager_post_date 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 %} 
								{% if (blog_manager_post_date) %}
									<span class="post-date"><i class="fa fa fa-calendar"></i>
										 {{ blog['date_publish'] }}
											{# set date = strtotime(blog['date_publish']) %} 
											{% if (date >0) %}
												{{ date('M d Y', date) }}
											{% endif #}
																			
									</span>
								{% endif %} 
								{% if (blog_manager_show_social_link) %}	
									<span class="share-social"><a><i class="fa fa-share-alt"></i> {{ text_share }}</a></span>
								{% endif %} 
							</div>
						{% endif %} 
			
						{% if (blog_manager_post_tag) %} 
							{% if (blog['tags']) %} 
								<span class="tags"><i class="fa fa-bookmark"></i> 
								  {{ text_tags }} 
									{% 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 ocmp-social-share"><i class="fa fa-facebook"></i></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 ocmp-social-share"><i class="fa fa-twitter"></i></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 ocmp-social-share"><i class="fa fa-google"></i></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 ocmp-social-share"><i class="fa fa-linkedin"></i></a>
									</div>
								{% endif %} 
								{% if (blog_manager_pintrest_status) %} 
									<div class="social-share">
										<a href="//pinterest.com/pin/create/button/?url={{ blog['href'] }}&media={{ blog['image'] }}&description={{ blog['name'] }}" target="_blank" class="ocmp-pinterest-share ocmp-social-share"><i class="fa fa-pinterest"></i></a>
									</div>	
								{% endif %} 
								{% if (blog_manager_tumblr_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 ocmp-social-share"><i class="fa fa-tumblr"></i></a>
									</div>
								{% endif %} 
								<div class="social-share btn-close">
									<a class="share-close">x</a>
								</div>						
							</div>
						{% endif %} 
							
					</div>
				</div>
			</div>	
		</div>
	{% endfor %} 
	</div>
</section>	
	<div class="row">
		<div class="ocmp-padination-box">
			<div class="col-sm-6 text-left">{{ pagination }}</div>
			<div class="col-sm-6 text-right">{{ results }}</div>
		</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 %} 
<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 .content-area, 
.blog-template.ocmp-blog-template .content-area .ocmp-blog-desc{
	{% if (blog_manager_post_content_color) %} 
	color:  {{ blog_manager_post_content_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, .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 %} 

.ocmp-blog-template.blog-wrap .comment-total a,.ocmp-blog-template.blog-wrap .posted_by a,
.ocmp-blog-template .categories a, .share-social 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, .ocmp-blog-template.blog-wrap .read-more i{
	display:inline-block;
	{% if (blog_manager_post_readmore_bg_color) %} 
	background:{{ blog_manager_post_readmore_bg_color }};
	{% endif %} 
	{% if (blog_manager_post_readmore_text_color) %} 
	color:{% set blog_manager_post_readmore_text_color = 'undefined' %};
	{% endif %} 
}
.ocmp-blog-template.blog-wrap .read-more a:hover, .ocmp-blog-template.blog-wrap .read-more a:hover i{
	display:inline-block;
	{% if (blog_manager_post_readmore_bg_hover_color) %} background:{{ blog_manager_post_readmore_bg_hover_color }}; {% endif %}	
	{% if (blog_manager_post_readmore_text_hover_color) %}color:{{ blog_manager_post_readmore_text_hover_color }}; {% endif %} 
}		

{% if (blog_manager_social_link_bg_color) %} 
.social-component .social-share a{
  background-color :  {{ blog_manager_social_link_bg_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_color) %} 
.social-component .social-share a{
  color :  {{ blog_manager_social_link_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_hover_color) %} 
.social-component .social-share a:hover{
  color :  {{ blog_manager_social_link_hover_color }};
}  
{% endif %} 
{% if (blog_manager_social_link_hover_bg_color) %} 
.social-component .social-share a:hover{
  background-color :  {{ blog_manager_social_link_hover_bg_color }};
}  
{% endif %} 
</style>
<script type="text/javascript">
	$('.share-social').on('click', function(){
		$(this).parents('.content-area').find('.social-component').addClass('open-content');		
		$(this).parents('.content-area').find('.social-component').css('opacity', '1');
		$(this).parents('.content-area').find('.date_wrap').css('opacity', '0');
        var social_icon_height = $(this).parents('.content-area').find('.social-component').outerHeight();
        var metabox_height = $(this).parents('.content-area').find('.date_wrap').outerHeight();		
		var transform_css = 'translateY(-' + (metabox_height - 1) + 'px)';
        $(this).parents('.content-area').find('.social-component').css('transform', transform_css);	
	});
	$('.share-close').on('click', function(){
		$(this).parents('.content-area').find('.social-component').removeClass('open-content');	
		jQuery(this).parents('.content-area').find('.date_wrap').removeAttr("style");
		jQuery(this).parents('.content-area').find('.social-component').removeAttr("style");
	});
</script>