<?php
/**
 * Pro Slider Gallery element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Pro Slider Gallery element class.
 */
class X_Pro_Slider_Gallery extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xproslidergallery';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-column3';
	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Pro Slider Gallery', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'slider', 'gallery', 'image' );
	}

	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		$link_to = ! empty( $this->settings['link'] ) ? $this->settings['link'] : false;

		if ( 'lightbox' === $link_to ) {
			wp_enqueue_script( 'bricks-photoswipe' );
			wp_enqueue_script( 'bricks-photoswipe-lightbox' );
			wp_enqueue_style( 'bricks-photoswipe' );

			// Lightbox caption.
			if ( isset( $this->settings['lightboxCaption'] ) ) {
				wp_enqueue_script( 'bricks-photoswipe-caption' );
			}
		}
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['captions'] = array(
			'title'    => esc_html__( 'Captions', 'bricksextras' ),
			'required' => array( 'caption', '=', true ),
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {
		$this->controls['_border']['css'][0]['selector']    = 'img';
		$this->controls['_boxShadow']['css'][0]['selector'] = 'img';

		$this->controls['intro'] = array(
			'tab'         => 'content',
			'description' => esc_html__( 'This element should be placed outside of the Pro Slider', 'bricksextras' ),
			'type'        => 'separator',
		);

		$this->controls['items'] = array(
			'tab'  => 'content',
			'type' => 'image-gallery',
		);

		// Settings.

		$this->controls['imageLimit'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Maximum', 'bricks' ) . ' (' . esc_html__( 'Images', 'bricks' ) . ')',
			'type'  => 'number',
		);

		$this->controls['imageOffset'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Offset', 'bricks' ),
			'type'  => 'number',
		);

		$this->controls['randomiseOrder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Randomise order', 'bricksextras' ),
			'type'  => 'checkbox',
		);

		$this->controls['linkStart'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['link'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Link to', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'lightbox'   => esc_html__( 'Lightbox', 'bricks' ),
				'attachment' => esc_html__( 'Attachment Page', 'bricks' ),
				'media'      => esc_html__( 'Media File', 'bricks' ),
				'custom'     => esc_html__( 'Custom URL', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'None', 'bricks' ),
		);

		$this->controls['lightboxImageGrouping'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Group images into lightbox', 'bricksextras' ),
			'type'     => 'checkbox',
			'required' => array( 'link', '=', 'lightbox' ),
		);

		$this->controls['lightboxImageSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Image size', 'bricks' ),
			'type'        => 'select',
			'options'     => $this->control_options['imageSizes'],
			'placeholder' => esc_html__( 'Full', 'bricks' ),
			'inline'      => true,
			'required'    => array(
				'link',
				'=',
				array(
					'dynamiclightbox',
					'lightbox',
					'media',
				),
			),
		);

		$this->controls['lightboxAnimationType'] = array(
			'label'       => esc_html__( 'Animation', 'bricks' ),
			'type'        => 'select',
			'options'     => $this->control_options['lightboxAnimationTypes'],
			'placeholder' => esc_html__( 'Fade', 'bricks' ),
			'required'    => array( 'link', '=', 'lightbox' ),
			'inline'      => true,
		);

		$this->controls['lightboxImageClick'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Image click action', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'zoom'            => esc_html__( 'Zoom', 'bricks' ),
				'zoom-or-close'   => esc_html__( 'Zoom or close', 'bricks' ),
				'toogle-controls' => esc_html__( 'Toggle controls', 'bricks' ),
				'next'            => esc_html__( 'Next', 'bricks' ),
				'close'           => esc_html__( 'Close', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Zoom', 'bricks' ),
			'required'    => array( 'link', '=', 'lightbox' ),
			'inline'      => true,
		);

		$this->controls['lightboxCaption'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Caption', 'bricks' ),
			'type'     => 'checkbox',
			'required' => array( 'link', '=', 'lightbox' ),
		);

		$this->controls['lightboxThumbnails'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Thumbnail navigation', 'bricks' ),
			'type'     => 'checkbox',
			'required' => array(
				array( 'link', '=', 'lightbox' ),
				array( 'lightboxImageGrouping', '=', true ),
			),
		);

		$this->controls['lightboxThumbnailSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Thumbnail size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'placeholder' => 60,
			'required'    => array(
				array( 'link', '=', 'lightbox' ),
				array( 'lightboxThumbnails', '=', true ),
			),
		);

		$this->controls['lightboxThumbnailInfo'] = array(
			'tab'      => 'content',
			'type'     => 'info',
			'required' => array(
				array( 'link', '=', 'lightbox' ),
				array( 'lightboxThumbnails', '=', true ),
				array( 'lightboxPadding', '=', '' ),
			),
		);

		$this->controls['lightboxPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ) . ' (px)',
			'type'     => 'spacing',
			'required' => array( 'link', '=', 'lightbox' ),
		);

		$this->controls['linkCustom'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Custom links', 'bricks' ),
			'type'        => 'repeater',
			'fields'      => array(
				'link' => array(
					'label'   => esc_html__( 'Link', 'bricks' ),
					'type'    => 'link',
					'exclude' => array(
						'lightboxImage',
						'lightboxVideo',
					),
				),
			),
			'placeholder' => esc_html__( 'Custom link', 'bricks' ),
			'required'    => array( 'link', '=', 'custom' ),
		);

		$this->controls['linkEnd'] = array(
			'tab'  => 'content',
			'type' => 'separator',
		);

		$this->controls['objectFit'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Object fit', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'fill'       => esc_html__( 'Fill', 'bricks' ),
				'contain'    => esc_html__( 'Contain', 'bricks' ),
				'cover'      => esc_html__( 'Cover', 'bricks' ),
				'none'       => esc_html__( 'None', 'bricks' ),
				'scale-down' => esc_html__( 'Scale down', 'bricks' ),
			),
			'css'         => array(
				array(
					'property' => 'object-fit',
					'selector' => 'img',
				),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Fill', 'bricks' ),
		);

		$this->controls['objectPosition'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'Object position', 'bricks' ),
			'type'           => 'text',
			'css'            => array(
				array(
					'property' => 'object-position',
					'selector' => 'img',
				),
			),
			'inline'         => true,
			'placeholder'    => '50% 50%',
			'hasDynamicData' => false,
			'required'       => array( 'objectFit' ),
		);

		$this->controls['maybeSRCSET'] = array(
			'tab'         => 'content',
			'label'       => esc_html( 'srcset' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'disable' => esc_html__( 'Disable', 'bricks' ),
				'enable'  => esc_html__( 'Enable', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);

		/* caption */

		$this->controls['caption'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Caption', 'bricks' ),
			'type'  => 'checkbox',
		);

		$this->controls['captionBackground'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'background',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionBorder'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionTypography'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionTop'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Top', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'top',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionRight'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Right', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'right',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionBottom'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Bottom', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'bottom',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionLeft'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Left', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'left',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionWidth'] = array(
			'group' => 'captions',
			'label' => esc_html__( 'Width', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'width',
					'selector' => '.x-slider_slide-caption',
				),
			),
		);

		$this->controls['captionPadding'] = array(
			'group'       => 'captions',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slider_slide-caption',
				),
			),
			'placeholder' => array(
				'top'    => '10px',
				'right'  => '15px',
				'bottom' => '10px',
				'left'   => '15px',
			),
		);

		/* lazy */

		$this->controls['lazyLoadSupport'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Support lazy load', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'none'   => esc_html__( 'None', 'bricks' ),
				'splide' => esc_html__( 'Splide lazy load', 'bricksextras' ),
				'bricks' => esc_html__( 'Bricks Lazy load', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Splide lazy load', 'bricksextras' ),
		);

		$this->controls['tagsSep'] = array(
			'type' => 'separator',
		);

		$this->controls['listTag'] = array(
			'label'          => esc_html__( 'HTML tag', 'bricks' ) . ' (' . esc_html__( 'List', 'bricks' ) . ')',
			'type'           => 'text',
			'hasDynamicData' => false,
			'inline'         => true,
			'placeholder'    => 'ul',
		);

		$this->controls['slideTag'] = array(
			'label'          => esc_html__( 'HTML tag', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
			'type'           => 'text',
			'hasDynamicData' => false,
			'inline'         => true,
			'placeholder'    => 'li',
		);
	}

	/**
	 * Get normalized image settings.
	 *
	 * @param array $settings Element settings.
	 */
	public function get_normalized_image_settings( $settings ) {
		$items = isset( $settings['items'] ) ? $settings['items'] : array();

		$size = ! empty( $items['size'] ) ? $items['size'] : \BRICKS_DEFAULT_IMAGE_SIZE;

		// Dynamic Data.
		if ( ! empty( $items['useDynamicData'] ) ) {
			$items['images'] = array();

			$images = $this->render_dynamic_data_tag( $items['useDynamicData'], 'image' );

			if ( is_array( $images ) ) {
				foreach ( $images as $image_id ) {
					$items['images'][] = array(
						'id'   => $image_id,
						'full' => wp_get_attachment_image_url( $image_id, 'full' ),
						'url'  => wp_get_attachment_image_url( $image_id, $size ),
					);
				}
			}
		}

		// Either empty OR old data structure used before 1.0 (images were saved as one array directly on $items).
		if ( ! isset( $items['images'] ) ) {
			$images = ! empty( $items ) ? $items : array();

			unset( $items );

			$items['images'] = $images;
		}

		// Get 'size' from first image if not set (previous to 1.4-RC).
		$first_image_size = ! empty( $items['images'][0]['size'] ) ? $items['images'][0]['size'] : false;
		$size             = empty( $items['size'] ) && $first_image_size ? $first_image_size : $size;

		// Calculate new image URL if size is not the same as from the Media Library.
		if ( $first_image_size && $first_image_size !== $size ) {
			foreach ( $items['images'] as $key => $image ) {
				$items['images'][ $key ]['size'] = $size;
				$items['images'][ $key ]['url']  = wp_get_attachment_image_url( $image['id'], $size );
			}
		}

		$settings['items'] = $items;

		$settings['items']['size'] = $size;

		return $settings;
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$settings = $this->get_normalized_image_settings( $this->settings );

		$images  = ! empty( $settings['items']['images'] ) ? $settings['items']['images'] : false;
		$size    = ! empty( $settings['items']['size'] ) ? $settings['items']['size'] : \BRICKS_DEFAULT_IMAGE_SIZE;
		$link_to = ! empty( $settings['link'] ) ? esc_attr( $settings['link'] ) : false;

		$list_tag  = isset( $settings['listTag'] ) ? \Bricks\Helpers::sanitize_html_tag( $settings['listTag'], 'ul' ) : 'ul';
		$slide_tag = isset( $settings['slideTag'] ) ? \Bricks\Helpers::sanitize_html_tag( $settings['slideTag'], 'li' ) : 'li';

		$lazy_load    = isset( $settings['lazyLoadSupport'] ) ? esc_html( $settings['lazyLoadSupport'] ) : 'splide';
		$maybe_srcset = isset( $settings['maybeSRCSET'] ) ? esc_html( $settings['maybeSRCSET'] ) : 'disable';

		$lightbox_image_grouping = isset( $settings['lightboxImageGrouping'] );

		$image_limit     = isset( $settings['imageLimit'] ) ? intval( $settings['imageLimit'] ) : false;
		$image_offset    = isset( $settings['imageOffset'] ) ? intval( $settings['imageOffset'] ) : false;
		$randomise_order = isset( $settings['randomiseOrder'] );

		$identifier = \BricksExtras\Helpers::generate_unique_identifier( $this->element, $this->id );

		$unique_id = '';

		if ( method_exists( '\Bricks\Query', 'is_any_looping' ) ) {

			$query_id = \Bricks\Query::is_any_looping();

			if ( $query_id ) {

				if ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) {
					$loop_index = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) )->loop_index . '_' . \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
				} elseif ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) {
						$loop_index = \Bricks\Query::get_query_for_element_id( \Bricks\Query::get_query_element_id( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 1 ) ) )->loop_index . '_' . \Bricks\Query::get_loop_index();
				} else {
					$loop_index = \Bricks\Query::get_loop_index();
				}

				$unique_id = $identifier . '_' . $loop_index;

			} else {
				$unique_id = $identifier;
			}
		}

		$root_classes = array(
			'splide__list',
			'x-splide__list',
			'x-slider-gallery',
		);

		if ( (bool) $link_to ) {
			$this->set_attribute( '_root', 'data-linked', $link_to );
		}

		$lightbox_id = \Bricks\Helpers::generate_random_id( false );

		$this->set_attribute( '_root', 'class', $root_classes );

		if ( defined( '\BRICKS_DB_CUSTOM_FONT_FACE_RULES' ) ) {
			$bricks_lightbox_update = true;
		} else {
			$bricks_lightbox_update = false;
		}

		if ( $bricks_lightbox_update ) {
			if ( 'lightbox' === $link_to ) {

				if ( $lightbox_image_grouping ) {
					$this->set_attribute( '_root', 'class', 'bricks-lightbox' );
				}

				if ( isset( $settings['lightboxCaption'] ) ) {
					$this->set_attribute( '_root', 'class', 'has-lightbox-caption' );
				}

				if ( ! empty( $settings['lightboxThumbnails'] ) ) {
					$this->set_attribute( '_root', 'class', 'has-lightbox-thumbnails' );
				}

				if ( ! empty( $settings['lightboxThumbnailSize'] ) ) {
					$this->set_attribute( '_root', 'data-lightbox-thumbnail-size', esc_attr( $settings['lightboxThumbnailSize'] ) );
				}

				if ( isset( $settings['lightboxImageClick'] ) ) {
					$this->set_attribute( '_root', 'data-lightbox-image-click', esc_attr( $settings['lightboxImageClick'] ) );
				}

				if ( ! empty( $settings['lightboxPadding'] ) ) {
					$this->set_attribute( '_root', 'data-lightbox-padding', wp_json_encode( $settings['lightboxPadding'] ) );
				}
			}
		}

		$lightbox_animation_type = ! empty( $settings['lightboxAnimationType'] ) ? esc_attr( $settings['lightboxAnimationType'] ) : 'fade';

		$this->set_attribute( '_root', 'data-animation-type', $lightbox_animation_type );

		if ( $images ) {

			if ( $randomise_order ) {
				shuffle( $images );
			}

			if ( (bool) $image_offset ) {
				$images = array_slice( $images, $image_offset );
			}

			if ( (bool) $image_limit ) {
				$images = array_slice( $images, 0, $image_limit );
			}

			foreach ( $images as $index => $item ) {
				$item_classes  = array( 'x-slider_slide splide__slide' );
				$image_styles  = array();
				$image_classes = array();

				$this->set_attribute( "item-{$index}", 'class', $item_classes );

				if ( isset( $item['id'] ) ) {
					$image_src = wp_get_attachment_image_src( $item['id'], $size );
				} elseif ( isset( $item['url'] ) ) {
					$image_src = array( $item['url'], 800, 600 );
				}

				$image_src = ! empty( $image_src ) && is_array( $image_src ) ? $image_src : array( \BricksExtras\Helpers::placeholder_image( array(), true ), 800, 600 );

				$image_url    = ! empty( $image_src[0] ) ? $image_src[0] : ( isset( $item['url'] ) ? $item['url'] : '' );
				$image_width  = ! empty( $image_src[1] ) ? $image_src[1] : 200;
				$image_height = ! empty( $image_src[2] ) ? $image_src[2] : 200;

				$this->set_attribute( "img-$index", 'width', esc_attr( $image_width ) );
				$this->set_attribute( "img-$index", 'height', esc_attr( $image_height ) );

				$this->set_attribute( "img-$index", 'class', $image_classes );
				$this->set_attribute( "img-$index", 'src', esc_url( $image_url ) );

				$this->set_attribute( "x-slider_slide-image-$index", 'style', '--x-slider-gallery-image: url(' . esc_url( $image_url ) . ')' );
			}
		}

		$output = '';

		$output .= '<' . $list_tag . " {$this->render_attributes( '_root' )}>";

		if ( $images ) {
			foreach ( $images as $index => $item ) {

				$image_classes = array();
				$image_atts    = array();
				$close_a_tag   = false;

				$image_correct_size = wp_get_attachment_image_src( $item['id'], $size );

				$lightbox_image_size = ! empty( $settings['lightboxImageSize'] ) ? $settings['lightboxImageSize'] : 'full';
				$lightbox_image      = wp_get_attachment_image_src( $item['id'], $lightbox_image_size );
				$lightbox_image      = ! empty( $lightbox_image ) && is_array( $lightbox_image ) ? $lightbox_image : array( $item['url'], 800, 600 );

				$caption_text = isset( $item['id'] ) ? wp_kses_post( wp_get_attachment_caption( $item['id'] ) ) : false;

				if ( (bool) $caption_text ) {
					$this->set_attribute( "item-$index", 'data-x-caption', $caption_text );
				}

				$output .= '<' . $slide_tag . " {$this->render_attributes( "item-{$index}" )}>";

				if ( 'attachment' === $link_to && isset( $item['id'] ) ) {
					$close_a_tag = true;

					$this->set_attribute( "a-$index", 'href', esc_url( get_permalink( $item['id'] ) ) );
					$this->set_attribute( "a-$index", 'target', '_blank' );

					$output .= "<a {$this->render_attributes( "a-$index" )}>";

				} elseif ( 'media' === $link_to ) {
					$close_a_tag = true;

					$this->set_attribute( "a-$index", 'href', esc_url( $lightbox_image[0] ) );
					$this->set_attribute( "a-$index", 'target', '_blank' );
					$this->set_attribute( "a-$index", 'data-description', esc_attr( $caption_text ) );

					$output .= "<a {$this->render_attributes( "a-$index" )}>";

				} elseif ( 'custom' === $link_to && isset( $settings['linkCustom'][ $index ]['link'] ) ) {

					$close_a_tag = true;

					$this->set_link_attributes( "a-$index", $settings['linkCustom'][ $index ]['link'] );

					$output .= "<a {$this->render_attributes( "a-$index" )}>";

					// Lightbox attributes.
				} elseif ( 'dynamiclightbox' === $link_to ) {

					$close_a_tag = true;

					$this->set_attribute( "a-$index", 'href', esc_url( $lightbox_image[0] ) );

					$output .= "<a {$this->render_attributes( "a-$index" )}>";
				} elseif ( 'lightbox' === $link_to ) {

					if ( ! empty( $lightbox_image ) ) {

						if ( $bricks_lightbox_update ) {

							$this->set_attribute( "a-$index", 'src', esc_url( $lightbox_image[0] ) );
							$this->set_attribute( "a-$index", 'href', esc_url( $lightbox_image[0] ) );
							$this->set_attribute( "a-$index", 'data-pswp-src', esc_attr( $lightbox_image[0] ) );
							$this->set_attribute( "a-$index", 'data-pswp-width', esc_attr( $lightbox_image[1] ) );
							$this->set_attribute( "a-$index", 'data-pswp-height', esc_attr( $lightbox_image[2] ) );
							$this->set_attribute( "a-$index", 'data-pswp-index', esc_attr( $index ) );

							if ( isset( $settings['lightboxCaption'] ) && (bool) $caption_text ) {
								$this->set_attribute( "a-$index", 'data-lightbox-caption', $caption_text );
							}

							/* group */
							if ( $lightbox_image_grouping ) {
								$this->set_attribute( "a-$index", 'data-pswp-id', esc_attr( $unique_id ) );
							} else {
								$this->set_attribute( "a-$index", 'class', 'bricks-lightbox' );
								$this->set_attribute( "a-$index", 'data-animation-type', esc_attr( $lightbox_animation_type ) );
								if ( ! empty( $settings['lightboxPadding'] ) ) {
									$this->set_attribute( "a-$index", 'data-lightbox-padding', wp_json_encode( $settings['lightboxPadding'] ) );
								}
							}

							$close_a_tag = true;
							$output     .= "<a {$this->render_attributes( "a-$index" )}>";

						} else {

							$image_classes[]                           = 'bricks-lightbox';
							$image_atts['data-bricks-lightbox-index']  = esc_url( $index );
							$image_atts['data-bricks-lightbox-id']     = esc_attr( $lightbox_id );
							$image_atts['data-bricks-lightbox-source'] = esc_attr( $lightbox_image[0] );
							$image_atts['data-bricks-lightbox-width']  = esc_attr( $lightbox_image[1] );
							$image_atts['data-bricks-lightbox-height'] = esc_attr( $lightbox_image[2] );

						}
					}
				}

				$image_atts['class'] = implode( ' ', $image_classes );
				$this->set_attribute( "x-slider_slide-image-$index", 'class', 'x-slider_slide-image' );

				$output .= "<div {$this->render_attributes( "x-slider_slide-image-$index" )}>";

				if ( 'splide' === $lazy_load && ! BricksExtras\Helpers::maybe_preview() ) {

					$image_atts['loading'] = 'eager';

					$image_atts['src']    = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E";
					$image_atts['srcset'] = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E";

					$srcset = wp_get_attachment_image_srcset( $item['id'], $size );
					$sizes  = wp_get_attachment_image_sizes( $item['id'], $size );

					if ( (bool) $srcset && (bool) $sizes && 'disable' !== $maybe_srcset && $image_correct_size ) {
						$image_atts['data-splide-lazy']        = esc_attr( $image_correct_size[0] );
						$image_atts['data-splide-lazy-srcset'] = esc_attr( $srcset );
						$image_atts['sizes']                   = esc_attr( $sizes );
					} elseif ( $image_correct_size ) {
						$image_atts['data-splide-lazy'] = esc_attr( $image_correct_size[0] );
					}
				} elseif ( 'none' === $lazy_load ) {
					$image_atts['loading'] = 'eager';
				}

				if ( 'disable' === $maybe_srcset ) {
					add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
				}

					$output .= wp_get_attachment_image( intval( $item['id'] ), $size, false, $image_atts );

				if ( 'disable' === $maybe_srcset ) {
					remove_filter( 'wp_calculate_image_srcset_meta', '__return_null' );
				}

				if ( isset( $settings['caption'] ) && (bool) $caption_text ) {
					$output .= '<div class="x-slider_slide-caption">' . $caption_text . '</div>';
				}

				$output .= '</div>';

				if ( $close_a_tag ) {
					$output .= '</a>';
				}

				$output .= '</' . $slide_tag . '>';
			}
		}

		$output .= '</' . $list_tag . '>';

		echo $output;
	}
}
