<?php 
if(get_theme_mod('articlesblog_section_disable') != 'on' ){ ?>

<?php 
	if( get_theme_mod('sec_articlesblogsectionTpadding',true) ) {
		$sec_articlesblogsectionTpadding = 'padding-top:'.esc_attr(get_theme_mod('sec_articlesblogsectionTpadding')).';';
	}
	if( get_theme_mod('sec_articlesblogsectionBpadding',true) ) {
		$sec_articlesblogsectionBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('sec_articlesblogsectionBpadding')).';';
	}
	if( get_theme_mod('sec_articlesblogsectionLpadding',true) ) {
		$sec_articlesblogsectionLpadding = 'padding-left:'.esc_attr(get_theme_mod('sec_articlesblogsectionLpadding')).';';
	}
	if( get_theme_mod('sec_articlesblogsectionRpadding',true) ) {
		$sec_articlesblogsectionRpadding = 'padding-right:'.esc_attr(get_theme_mod('sec_articlesblogsectionRpadding')).';';
	}
	if( get_theme_mod('sec_articlesblogsectionOpacity',true) ) {
		$sec_articlesblogsectionOpacity = 'opacity:'.esc_attr(get_theme_mod('sec_articlesblogsectionOpacity')).';';
	}
	?>	

	<section id="articles-news-slider" class="wow fadeInUp" style="<?php echo esc_attr($sec_articlesblogsectionTpadding); ?>" "<?php echo esc_attr($sec_articlesblogsectionBpadding); ?>" "<?php echo esc_attr($sec_articlesblogsectionLpadding); ?>" "<?php echo esc_attr($sec_articlesblogsectionRpadding); ?>">

		<div class="container">

			<?php
			$articles_title = get_theme_mod('articles_title', 'Articles & Posts');
			?> 
			<div class="row justify-content-center"> 
				<?php if($articles_title || $articles_title) { ?>
				<div class="section-title">
					
					<h2><?php echo ($articles_title);  ?></h2>
					
					<span class="section__border"></span>
				</div>
				<?php } ?>
			</div>
			
			<div class="owl-carousel owl-theme"> 
				<?php 
				$luzuk_articlesblog_post_count = get_theme_mod('luzuk_articlesblog_post_count', 12 );
				$luzuk_articlesblog_cat_exclude = get_theme_mod('luzuk_articlesblog_cat_exclude');
				$luzuk_articlesblog_cat_exclude = explode(',', $luzuk_articlesblog_cat_exclude);
				$args = array(
					'posts_per_page' => absint($luzuk_articlesblog_post_count),
					'category__not_in' => $luzuk_articlesblog_cat_exclude
				);
				$query = new WP_Query($args);
				if($query -> have_posts()):
					while($query -> have_posts()) : $query -> the_post();
						$lz_fitness_image = wp_get_attachment_image_src(get_post_thumbnail_id() , 'total-blog-thumb');
						?>
						<?php 
						if(has_post_thumbnail()){
							$img = esc_url($lz_fitness_image[0]);
						}
						if(empty($lz_fitness_image)){
							$img = get_template_directory_uri().'/images/nothumb-featured.png';
						}
						?>
						<div class="item">
							<div class="single-post">
								
								<figure class="inner-blog navy">
									<a class="postimg-link" href="<?php the_permalink(); ?>">
									<img class="blog-img" src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
								</a>
									<figcaption><span><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span>
										<h3><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></h3>
										<a href="<?php the_permalink(); ?>"></a> 
									</figcaption>
								</figure>
							
								<div class="articles-date">
									<li><i class="fa fa-calendar"></i><?php echo get_the_date( 'M' ); ?>
									<?php echo get_the_date( 'j' ); ?>,
									<?php echo get_the_date( 'Y' ); ?>
								</li>

							</div>
							<h4>
									<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
								</h4>
							<!-- <p class="post-description">
								<?php 
								if(has_excerpt()){
									echo get_the_excerpt();
								}else{
									echo lz_fitness_excerpt( get_the_content() , 100 );
								}
								?>
							</p> -->

						</div>
					</div>
					<?php
				endwhile;
			endif;
			wp_reset_postdata(); 
			?>
		</div>	
	</div>
	<script>
		$(document).ready(function() {
			$('section#articles-news-slider .owl-carousel').owlCarousel({
				slideSpeed : 2000,
				autoplay: true,
				loop: true,               
				margin: 30,
				responsiveClass: true,
				responsive: {
					0: {
						items: 1,
						nav: true
					},
					600: {
						items:2,
						nav: true
					},
					1000: {
						items:4,
						nav: false,
						loop: false,                   
						margin: 25
					}
				}
			})
		})
	</script> 
</section>
<?php }