<?php if(!defined('ABSPATH')) { return; }
    /*
     * Build and display the element
     */

    $options = (isset($GLOBALS['options']['circ_1']) ? $GLOBALS['options']['circ_1'] : null);
    if(empty($options)){
        return;
    }

    $style = '';
    if ( isset ( $options['ww_header_style'] ) && ! empty ( $options['ww_header_style'] ) ) {
        $style = 'uh_' . $options['ww_header_style'];
    }

    $countitm = 0;
    $singleItem = $options['single_circ1'];
    $hasItems = isset ( $singleItem ) && is_array( $singleItem );
    if($hasItems){
        $countitm = count($singleItem);
    }

    $bottom_mask = $this->opt('hm_header_bmasks','none');
    $bm_class = $bottom_mask != 'none' ? 'maskcontainer--'.$bottom_mask : '';
?>
    <div class="kl-slideshow circularcarousel__slideshow <?php echo $style; ?> <?php echo $bm_class ?>">

        <div class="bgback"></div>
        <?php
            WpkPageHelper::zn_background_source( array(
                'source_type' => $this->opt('source_type'),
                'source_background_image' => $this->opt('background_image'),
                'source_vd_yt' => $this->opt('source_vd_yt'),
                'source_vd_self_mp4' => $this->opt('source_vd_self_mp4'),
                'source_vd_self_ogg' => $this->opt('source_vd_self_ogg'),
                'source_vd_self_webm' => $this->opt('source_vd_self_webm'),
                'source_vd_vp' => $this->opt('source_vd_vp'),
                'source_vd_autoplay' => $this->opt('source_vd_autoplay'),
                'source_vd_loop' => $this->opt('source_vd_loop'),
                'source_vd_muted' => $this->opt('source_vd_muted'),
                'source_vd_controls' => $this->opt('source_vd_controls'),
                'source_vd_controls_pos' => $this->opt('source_vd_controls_pos'),
                'source_overlay' => $this->opt('source_overlay'),
                'source_overlay_color' => $this->opt('source_overlay_color'),
                'source_overlay_opacity' => $this->opt('source_overlay_opacity'),
                'source_overlay_color_gradient' => $this->opt('source_overlay_color_gradient'),
                'source_overlay_color_gradient_opac' => $this->opt('source_overlay_color_gradient_opac'),
            ) );
        ?>
        <div class="th-sparkles"></div>

        <div class="kl-slideshow-inner container kl-slideshow-safepadding">
            <div class="row">
                <div class="ca-container" data-count="<?php echo $countitm; ?>">
                    <div class="ca-nav">
                        <span class="ca-nav-prev"><span class="glyphicon glyphicon-chevron-left icon-white"></span></span>
                        <span class="ca-nav-next"><span class="glyphicon glyphicon-chevron-right icon-white"></span></span>
                    </div>

                    <div class="ca-wrapper ca-st1" data-autoplay="<?php echo $this->opt('ww_slider_autoplay') == 1 ? 1:0 ; ?>" data-timout="<?php echo $this->opt('ww_slider_timeout', 9000) ?>">

                    <?php
                        if ( $hasItems )
                        {
                            $i = 1;

                            foreach ( $singleItem as $slide )
                            {
                                echo '<div class="ca-item ca-item-' . $i . '">';

                                echo '<div class="ca-item-main">';

                                echo '<div class="ca-background"></div>';

                                if ( isset ( $slide['ww_slide_image'] ) && ! empty ( $slide['ww_slide_image'] ) ) {
                                    echo '<div class="ca-icon" style="background-image:url('.$slide['ww_slide_image'].');">';
                                    //$image = vt_resize( '', $slide['ww_slide_image'], '336', '200', true );
                                    // echo '<img src="' . $image['url'] . '" width="' . $image['width'] . '" height="' . $image['height'] . '" />';
                                    echo '</div>';
                                }

                                // TITLE
                                if ( isset ( $slide['ww_slide_title'] ) && ! empty ( $slide['ww_slide_title'] ) ) {
                                    echo '<h3 class="ca-title">' . $slide['ww_slide_title'] . '</h3>';
                                }

                                // DESC
                                if ( isset ( $slide['ww_slide_desc'] ) && ! empty ( $slide['ww_slide_desc'] ) ) {
                                    echo '<div class="ca-text">' . $slide['ww_slide_desc'] . '</div>';
                                }

                                // DESC
                                if ( isset ( $slide['ww_slide_read_text'] ) && ! empty ( $slide['ww_slide_read_text'] ) ) {
                                    echo '<a href="#" class="btn btn-fullcolor ca-more js-ca-more">' . $slide['ww_slide_read_text'] .
                                         ' <span class="glyphicon glyphicon-chevron-right icon-white"></span></a>';
                                }
                                // Bottom Title
                                if ( isset ( $slide['ww_slide_bottom_title'] ) && ! empty ( $slide['ww_slide_bottom_title'] ) ) {
                                    echo '<span class="ca-starting">' . $slide['ww_slide_bottom_title'] . '</span>';
                                }

                                echo '</div>';

                                echo '<div class="ca-content-wrapper">';

                                echo '<a href="#" class="ca-close js-ca-close"><span class="glyphicon glyphicon-remove"></span></a>';

                                echo '<div class="ca-content">';

                                // Content Title
                                if ( isset ( $slide['ww_slide_content_title'] ) && ! empty ( $slide['ww_slide_content_title'] ) ) {
                                    echo '<h6 class="ca-panel-title">' . $slide['ww_slide_content_title'] . '</h6>';
                                }

                                // Content description
                                if ( isset ( $slide['ww_slide_desc_full'] ) && ! empty ( $slide['ww_slide_desc_full'] ) ) {

                                    $content = wpautop( $slide['ww_slide_desc_full'] );
                                    echo '<div class="ca-content-text">';
                                        if ( preg_match( '%(<[^>]*>.*?</)%i', $content, $regs ) ) {
                                            echo do_shortcode( $content );
                                        }
                                        else {
                                            echo '<p>' . do_shortcode( $content ) . '</p>';
                                        }
                                    echo '</div>';
                                }

                                // Link
                                if ( isset ( $slide['ww_slide_read_text_content'] ) && ! empty ( $slide['ww_slide_read_text_content'] ) &&
                                     isset ( $slide['ww_slide_link']['url'] ) && ! empty ( $slide['ww_slide_link']['url'] ) ) {
                                    echo '<a href="' . $slide['ww_slide_link']['url'] . '" target="'
                                         . $slide['ww_slide_link']['target'] . '">'
                                         . $slide['ww_slide_read_text_content'] . '</a>';
                                }

                                echo '</div>';
                                echo '</div>';
                                echo '</div><!-- end ca-item -->';
                                $i ++;
                            }
                        }
                    ?>
                    </div><!-- end ca-wrapper -->
                </div>
                <!-- end circular content carousel -->
            </div>
        </div>
        <?php
            WpkPageHelper::zn_bottommask_markup($bottom_mask);
        ?>
        <!-- header bottom style -->
    </div><!-- end kl-slideshow -->
