<?php 
    if ( ! empty( $settings['image_link']['url'] ) ) {
        $widget->add_render_attribute( 'image_link', 'href', $settings['image_link']['url'] );

        if ( $settings['image_link']['is_external'] ) {
            $widget->add_render_attribute( 'image_link', 'target', '_blank' );
        }

        if ( $settings['image_link']['nofollow'] ) {
            $widget->add_render_attribute( 'image_link', 'rel', 'nofollow' );
        }
    }
    $html_id = pxl_get_element_id($settings); 
    if($settings['img_effect'] === 'pxl-parallax-hover') { 
        wp_enqueue_script( 'pxl-parallax-move-mouse'); 
    }

    $parallax_hidden_class = $settings['hide_parallax_sm'] == 'true' ? 'pxl-disable-parallax-sm' : ''; 
    $img_effect = !empty($settings['img_effect']) ? $settings['img_effect'] : ''; 

    $max_tilt = '';
    $speed_tilt = '';
    $perspective_tilt = '';
    $is_effect_tilt = false;
    if($img_effect === 'pxl-image-tilt') {
        $is_effect_tilt = true;
        $max_tilt = esc_attr($settings['max_tilt']);
        $speed_tilt = esc_attr($settings['speed_tilt']);
        $perspective_tilt = esc_attr($settings['perspective_tilt']);
    }
    $parallax_value = !empty($settings['parallax_value']) ? $settings['parallax_value'] : 0;
    $parallax_scroll_type = '';
    $parallax_scroll_value_x = '';
    $is_parallax = false;
    $data_parallax = '';
    if($img_effect === 'pxl-parallax-scroll') {
        $is_parallax = true;
        $parallax_scroll_type = esc_attr($settings['parallax_scroll_type']);
        $parallax_scroll_value_x = esc_attr($settings['parallax_scroll_value_x']);
        $data_parallax = esc_attr('{"'.$parallax_scroll_type.'":'.$parallax_scroll_value_x.'}');
    } 

    $image_size = !empty($settings['img_size']) ? $settings['img_size'] : 'full';
    $image_id = '';
    $source_type = $settings['source_type'];
    $is_source_type = null;

    if ($source_type == 'f_img' && has_post_thumbnail()) {
        $image_id = get_post_thumbnail_id(get_the_ID());
        $is_source_type = false;
    } elseif ($source_type == 's_img' && !empty($settings['image']['id'])) {
        $is_source_type = true;
        $image_id = $settings['image']['id'];
    }

    if(!empty($image_id)) {
        $image  = pxl_get_image_by_size( array(
            'attach_id'  => $image_id,
            'thumb_size' => $image_size,
            'class' => 'no-lazyload'
        ) );
        $thumbnail    = $image['thumbnail'];
        $thumbnail_url    = $image['url'];
    }

    $is_bg_gradient = !empty($settings['linear_gradient']) || false;
    $overlay = !empty($settings['overlay']) || false;

    // Class 
    if($settings['animation_custom'] === 'pxl-dynamic-resizing') {
        wp_enqueue_script('gsap');
        wp_enqueue_script('pxl-scroll-trigger');
    }
    $classes = $settings['animation_custom'].' '.$parallax_hidden_class.' '.$settings['pxl_animate'];


?>
<div id="<?php echo esc_attr($html_id); ?>"  class="pxl-image-single <?php echo esc_attr($classes); ?>"  data-wow-delay="<?php echo esc_attr($settings['pxl_animate_delay'].'ms'); ?>">
    <div class="pxl-item--container">
        <div class="pxl-item--inner <?php echo esc_attr($img_effect); ?>" <?php if($is_effect_tilt) { echo 'data-maxtilt="' . esc_attr($max_tilt) . '" data-speedtilt="' . esc_attr($speed_tilt) . '" data-perspectivetilt="' . esc_attr($perspective_tilt) . '"'; } ?> 
            <?php if($is_parallax) { echo 'data-parallax="' . esc_attr($data_parallax) . '"'; } ?>
            data-parallax-value = "<?php echo esc_attr($parallax_value); ?>">
            <?php if(!is_null($is_source_type)) : ?>
                <?php if ($settings['image_type'] === 'bg') : ?>
                    <div class="pxl-item--bg " style="background-image: url(<?php echo esc_url($thumbnail_url); ?>);"></div>
                <?php else: ?>
                    <div class="pxl-item--image" >
                        <?php if ( !empty( $settings['image_link']['url'] )) : ?>
                            <a class="pxl-item--link" <?php pxl_print_html($widget->get_render_attribute_string( 'image_link' )); ?>>
                        <?php endif; ?>
                            <?php echo wp_kses_post($thumbnail); ?>
                        <?php if (!empty( $settings['image_link']['url'] )) : ?>
                            </a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
                <!-- Overlay -->
                <?php  if($overlay) : ?> 
                    <div class="pxl-item--overlay"></div> 
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>
</div>
