<?php get_header(); ?>

<section class="blog-category-page">
    <div class="container">

        <div class="blog-category-heading">
            <span>Blog</span>
            <h1><?php single_cat_title(); ?></h1>

            <?php if (category_description()) : ?>
                <div class="blog-category-description">
                    <?php echo category_description(); ?>
                </div>
            <?php endif; ?>
        </div>

        <?php if (have_posts()) : ?>

            <div class="row g-4">

                <?php while (have_posts()) : the_post(); ?>

                    <?php
                    $image = has_post_thumbnail()
                        ? get_the_post_thumbnail_url(get_the_ID(), 'large')
                        : get_template_directory_uri() . '/assets/images/no-image.jpg';
                    ?>

                    <div class="col-lg-4 col-md-6 col-sm-6 col-12">
                        <article class="blog-grid-card">

                            <a href="<?php the_permalink(); ?>" class="blog-grid-img">
                                <img src="<?php echo esc_url($image); ?>" alt="<?php the_title_attribute(); ?>">
                            </a>

                            <div class="blog-grid-content">

                                <div class="blog-grid-meta">
                                    <span><?php echo esc_html(get_the_date('M d, Y')); ?></span>
                                    <span><?php the_author(); ?></span>
                                </div>

                                <h2>
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h2>

                                <p>
                                    <?php
                                    if (has_excerpt()) {
                                        echo esc_html(wp_trim_words(get_the_excerpt(), 18));
                                    } else {
                                        echo esc_html(wp_trim_words(get_the_content(), 18));
                                    }
                                    ?>
                                </p>

                                <a href="<?php the_permalink(); ?>" class="blog-read-more">
                                    Read More
                                </a>

                            </div>

                        </article>
                    </div>

                <?php endwhile; ?>

            </div>

            <div class="blog-pagination">
                <?php
                the_posts_pagination(array(
                    'mid_size'  => 2,
                    'prev_text' => __('« Previous'),
                    'next_text' => __('Next »'),
                ));
                ?>
            </div>

        <?php else : ?>

            <div class="blog-no-post">
                <h3>No posts found in this category.</h3>
            </div>

        <?php endif; ?>

    </div>
</section>

<?php get_footer(); ?>