<?php if( get_theme_mod( 'blog_post_display_option', true ) ) :
  $title = get_theme_mod( 'blog_post_section_title', '' );
  $paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
  $posts_per_page = get_theme_mod( 'number_of_blog_post', 4 );
  $cat = get_theme_mod( 'blog_post_category' ) ;
  $args = array(
    'post_type' => 'post',
    'category_name'       =>  $cat ,
    'posts_per_page'    =>  $posts_per_page,
    'paged'     => $paged
  );
  $query = new WP_Query( $args );
  $max_pages = $query->max_num_pages;
  if ( $query->have_posts() ) :
?>
<section class="blog-posts my-64">
  <div class="container-xl">
    <?php if (! empty($title)) { ?>
    <h2 class=""><?php echo esc_html($title); ?></h2>
    <?php } ?>
    <div id="owl-blog" class="owl-carousel owl-theme">
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
      <div class="d-flex flex-column justify-content-start align-items-start flex-nowrap overflow-hidden">
        <div class="w-p100 h-280 bg-info bg-opacity-25">
          <?php the_post_thumbnail( array('auto', 280), array('class' => 'w-p100 h-p100 object-fit-cover object-position-center') ); ?>
        </div>
        <div class="d-flex flex-column justify-content-start align-items-start flex-nowrap px-12 py-16">
          <h3 class="mb-12 fs-4 lh-sm"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <div class="mb-12">
            <span class="text-dark text-opacity-50">
              <i class="fa fa-clock-o text-primary" aria-hidden="true"></i> <?php echo esc_attr( get_the_date('d M Y') ); ?>
            </span>
          </div>
          <div class=""><?php the_excerpt(); ?></div>
          <div class="text-dark text-uppercase fs-6"><a href="<?php echo esc_url( the_permalink() ); ?>"><?php esc_html_e('Read more','default'); ?></a></div>
        </div>
      </div>
    <?php endwhile; wp_reset_postdata(); ?>
    </div>
  </div>
</section>
<style>
  /* Navigation buttons */
  .blog-posts .owl-nav .owl-prev,
  .blog-posts .owl-nav .owl-next {
      width: 50px;
      height: 50px;
      border-radius: 5px;
      position: absolute;
      top: 48%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid #808080;
      color: #000;
      box-shadow: 0 0 50px 0 rgb(0 0 0 / 25%);
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transition: all 0.3s ease-in-out;
  }
  .blog-posts .owl-nav .owl-prev {
      left: 10px;
  }
  .blog-posts .owl-nav .owl-next {
      right: 10px;
  }
  .blog-posts .owl-nav .owl-prev span,
  .blog-posts .owl-nav .owl-next span {
      height: 26px;
      font-size: 26px;
      line-height: 1;
  }
  .blog-posts .owl-nav .owl-prev:hover,
  .blog-posts .owl-nav .owl-next:hover {
      background: var(--primary-color);
      color: var(--light-color);
  }
  .blog-posts .owl-nav .owl-prev.disabled,
  .blog-posts .owl-nav .owl-next.disabled {
      display: none;
      pointer-events: none;
  }
</style>
        
<?php endif; endif; ?>