<!-- Famous template -->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<div class="famous">
	{% if (blogs) %} 
		<section class="ocmp-blog-wrap {{ blog_manager_post_list_layout }}">
			<div class="row">
				<div class="ocmp-blog-content" id="ocmp-blog-grid">
				
				{% 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="grid-item blog-template ocmp-blog-template blog-wrap col-sm-4  col-xs-12 {{ ocmp_class }}">
						<div class="post_wrapper box-blog" >
							<div class="photo post-image" >
								<div class="image" ><a href="{{ blog['href'] }}" ><img src="{{ blog['thumb'] }}" title="{{ blog['name'] }}" width="{{ blog['width'] }}" height="{{ blog['height'] }}" class="img-responsive" alt="{{ blog['name'] }}" ></a></div>                    
							</div>
							{% 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="post-title">
								<a href="{{ blog['href'] }}" title="{{ blog['name'] }}" style="user-select: none;">{{ blog['name'] }}</a> 
							</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="metadatabox" >
								{% if (blog_manager_author_name) %}	
									<span class="author" > <a href="{{ blog['author_href'] }}"><i class="fa fa-user" ></i>&nbsp;&nbsp;{{ blog['author_name'] }}</a></span>
								{% endif %}	
								{% if (blog_manager_post_date) %} 
									<span class="date">
										<i class="fa fa-calendar" ></i>&nbsp;&nbsp;
										{{ blog['date_publish'] }} 
									</span>
								{% endif %}									
								{# if($blog_manager_comment_total){ ?>									
									<span class="comments" >
									<i class="fa fa-comment" ></i><span class="comments-link" ><?php echo $blog['total_comment']; ?></span></span>
								<?php } ?>	
								<?php if($blog_manager_no_views){ ?>									
									<span class="views" >
									<i class="fa fa-eye" ></i> <span class="eye-no-link" ><?php echo $blog['viewed']; ?></span></span>
								<?php } ?> #}									
							</div>

							<div class="read-more text-left">
								<a class="more-tag" href="{{ blog['href'] }}" >{{ text_readmore }} </a>
							</div>

							<div class="blog_footer" >
							

								{# if($blog_manager_post_tag){ ?>
									<?php if ($blog['tags']) { ?>
										<span class="tags"><i class="fa fa-tag"></i> 
										 <?php echo $text_tags; ?> : 
											<?php for ($i = 0; $i < count($blog['tags']); $i++) { ?>
											<?php if ($i < (count($blog['tags']) - 1)) { ?>
											<a href="<?php echo $blog['tags'][$i]['href']; ?>"><?php echo $blog['tags'][$i]['tag']; ?></a>,
											<?php } else { ?>
											<a href="<?php echo $blog['tags'][$i]['href']; ?>"><?php echo $blog['tags'][$i]['tag']; ?></a>
											<?php } ?>
											<?php } ?>
										</span>
									 <?php } ?>
								<?php } ?> #}							
							</div>     
						</div>					
					</div>
				{% endfor %} 
				</div>
			</div>	
		</section>	
		<div class="row">
			<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 %} 
	<style type="text/css">
	.famous .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 %} 
	}
	.famous .post-title a:hover{
		{% if (blog_manager_post_title_link_hover_color) %} 
		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{
		{% if (blog_manager_alternative_hover_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{

		{% if (blog_manager_post_readmore_text_color) %}color:{{ blog_manager_post_readmore_text_color }}; {% endif %} 
	}		
	</style>
</div>