<?php
if (function_exists('render_block_preview_image') && render_block_preview_image($block, 'Image Grid Section')) {
    return;
}
$className = 'image-grid-section sk-section-spacing ' . ($block['className'] ?? '');
?>
<section class="<?php echo esc_attr(trim($className)); ?>">
    <div class="container">
        <div class="media-wrapper">
            <?php if (have_rows('left_images')) : ?>
                <div class="left-images">
                    <?php while (have_rows('left_images')) : the_row();
                        $left_image = get_sub_field('left_image');
                        if (isset($left_image) && !empty($left_image) && isset($left_image['url']) && !empty($left_image['url'])) :
                    ?>
                            <img decoding="async" src="<?php echo esc_url($left_image['url']); ?>" alt="<?php echo (isset($left_image['alt']) && !empty($left_image['alt'])) ? esc_attr($left_image['alt']) : ''; ?>">
                    <?php endif;
                    endwhile; ?>
                </div>
            <?php endif;
            $middle_image = get_field('middle_image');
            if (isset($middle_image) && !empty($middle_image) && isset($middle_image['url']) && !empty($middle_image['url'])) : ?>
                <div class="middle-image">
                    <img decoding="async" src="<?php echo esc_url($middle_image['url']); ?>" alt="<?php echo (isset($middle_image['alt']) && !empty($middle_image['alt'])) ? esc_attr($middle_image['alt']) : ''; ?>">
                </div>
            <?php endif;
            if (have_rows('right_images')) :   ?>
                <div class="right-images">
                    <?php while (have_rows('right_images')) : the_row();
                        $right_image = get_sub_field('right_image');
                        if (isset($right_image) && !empty($right_image) && isset($right_image['url']) && !empty($right_image['url'])) :
                    ?>
                            <img decoding="async" src="<?php echo esc_url($right_image['url']); ?>" alt="<?php echo (isset($right_image['alt']) && !empty($right_image['alt'])) ? esc_attr($right_image['alt']) : ''; ?>">
                    <?php
                        endif;
                    endwhile; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>