<?php
/**
 * Template for displaying the blog posts page
 *
 * This is the template that displays when a static front page is set
 * and this is the posts page.
 *
 * @package Paws_And_Care
 * @since 1.0.0
 */

get_header();

// Page Header with custom args for blog
get_template_part( 'template-parts/page', 'header', array(
    'title'       => __( 'Pet Care Blog', 'paws-and-care' ),
    'subtitle'    => __( 'Expert tips, advice, and insights for pet owners', 'paws-and-care' ),
    'breadcrumbs' => array(
        array( 'label' => __( 'Home', 'paws-and-care' ), 'url' => home_url( '/' ) ),
        array( 'label' => __( 'Blog', 'paws-and-care' ), 'url' => '' ),
    ),
) );
?>

    <!-- Blog Section -->
    <section id="primary-content" class="py-5 blog-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <?php if ( have_posts() ) : ?>
                        <div class="row g-4">
                            <?php
                            while ( have_posts() ) :
                                the_post();
                                ?>
                                <div class="col-md-6">
                                    <div class="blog-card card h-100">
                                        <?php if ( has_post_thumbnail() ) : ?>
                                            <a href="<?php the_permalink(); ?>">
                                                <?php the_post_thumbnail( 'medium_large', array( 'class' => 'card-img-top' ) ); ?>
                                            </a>
                                        <?php endif; ?>
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <?php
                                                $categories = get_the_category();
                                                if ( ! empty( $categories ) ) :
                                                    ?>
                                                    <span class="badge bg-primary me-2"><?php echo esc_html( $categories[0]->name ); ?></span>
                                                <?php endif; ?>
                                                <small class="text-muted"><i class="fa-regular fa-calendar me-1"></i> <?php echo esc_html( get_the_date() ); ?></small>
                                            </div>
                                            <h5 class="card-title">
                                                <a href="<?php the_permalink(); ?>" class="text-decoration-none text-dark"><?php the_title(); ?></a>
                                            </h5>
                                            <p class="card-text"><?php echo wp_trim_words( get_the_excerpt(), 20, '...' ); ?></p>
                                            <div class="d-flex align-items-center justify-content-between">
                                                <a href="<?php the_permalink(); ?>" class="btn btn-link text-primary p-0">
                                                    <?php esc_html_e( 'Read More', 'paws-and-care' ); ?> <i class="fa-solid fa-arrow-right ms-1"></i>
                                                </a>
                                                <small class="text-muted">
                                                    <i class="fa-regular fa-clock me-1"></i> <?php echo esc_html( paws_and_care_reading_time() ); ?>
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        </div>

                        <!-- Pagination -->
                        <nav aria-label="Blog pagination" class="mt-5 blog-pagination">
                            <?php
                            the_posts_pagination( array(
                                'mid_size'  => 2,
                                'prev_text' => __( 'Previous', 'paws-and-care' ),
                                'next_text' => __( 'Next', 'paws-and-care' ),
                                'class'     => 'pagination justify-content-center',
                            ) );
                            ?>
                        </nav>

                    <?php else : ?>
                        <?php get_template_part( 'template-parts/content', 'none' ); ?>
                    <?php endif; ?>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <?php get_template_part( 'template-parts/blog', 'sidebar' ); ?>
                </div>
            </div>
        </div>
    </section>

<?php
get_footer();

