<?php
/**
 * The template for displaying archive pages
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<div class="page-hero text-center py-5">
    <div class="container">
        <h1 class="page-title font-heading fw-bold text-white mb-2">
            <?php
            if ( is_home() && ! is_front_page() ) {
                single_post_title();
            } else {
                the_archive_title();
            }
            ?>
        </h1>
        <div class="accent-line mx-auto bg-accent"></div>
    </div>
</div>

<main id="primary" class="site-main py-5 bg-light">
    <div class="container">
        <?php if ( have_posts() ) : ?>
            <div class="row g-4">
                <?php
                while ( have_posts() ) :
                    the_post();
                    ?>
                    <div class="col-lg-4 col-md-6 d-flex">
                        <article class="news-card bg-white border border-light rounded-4 shadow-sm overflow-hidden w-100 d-flex flex-column hover-shadow">
                            <div class="news-image-box position-relative bg-light" style="height: 200px;">
                                <?php if ( has_post_thumbnail() ) : ?>
                                    <?php the_post_thumbnail( 'medium', array( 'class' => 'w-100 h-100 object-cover' ) ); ?>
                                <?php else : ?>
                                    <div class="w-100 h-100 d-flex align-items-center justify-content-center bg-primary-light text-primary">
                                        <i class="fa-regular fa-newspaper fs-2"></i>
                                    </div>
                                <?php endif; ?>
                                <span class="news-date badge bg-accent text-primary-dark position-absolute bottom-2 start-2 font-heading text-xs fw-bold">
                                    <i class="fa-regular fa-calendar me-1"></i><?php echo get_the_date('d/m/Y'); ?>
                                </span>
                            </div>
                            <div class="p-3 d-flex flex-column flex-grow-1">
                                <h3 class="news-card-title font-heading fw-bold text-dark fs-6 mb-2 line-clamp-2">
                                    <a href="<?php the_permalink(); ?>" class="text-dark hover-primary text-decoration-none"><?php the_title(); ?></a>
                                </h3>
                                <p class="news-card-desc text-muted text-xs mb-3 line-clamp-3"><?php echo esc_html( wp_strip_all_tags( get_the_excerpt() ) ); ?></p>
                                <a href="<?php the_permalink(); ?>" class="btn-readmore text-primary text-xs fw-bold mt-auto text-decoration-none">
                                    <?php esc_html_e( 'Xem chi tiết', 'theme-anphat' ); ?><i class="fa-solid fa-chevron-right ms-1 text-xs"></i>
                                </a>
                            </div>
                        </article>
                    </div>
                <?php endwhile; ?>
            </div>

            <div class="posts-pagination text-center mt-5">
                <?php
                the_posts_pagination( array(
                    'mid_size'  => 2,
                    'prev_text' => '<i class="fa-solid fa-chevron-left"></i>',
                    'next_text' => '<i class="fa-solid fa-chevron-right"></i>',
                ) );
                ?>
            </div>
        <?php else : ?>
            <div class="no-results text-center py-5">
                <span class="fs-1 text-muted"><i class="fa-solid fa-inbox"></i></span>
                <h2 class="font-heading text-dark mt-3"><?php esc_html_e( 'Chưa có bài viết nào', 'theme-anphat' ); ?></h2>
                <p class="text-muted text-sm"><?php esc_html_e( 'Các bài viết mới nhất sẽ được đăng tải sớm tại đây.', 'theme-anphat' ); ?></p>
            </div>
        <?php endif; ?>
    </div>
</main>

<?php get_footer(); ?>
