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

	<?php 
	if( get_theme_mod('sec_treandingblogsectionTpadding',true) ) {
		$sec_treandingblogsectionTpadding = 'padding-top:'.esc_attr(get_theme_mod('sec_treandingblogsectionTpadding')).';';
	}
	if( get_theme_mod('sec_treandingblogsectionBpadding',true) ) {
		$sec_treandingblogsectionBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('sec_treandingblogsectionBpadding')).';';
	}
	if( get_theme_mod('sec_treandingblogsectionLpadding',true) ) {
		$sec_treandingblogsectionLpadding = 'padding-left:'.esc_attr(get_theme_mod('sec_treandingblogsectionLpadding')).';';
	}
	if( get_theme_mod('sec_treandingblogsectionRpadding',true) ) {
		$sec_treandingblogsectionRpadding = 'padding-right:'.esc_attr(get_theme_mod('sec_treandingblogsectionRpadding')).';';
	}
	if( get_theme_mod('sec_treandingblogsectionOpacity',true) ) {
		$sec_treandingblogsectionOpacity = 'opacity:'.esc_attr(get_theme_mod('sec_treandingblogsectionOpacity')).';';
	}
	?>	

	<section id="treanding-news-slider" class="wow fadeInUp" style="<?php echo esc_attr($sec_treandingblogsectionTpadding); ?>" "<?php echo esc_attr($sec_treandingblogsectionBpadding); ?>" "<?php echo esc_attr($sec_treandingblogsectionLpadding); ?>" "<?php echo esc_attr($sec_treandingblogsectionRpadding); ?>">

		<div class="container">

			<?php
			$treanding_title = get_theme_mod('treanding_title', 'Trending Posts');
			?> 
			<div class="row justify-content-center"> 
				<?php if($treanding_title || $treanding_title) { ?>
					<div class="section-title">
						
						<h2><?php echo ($treanding_title);  ?></h2>
						
						<span class="section__border"></span>
					</div>
				<?php } ?>
			</div>
			
			<div class="owl-carousel owl-theme"> 
				<?php 
				$luzuk_treandingblog_post_count = get_theme_mod('luzuk_treandingblog_post_count', 12 );
				$luzuk_treandingblog_cat_exclude = get_theme_mod('luzuk_treandingblog_cat_exclude');
				$luzuk_treandingblog_cat_exclude = explode(',', $luzuk_treandingblog_cat_exclude);
				$args = array(
					'posts_per_page' => absint($luzuk_treandingblog_post_count),
					'category__not_in' => $luzuk_treandingblog_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>
								<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 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>
						</div>
					</div>
					<?php
				endwhile;
			endif;
			wp_reset_postdata(); 
			?>
		</div>	
	</div>
	<script>
		$(document).ready(function() {
			$('section#treanding-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: true,
						loop: false,                   
						margin: 25
					}
				}
			})
		})
	</script> 
</section>
<?php }