<?php
/**
 * Template for displaying default element.
 *
 *
 * @author      ThimPress
 * @package     Thim_Builder/Templates
 * @version     1.0.0
 * @author      Thimpress, tuanta
 */

$title       = $instance['title'];
$text_icon   = $instance['text_icon'];
$video       = $instance['video'];
if(is_array($instance['cover_image'])){
    $cover_image = wp_get_attachment_image_url( $instance['cover_image'][0]['id'], 'full' );
}else{
    $cover_image = wp_get_attachment_image_url( $instance['cover_image'], 'full' );
}

$auto_play = ( isset( $instance['auto_play'] ) && $instance['auto_play'] === 'false' ) ? 'false' : 'true';
if ( $instance['auto_play'] == 'yes' ) {
	$auto_play = 'true';
} else {
	$auto_play = 'false';
}

if ( $instance['muted'] == 'yes' ) {
	$muted = 'muted';
} else {
	$muted = '';
}

$loop = ( isset( $instance['loop'] ) && $instance['loop'] === 'no' ) ? '' : 'loop';

?>
<div class="thim-sc-video">
    <div class="background-video" data-auto-play = "<?php echo esc_attr($auto_play) ?>">
        <div class="cover-image" style="background-image: url(<?php echo esc_url( $cover_image ); ?>)"></div>
        <div class="icons">
            <h3 class="title"><?php echo $title; ?></h3>
            <i class="video-play las la-play"></i><span class="text-icon"><?php echo $text_icon; ?></span>
        </div>
        <video <?php echo esc_attr( $loop ); ?> <?php echo esc_attr( $muted ); ?> class="full-screen-video"
                                                                                  data-autoplay="<?php echo esc_attr( $muted ); ?>">
            <source src="<?php echo esc_attr( $video ); ?>" type="video/mp4">
        </video>
    </div>
</div>