<style>body{overflow-x:hidden;}</style>

<div class="page-margin">
	<div class="row">
		<div class="col-md-2 leftcol"><?php echo Wo_LoadPage("sidebar/left-sidebar"); ?></div>
		<div class="col-md-7 profile-lists singlecol">
			<div class="page-margin mt-0">
				<div class="wow_content popular_posts_hdr movie">
					<img src="<?php echo $wo['config']['theme_url'];?>/img/blog.png" class="bg_trail">
					<h2><svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.61171 6.79433C2.12446 4.55719 3.83126 2.8104 6.0172 2.28564C7.59585 1.90666 9.23879 1.90666 10.8174 2.28564C13.0034 2.8104 14.7102 4.55719 15.2229 6.79434C15.5932 8.40998 15.5932 10.0914 15.2229 11.707C14.7102 13.9442 13.0034 15.691 10.8174 16.2157C9.23878 16.5947 7.59585 16.5947 6.0172 16.2157C3.83126 15.691 2.12446 13.9442 1.61171 11.707C1.24141 10.0914 1.24141 8.40998 1.61171 6.79433Z" class="icon_main" stroke-width="1.5" stroke-linecap="round"></path><path d="M5.14258 1.5V3.59479M11.6924 1.5V3.59479M5.96131 11.7645H8.41751M5.96131 9.25071H10.8737" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>&nbsp;<?php echo $wo['lang']['blog']; ?></h2>
				</div>
			</div>
			
			<div class="page-margin wow_content wow_big_head_link flex">
				<ul class="list-unstyled">
					<?php if ($wo['loggedin'] == true) { ?>
					<?php if (Wo_CanBlog() == true) { ?>
					<li><a href="<?php echo Wo_SeoLink('index.php?link1=my-blogs'); ?>" data-ajax="?link1=my-blogs"><?php echo $wo['lang']['my_articles'] ?></a></li>
					<?php } } ?>
					<li class="active"><a href="<?php echo Wo_SeoLink('index.php?link1=blogs'); ?>" data-ajax="?link1=blogs"><?php echo $wo['lang']['browse_articles'] ?></a></li>
				</ul>
				<div class="right_part">
					<div class="search-blog">
						<form action="">
							<input type="text" placeholder="<?php echo $wo['lang']['search_for_article']?>" id="search-blog-input">
							<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="2"></circle><path d="M14.5 15.5L18.5 19.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
							<ul class="popular-articles search_suggs dropdown-menu search-result wow_new_blog_searcch" id="recent-blogs-search"></ul>
						</form>
					</div>
				</div>
			</div>
			
			<div class="page-margin wow_content wow_big_head_link">
				<ul class="list-unstyled">
					<?php 
						$category_id = (!empty($_GET['id'])) ? (int) $_GET['id'] : 0;
						foreach ($wo['blog_categories'] as $key => $category) {
							$active = ($category_id == $key) ? 'active' : '';
					?>
						<li class="<?php echo $active?>"><a href="<?php echo Wo_SeoLink('index.php?link1=blog-category&id=' . $key) ?>" data-ajax="?link1=blog-category&id=<?php echo $key?>"><?php echo $category;?></a></li>
					<?php } ?>
				</ul>
			</div>
			
			<div class="page-margin products">
				<div id="recent-blogs" class="row">
					<?php
						$pages = Wo_GetBlogs(array("limit" => 9));
						if (count($pages) > 0) {
							foreach ($pages as $key => $wo['article']){
								$wo['article']['first'] = ($key == 0) ? true : false;
								echo Wo_LoadPage('blog/includes/card-list');
							}
						} 
						else {
							echo '<div class="col-md-12"><div class="wow_content"><div class="empty_state"><svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.61171 6.79433C2.12446 4.55719 3.83126 2.8104 6.0172 2.28564C7.59585 1.90666 9.23879 1.90666 10.8174 2.28564C13.0034 2.8104 14.7102 4.55719 15.2229 6.79434C15.5932 8.40998 15.5932 10.0914 15.2229 11.707C14.7102 13.9442 13.0034 15.691 10.8174 16.2157C9.23878 16.5947 7.59585 16.5947 6.0172 16.2157C3.83126 15.691 2.12446 13.9442 1.61171 11.707C1.24141 10.0914 1.24141 8.40998 1.61171 6.79433Z" class="icon_main" stroke-width="1.5" stroke-linecap="round"></path><path d="M5.14258 1.5V3.59479M11.6924 1.5V3.59479M5.96131 11.7645H8.41751M5.96131 9.25071H10.8737" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>' . $wo['lang']['no_blogs_found'] . '</div></div></div>';
						}
					?>
				</div>
						
				<div class="posts_load">
					<?php if (count($pages) >= 9): ?>
						<div class="load-more">
							<button class="btn btn-default text-center pointer load-more-blogs" id="hren">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg> <?php echo $wo['lang']['load_more_blogs'] ?>
							</button>
						</div>
					<?php endif ?>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$('#search-blog-input').keyup(function(event) {
	$keyword = $(this).val();
	//$('#load-search-icon').removeClass('hidden');
	$.post(Wo_Ajax_Requests_File() + '?f=search-blog-read', {keyword: $keyword}, function(data, textStatus, xhr) {
		if (data.status == 200) {
			$('#recent-blogs-search').html(data.html);
		} else {
			$('#recent-blogs-search').html('<div class="text-center">' + data.message + '</div>');
		}
		//$('#load-search-icon').addClass('hidden');
	});
});

jQuery(document).ready(function($) {
    $(".load-more-blogs").click(function () {
  		var last_id = (($("div[data-blog-id]").length > 0) ? $("div[data-blog-id]:last").attr('data-blog-id') : 0);
		$.ajax({	  
		     url: Wo_Ajax_Requests_File(),
		     type: 'GET',
		     dataType: 'json',
		     data: {f:"load-recent-blogs",offset:last_id,total:9},
		     success:function(data){
		        if (data['status'] == 200) {
		            $("#recent-blogs").append(data['html']);
		        }
		        else{
		           $(".posts_load").remove()
		        }
		     }
		});
	});
});
</script>