<?php
/**
 * Template Name: Blog
 */
get_header("blog");
?>

<div class="container">

    <div class="row results-grid">
        <?php
        $paged = (get_query_var("paged")) ? get_query_var("paged") : 1;

        $args = [
            "posts_per_page" => 14,
            "post_type"      => "post",
            "post_status"    => "publish",
            "paged"          => $paged,
        ];

        $query = new WP_Query($args);

        if ($query->have_posts()) :
            $counter = 1;
            while ($query->have_posts()) :
                $query->the_post();

                // Adjust image size and card style based on post position
                if ($counter === 1) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-lg';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'large');
                } elseif ($counter === 2) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-md';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'medium');
                } else {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-sm';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'small');
                }

                if ($paged !== 1) {
                    // Set a default style for paged posts if needed
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card';
                }
                ?>
                <div class="<?php echo $colClass; ?> js-post-card-wrap">
                    <div class="card mb-3">
                        <div class="image-container">
                            <a href="<?php the_permalink(); ?>" aria-label="<?php the_title(); ?>">
                                <img src="<?php echo $featuredImage; ?>" class="card-img-top"
                                     alt="<?php the_title(); ?>">
                            </a>
                            <div class="image-overlay">
                                <!-- Comments Icon -->
                                <div class="overlay-icon">
                                    <i class="fas fa-comment"></i>
                                    <span class="ml-1"><?php echo get_comments_number(); ?></span>
                                </div>
                                <!-- Shares Icon -->
                                <div class="overlay-icon">
                                    <i class="fas fa-share-alt"></i>
                                    <span class="ml-1"><?php echo rand(123, 2111); ?></span>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h5>
                            <div class="card-text">
                                <?php the_excerpt(); ?>
                            </div>
                            <div class="card-meta">
                                <span><?php echo get_the_date("F jS, Y"); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            endwhile;
        else:
            ?>
            <div class="error">
                No Posts
            </div>
        <?php endif; ?>

        <?php wp_reset_query(); ?>
        <script type="text/javascript">
          /* <![CDATA[ */
          var yqhoro_config = {
            "yqhoro_page_number_max": <?php echo $query->max_num_pages; ?>,
            "yqhoro_page_number_next": "2",
            "yqhoro_page_link_next": "<?php echo get_bloginfo("url"); ?>\/blog\/page\/9999999999\/",
            "yqhoro_load_more": "More Posts",
            "yqhoro_loading": "Loading",
          };

          /* ]]> */
        </script>
    </div>

    <div class="text-center pb-4">
        <button class="js-load-posts d-inline-block btn btn-success">More Posts</button>
    </div>

</div>
<!-- End off-canvas-container -->

<script>
</script>
<?php
get_footer("blog");
?>