<?php
/**
 * Slider Section
 * 
 * @package online_mobile_accessories
 */
$online_mobile_accessories_slider = get_theme_mod('online_mobile_accessories_slider_setting', false);
$online_mobile_accessories_slider_sub_title = get_theme_mod( 'online_mobile_accessories_slider_sub_title' );
$online_mobile_accessories_args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
    'category_name' => get_theme_mod('online_mobile_accessories_blog_slide_category'),
    'posts_per_page' => 3,
);
?>

<?php if ($online_mobile_accessories_slider): ?>
  <div class="slider position-relative pt-5">
    <div class="owl-carousel">
      <?php
      $online_mobile_accessories_arr_posts = new WP_Query($online_mobile_accessories_args);
      if ($online_mobile_accessories_arr_posts->have_posts()) :
          while ($online_mobile_accessories_arr_posts->have_posts()) :
            $online_mobile_accessories_arr_posts->the_post();
            ?>
            <div class="slider_inner_box">
              <div class="container">
                <div class="row">
                  <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center slider_box wow zoomIn" data-wow-duration="2s">
                    <?php if ( $online_mobile_accessories_slider_sub_title ) : ?>
                      <p class="slider-sub-title text-capitalize text-lg-start text-md-start text-center mb-3"><?php echo esc_html( $online_mobile_accessories_slider_sub_title ); ?></p>
                    <?php endif; ?>
                    <h2 class="mb-2 slider-main-title text-capitalize text-lg-start text-md-start text-center"><?php the_title(); ?></h2>
                    <p class="mb-4 slider-para text-lg-start text-md-start text-center"><?php echo wp_trim_words(get_the_content(), 30); ?></p>
                    <div class="slider-btn text-lg-start text-md-start text-center">
                      <a href="<?php echo esc_url(get_permalink($post->ID)); ?>" class="text-capitalize"><?php esc_html_e('shop now', 'online-mobile-accessories'); ?></a>
                    </div>
                  </div>
                  <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-end slider-img-box d-flex justify-content-center">
                    <?php if (has_post_thumbnail()): ?>
                      <?php the_post_thumbnail(); ?>
                    <?php else: ?>
                      <img src="<?php echo get_stylesheet_directory_uri() . '/images/default.png'; ?>" alt="<?php esc_attr_e('Image', 'online-mobile-accessories'); ?>">
                    <?php endif; ?>
                  </div>
                </div>
              </div>
            </div>
          <?php endwhile; ?>
          <?php wp_reset_postdata(); ?>
      <?php endif; ?>
    </div>
  </div>
<?php endif; ?>