<?php if(!defined('ABSPATH')) { return; }
    /*
     * Build and display the element
     */
    $options = (isset($GLOBALS['options']['circ_2']) ? $GLOBALS['options']['circ_2'] : 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 = $this->opt('single_circ2');
    $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 ?> <?php echo $this->data['uid']; ?>">

     <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-alt" 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">';

                                 $bg = '';
                                 if ( isset ( $slide['ww_slide_image'] ) && ! empty ( $slide['ww_slide_image'] ) ) {
                                     echo '<div class="ca-icon">';
                                     $image = vt_resize( '', $slide['ww_slide_image'], '376', '440', true );
                                     $bg    = 'style="background-image:url(' . $image['url'] . ');"';
                                     echo '</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'].');"></div>';
                                }

                                echo '<div class="ca-background" ' . $bg . '></div><!-- background color -->';

                                // TITLE
                                if ( isset ( $slide['ww_slide_title'] ) && ! empty ( $slide['ww_slide_title'] ) ) {
                                    $title_pos_l = $title_pos_t = '';
                                    if ( isset ( $slide['ww_slide_title_left'] ) && ! empty ( $slide['ww_slide_title_left'] ) ) {
                                        $title_pos_l = 'left:' . $slide['ww_slide_title_left'] . 'px;';
                                    }

                                    if ( isset ( $slide['ww_slide_title_top'] ) && ! empty ( $slide['ww_slide_title_top'] ) ) {
                                        $title_pos_t = 'top:' . $slide['ww_slide_title_top'] . 'px;';
                                    }

                                    $arrpos = isset($slide['ww_slide_title_arrpos']) && !empty($slide['ww_slide_title_arrpos']) ? $slide['ww_slide_title_arrpos'] : 'top-left';

                                    echo '<div class="title_circle" style="' . $title_pos_t . ' ' . $title_pos_l .
                                         '" data-size="' . $slide['ww_slide_title_size'] . '" data-position="'.$arrpos.'">';
                                    echo '<span>' . $slide['ww_slide_title'] . '</span>';
                                    echo '</div>';
                                }

                                // 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 -->


