<!-- cool hr template -->
<div class="cool_horizontal">
	{% if (blogs) %} 
		<section class="ocmp-blog-wrap {{ blog_manager_post_list_layout }}">
			<div class="row">
				<div class="ocmp-blog-content">
				
				{% set j = 0 %}
				{% for blog in blogs %} 
					{% set ocmp_class = j%2 == 0 ? 'odd_class' : 'even_class' %} {% set j = j + 1 %} 
					<!-- OCMP Blog Listing -->
					<div class="item blog-template ocmp-blog-template blog-wrap {{ ocmp_class }}">
						<div class="post-title">
							<a href="{{ blog['href'] }}" title="{{ blog['name'] }}" style="user-select: none;">{{ blog['name'] }}</a> 
							{% if (blog_manager_post_date) %} 
								<div class="date">
									<i class="fa fa-calendar" ></i>&nbsp;&nbsp;
									{{ blog['date_publish'] }} 
								</div>
							{% endif %}	
						</div>	


						<div class="post_wrapper box-blog" >
							<div class="photo post-image" >
								<div class="image" ><a href="{{ blog['href'] }}" ><img class="img-responsive" src="{{ blog['thumb'] }}" title="{{ blog['name'] }}" alt="{{ blog['name'] }}" ></a></div>                    
							</div>
							<div class="metadatabox" >
								{% if (blog_manager_author_name) %}	
									<span class="author" > <i class="fa fa-user" ></i>&nbsp;&nbsp;{{ blog['author_name'] }}</span>
								{% endif %}	
								{% if (blog_manager_comment_total) %}									
									<span class="comments" >
									<i class="fa fa-comment" ></i><span class="comments-link" >{{ blog['total_comment'] }}</span></span>
								{% endif %}	
								{% if (blog_manager_no_views) %}									
									<span class="views" >
									<i class="fa fa-eye" ></i> <span class="eye-no-link" >{{ blog['viewed'] }}</span></span>
								{% endif %}									
							</div>
							<div class="post_content" >
								{% if (blog_manager_show_content_from and blog['short_description'] != '') %} 
									{{ blog['short_description'] }} 
								{% else %}	
									{{ blog['description'] }} 
								{% endif %} 
							</div>
							<div class="read-more" >
								<a class="more-tag" href="{{ blog['href'] }}" >{{ text_readmore }} </a>
							</div>

							<div class="blog_footer" >
								{% if (blog_manager_post_category) %} 
									<div class="categories" >
										<span class="link-lable" ><i class="fa fa-bookmark" ></i> {{ text_categories }} : </span>
										{% 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 %}	
								{% if (blog_manager_post_tag) %} 
									{% if (blog['tags']) %} 
										<span class="tags"><i class="fa fa-tag"></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 %}							
							</div>     
						</div>					
					</div>
				{% endfor %} 
				</div>
			</div>	
		</section>	
	{% 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">
		.cool_horizontal .post-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 %} 
		}
		.cool_horizontal .post-title a:hover{
			{% if ( blog_manager_post_title_link_hover_color ) %} 
			color: {{ blog_manager_post_title_link_hover_color }};
			{% endif %} 
		}
		.cool_horizontal .read-more a{
			{% if ( blog_manager_post_readmore_bg_color ) %} 
			background: {{ blog_manager_post_readmore_bg_color }};
			{% endif %} 
			{% if ( blog_manager_post_readmore_text_color ) %} 
			color: {{ blog_manager_post_readmore_text_color }};
			{% endif %} 
			{% if ( blog_manager_post_readmore_text_color ) %} 
			border: 1px solid {{ blog_manager_post_readmore_text_color }};
			{% endif %} 
		}
		.cool_horizontal .box-blog{ {% if ( blog_manager_alternative_text_color ) %} color : {{ blog_manager_alternative_text_color }}; } {% endif %} 
		.cool_horizontal .blog_footer .tags a,
		.cool_horizontal .blog_footer .categories a {  {% if ( blog_manager_alternative_link_color ) %} color : {{ blog_manager_alternative_link_color }}; } {% endif %} 
	</style>
	<link href="catalog/view/javascript/jquery/ocmp_blog/js/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
	<script src="catalog/view/javascript/jquery/ocmp_blog/js/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>	
	<script type="text/javascript">		
		$('.cool_horizontal .ocmp-blog-content').owlCarousel({
			items: 3,
			autoPlay: 5000,
			center:true,
			 padding:10,
			navigation: false,
			navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
			pagination: true
		});
	</script>	
</div>