<?php
/**
 * Template part for displaying slider section
 *
 * @package Stylish Blog
 * @subpackage stylish_blog
 */
?>

<?php if( get_theme_mod( 'stylish_blog_slider_arrows', true) != '') { ?>
  <?php $stylish_blog_static_image = get_stylesheet_directory_uri() . '/assets/images/slider-img1.png'; ?>
  <section id="main-post-slider">
    <div class="slider-post">
      <div id="sync1" class="owl-carousel owl-theme">
      <?php
        $i=1;
        $stylish_blog_args = array(
          'post_type' => 'post',
          'post_status' => 'publish',
          'category_name' => get_theme_mod('stylish_blog_main_post_slider_category_setting'),
          'order' => 'ASC'
        );  
        $stylish_blog_query = new WP_Query($stylish_blog_args); 
        if ( $stylish_blog_query->have_posts() ) :  while ($stylish_blog_query->have_posts()) : $stylish_blog_query->the_post(); 
          if(has_post_thumbnail()){
              $stylish_blog_slide_bgimage = 'background-image:url(\''.get_the_post_thumbnail_url().'\')';
            }else{
              $stylish_blog_slide_bgimage = 'background-image:url(' . get_stylesheet_directory_uri() . '/assets/images/sliderimage.png)';
            }
          ?>      
        <div class="main-news-box " style="<?php echo esc_attr($stylish_blog_slide_bgimage); ?>">
          <div class="container">
            <div class="main-news-inner">
              <div class="main-auther-details">
                <div class="media">
                  <?php 
                    $get_author_id = get_the_author_meta('ID');
                    echo get_avatar( get_the_author_meta('ID') );
                  ?>
                  <div class="media-body">
                    <span class="auther_name"><?php echo get_the_author_meta('display_name', $get_author_id); ?></span>
                    <?php echo the_category(); ?>
                  </div>
                </div>
              </div>
              <?php if (get_theme_mod('stylish_blog_show_slider_title', true)) : ?>
                <h1 class="main-news-inner-box"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
              <?php endif; ?>
              <?php if (get_theme_mod('stylish_blog_show_slider_content', true)) : ?>
                <p class="main-news-text"><?php $stylish_blog_excerpt = get_the_excerpt(); echo esc_html( stylish_blog_string_limit_words( $stylish_blog_excerpt, esc_attr(get_theme_mod('stylish_blog_slider_excerpt_length','20')))); ?></p>
              <?php endif; ?>
              <div class="post-metabox">
                <div class="post-time"><i class="fas fa-clock px-2 mb-2"></i><?php echo esc_html (get_the_time()) ; ?></div>
                <div class="post-date"><i class="far fa-calendar-alt"></i><?php echo esc_html( get_the_date() ); ?></div>
                <div class="post-comment"><i class="fas fa-comment px-2 mb-2"></i><?php comments_number( __( '0 Comments','stylish-blog' ) ); ?></div>
              </div>
              <div class="more-btn">
                <a class="theme_button2" href="<?php the_permalink(); ?>"><?php esc_html_e('Read More','stylish-blog'); ?><i class="fas fa-chevron-right px-2"></i></a>
              </div>
            </div>
          </div>
        </div>
      <?php endwhile; endif; ?>
    </div>
    <div class="navigation-thumbs-block">
      <div class="container">
        <div id="sync2" class="navigation-thumbs owl-carousel owl-theme">
          <?php
            $stylish_blog_args = array(
              'post_type' => 'post',
              'post_status' => 'publish',
              'category_name' => get_theme_mod('stylish_blog_main_post_slider_category_setting'),
              'order' => 'ASC'
            );  
            $stylish_blog_query = new WP_Query($stylish_blog_args); 
            if ( $stylish_blog_query->have_posts() ) :  while ($stylish_blog_query->have_posts()) : $stylish_blog_query->the_post();
          ?>
            <div class="slide-box px-2">
              <div class="row">
                <div class="col-lg-4 col-4 align-self-center">
                   <?php if(has_post_thumbnail()){ ?>
                <img src="<?php the_post_thumbnail_url('full'); ?>"/> <?php }else {echo ('<img src="'. esc_url($stylish_blog_static_image).'">'); } ?>
                </div>
                <div class="col-lg-8 col-8 align-self-center">
                   <h2 class="main-news-text"><?php echo esc_html( wp_trim_words( get_the_content(), 10 ) );?></h2>
                </div>
              </div>
            </div>
          <?php endwhile; endif; ?>
        </div>
      </div>
    </div>
    </div>
</section>

<?php } ?>
