<?php
/**
 * The template part for displaying posts page carousel
 * 
 * @uses Parent div tag class attribute "blogCards__container" to init stylings
 *  
 */
    
$totalPosts = wp_count_posts()->publish;
$recentPosts = new WP_Query(array(
    "posts_per_page" => 10
));

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

if($totalPosts > 10): 

?>

<section class="carousel__wrapper">
    <div id="carousel" class="carousel__stack">

    <?php if($recentPosts->have_posts() ): ?>

        <?php while( $recentPosts->have_posts()) : $recentPosts->the_post();
                $postID = get_the_ID();
                $cat = get_the_category($postID)[0]; 

                $cover = get_field("cover", $postID);
                $introduction = get_field("introduction", $postID); ?>

        <div class="carousel__postCard">
            <div class="carousel__postBg">
                <img alt="<?php echo esc_attr($cover['alt']); ?>" class="lazy"
                    src="<?php echo esc_attr($cover['sizes']['thumbnail']); ?>"
                    data-src="<?php echo esc_attr($cover['sizes']['large']); ?>" 
                    data-srcset="<?php echo esc_attr($cover['sizes']['medium']); ?> 300w,
                    <?php echo esc_attr($cover['sizes']['large']); ?> 768w,
                    <?php echo esc_attr($cover['sizes']['1536x1536']); ?> 1024w" 
                    data-sizes="100w" />
                <div class="hero__overlayDynamic" aria-hidden="true"></div>
            </div>
            <div class="carousel__postBody">
                <a href="<?php echo esc_attr(get_the_permalink()) ?>">
                    <h2 class="btnText"><?php echo esc_html(get_the_title()) ?></h2>
                </a>
                <div class="carousel__postInfo">
                    <?php echo process_post_cat($postID, false); ?>
                    <div class="carousel__postDate">
                        <span class="far fa-clock"></span>
                        <span><?php the_time( 'F j, Y' ); ?></span>
                    </div>
                </div>
            </div>
        </div>

        <?php endwhile; ?>
        <?php endif; ?>

    </div>
    <button id="prev">
        <span class="fas fa-chevron-left"></span>
    </button>
    <button id="next">
        <span class="fas fa-chevron-right"></span>
    </button>
</section>

<?php
 
endif;