<?php
    $left_post = get_theme_mod('crt_manage_hero_v1_left_post');
    $center_post = get_theme_mod('crt_manage_hero_v1_center_post');
    $right_post = get_theme_mod('crt_manage_hero_v1_right_post');
?>

<div class="container">
    <div class="hero-v2__inner d-flex">
        <div class="hero-v2_col hero-v2_col--left">
            <?php if(!empty($left_post)): ?>
                <?php foreach ( $left_post as $post_id ) {
                    $post = get_post( $post_id );
                    $get_permalink = get_permalink( $post );
                    if(wp_is_mobile()) {
                        $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-small' );
                    } else {
                        $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-medium' );
                    }
                    $avatar = get_avatar($post->post_author);
                    ?>
                    <div class="hero-v2_col--item mb-4">
                        <div class="hero-v2_col--item_inner text-center">
                            <a href="<?php echo esc_attr($get_permalink); ?>">
                                <img class="lazy" data-src="<?php echo esc_attr($get_thumbnail_url); ?>" alt="<?php echo esc_attr($post->post_title); ?>" />
                            </a>
                            <h2 class="hero-v2__title mt-3 mb-1"><a href="<?php echo esc_attr($get_permalink); ?>"><?php echo esc_html($post->post_title); ?></a></h2>
                            <?php matthew_magazine_blog_entry_options($post, array('class' => 'mt-1 justify-content-center', 'entry_date' => true, 'entry_cat' => true, 'entry_author' => true, 'entry_read_time' => false, 'entry_comment' => false, 'entry_view_count' => false)) ?>
                        </div>
                    </div>
                <?php } ?>
            <?php endif; ?>
        </div>
        <div class="hero-v2_col hero-v2_col--center">
            <?php if(!empty($center_post)): ?>
                <?php
                foreach ( $center_post as $post_id ) :
                    $post = get_post( $post_id );
                    $get_permalink = get_permalink( $post );
                    if(wp_is_mobile()) {
                        $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-small' );
                    } else {
                        $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-medium' );
                    }
                    ?>
                    <div class="hero-v2_col--item">
                        <div class="hero-v2_col--item_inner text-center">
                            <a href="<?php echo esc_attr($get_permalink); ?>">
                                <img class="lazy" data-src="<?php echo esc_attr($get_thumbnail_url); ?>" alt="<?php echo esc_attr($post->post_title); ?>" />
                            </a>
                            <h2 class="hero-v2__title my-3"><a href="<?php echo esc_attr($get_permalink); ?>"><?php echo esc_html($post->post_title); ?></a></h2>
                            <?php matthew_magazine_blog_entry_options($post, array('class' => 'mt-2 justify-content-center', 'entry_date' => true, 'entry_cat' => true, 'entry_author' => true, 'entry_read_time' => false, 'entry_comment' => false, 'entry_view_count' => false)) ?>
                        </div>
                    </div>
                <?php endforeach; endif; ?>
        </div>
        <div class="hero-v2_col hero-v2_col--right">
        <?php if(!empty($right_post)): ?>
            <?php foreach ( $right_post as $post_id ) {
                $post = get_post( $post_id );
                $get_permalink = get_permalink( $post );
                if(wp_is_mobile()) {
                    $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-small' );
                } else {
                    $get_thumbnail_url = get_the_post_thumbnail_url( $post , 'matthew-magazine-blog-image-medium' );
                }
                ?>
                <div class="hero-v2_col--item mb-4">
                    <div class="hero-v2_col--item_inner text-center">
                        <a href="<?php echo esc_attr($get_permalink); ?>">
                            <img class="lazy" data-src="<?php echo esc_attr($get_thumbnail_url); ?>" alt="<?php echo esc_attr($post->post_title); ?>" />
                        </a>
                        <h2 class="hero-v2__title mt-3 mb-1"><a href="<?php echo esc_attr($get_permalink); ?>"><?php echo esc_html($post->post_title); ?></a></h2>
                        <?php matthew_magazine_blog_entry_options($post, array('class' => 'mt-1 justify-content-center', 'entry_date' => true, 'entry_cat' => true, 'entry_author' => true, 'entry_read_time' => false, 'entry_comment' => false, 'entry_view_count' => false)) ?>
                    </div>
                </div>
            <?php } ?>
        <?php endif; ?>
    </div>
    </div>
</div>


