<?php 

get_header(); ?>

<!-- ======= Category Banner Section ======= -->
<section class="inner-banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/image/banner.jpg');">
  <div class="banner-overlay"></div>
  <div class="container">
    <div class="banner-content">
      <h1 class="page-title"><?php single_cat_title(); ?></h1>
      <ul class="breadcrumb">
        <li><a href="<?php echo home_url(); ?>">Home</a></li>
        <li><?php single_cat_title(); ?></li>
      </ul>
    </div>
  </div>
</section>

<!-- ======= Category Posts Section ======= -->
<section class="category-posts py-5">
  <div class="container">
    <div class="row g-4">

      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="col-lg-4 col-md-6">
          <div class="category-post-box">
            <div class="category-post-img">
              <a href="<?php the_permalink(); ?>">
                <?php if (has_post_thumbnail()) {
                  the_post_thumbnail('medium_large', ['class' => 'img-fluid']);
                } else { ?>
                  <img src="<?php echo get_template_directory_uri(); ?>/image/default-thumb.jpg" alt="<?php the_title(); ?>">
                <?php } ?>
              </a>
            </div>
            <div class="category-post-content">
              <ul class="meta-box">
                <li><i class="fa fa-calendar"></i> <?php echo get_the_date('M d, Y'); ?></li>
                <li><i class="fa fa-user"></i> <?php the_author(); ?></li>
              </ul>
              <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <p><?php echo wp_trim_words(get_the_excerpt(), 25, '...'); ?></p>
              <a href="<?php the_permalink(); ?>" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
            </div>
          </div>
        </div>
      <?php endwhile; else : ?>
        <div class="col-12 text-center">
          <p>No posts found in this category.</p>
        </div>
      <?php endif; ?>

    </div>

    <!-- Pagination -->
    <div class="pagination-wrap mt-5">
      <?php
        the_posts_pagination(array(
          'mid_size'  => 2,
          'prev_text' => __('« Prev', 'textdomain'),
          'next_text' => __('Next »', 'textdomain'),
        ));
      ?>
    </div>
  </div>
</section>

<?php get_footer(); ?>