<?php
    $className = '';
    $className .= !empty($block['className']) ? ' '.$block['className'] : '';
    $className .= !empty($block['align']) ? ' '.$block['align'] : '';
    $className .= get_field('background_color') ? ' '.get_field('background_color') : '';
    $className .= get_field('section_class') ? ' '.get_field('section_class') : '';

    // Load values and assing defaults.
    $title = get_field('title') ?: false;
    $text = get_field('text') ?: false;
    $videos = get_field('videos') ?: false;
    $id = get_field('section_id') ?: 'videoTestimonials';
?>

<section class="section videos-section block <?php echo $className; ?>" id="<?php echo $id; ?>">
    <div class="container text-center">
        <?php if ($title): ?>
			<h2 class="sub-title text-center"><?php echo $title; ?></h2>
        <?php endif; ?>
        <?php if ($text): ?>
            <div class="text"><?php echo $text; ?></div>
        <?php endif; ?>
        <div class="row pt-3">
            <div class="col-md-7 big-video">
                <?php 
                    $video = is_array($videos) ? reset($videos) : false;
                    $videoUrl = ($video && is_array($video) && array_key_exists('video_url', $video)) ? $video['video_url'] : false;
                ?>
                <div class="video-frame">
                    <iframe width="640" height="580" frameborder="0" allowfullscreen="true" src="<?php echo apply_filters('iframe_url', $videoUrl); ?>"></iframe>
                </div>
            </div>
            <div class="col-md-5 small-videos">
                <?php foreach ($videos as $key => $video): ?>
                    <?php $imgId = array_key_exists('background_image', $video) ? $video['background_image'] : false; ?>
                    <?php $videoUrl = array_key_exists('video_url', $video) ? $video['video_url'] : false; ?>
                    <?php $label = array_key_exists('label', $video) ? $video['label'] : false; ?>
                    <?php if ($imgId && $url): ?>
                        <div class="px-3 py-2 small-video js-video <?php echo !$key ? 'active' : ''; ?>" data-src="<?php echo apply_filters('iframe_url', $videoUrl); ?>">
                            <div class="d-flex justify-content-vetween align-items-center">
                                <?php echo wp_get_attachment_image($imgId, 'thumbnail', false, ['class' => 'video-thumbnail']); ?>
                                <i class="fa fa-play icon"></i>
                                <div class="label"><small><?php echo $label; ?></small></div>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
