<?php

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

class X_Pro_Slider extends \Bricks\Element {
	public $category                 = 'extras';
	public $name                     = 'xproslider';
	public $icon                     = 'ti-layout-slider-alt';
	public $scripts                  = array( 'xProSlider' );
	public $nestable                 = true;
	private static $script_localized = false;

	public function get_label() {
		return esc_html__( 'Pro Slider', 'bricksextras' );
	}

	public function get_keywords() {
		return array( 'slider', 'testimonials', 'carousel', 'pro' );
	}

	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'bricks-splide' );
		wp_enqueue_style( 'bricks-splide' );

		wp_enqueue_script( 'x-slider', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybeMinifyScripts( 'proslider' ) . '.js', '', \BricksExtras\Plugin::VERSION, true );

		if ( ! self::$script_localized ) {

			wp_localize_script(
				'x-slider',
				'xSlider',
				array(
					'Instances' => array(),
				)
			);

			self::$script_localized = true;

		}

		if ( ! \BricksExtras\Helpers::elementCSSAdded( $this->name ) ) {
			wp_enqueue_style( 'x-slider', BRICKSEXTRAS_URL . 'components/assets/css/proslider.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	public function set_control_groups() {

		$this->control_groups['addslides'] = array(
			'title'    => esc_html__( 'Slides', 'bricks' ),
			'required' => array( 'galleryMode', '!=', true ),
		);

		$this->control_groups['slide'] = array(
			'title' => esc_html__( 'Slides', 'bricks' ) . ' / ' . esc_html__( 'Layout', 'bricks' ),
		);

		$this->control_groups['options'] = array(
			'title' => esc_html__( 'Interaction', 'bricks' ) . ' / ' . esc_html__( 'Behavior', 'bricks' ),
		);

		$this->control_groups['dynamicStyles'] = array(
			'title' => esc_html__( 'Slide', 'bricks' ) . ' (' . esc_html__( 'Styles', 'bricks' ) . ')',
		);

		$this->control_groups['arrows'] = array(
			'title' => esc_html__( 'Arrows', 'bricks' ),
		);

		$this->control_groups['pagination'] = array(
			'title' => esc_html__( 'Pagination', 'bricks' ),
		);

		$this->control_groups['autoScroll'] = array(
			'title' => esc_html__( 'Autoplay', 'bricks' ) . ' / ' . esc_html__( 'Scroll', 'bricks' ),
		);

		$this->control_groups['sync'] = array(
			'title' => esc_html__( 'Sync', 'bricks' ),
		);

		$this->control_groups['animations'] = array(
			'title'    => esc_html__( 'Animation', 'bricks' ),
			'required' => array( 'galleryMode', '!=', true ),
		);

		$this->control_groups['accessibility'] = array(
			'title' => esc_html__( 'Accessibility', 'bricks' ),
		);

		if ( class_exists( '\Bricks\Popups' ) ) {
			$this->control_groups['conditionalSlider'] = array(
				'title' => esc_html__( 'Conditional slider', 'bricksextras' ),
			);
		}

		$this->control_groups['gallery'] = array(
			'title' => esc_html__( 'Gallery', 'bricks' ),
		);
	}

	public function set_controls() {

		$this->controls['_height']['css'][0]['selector'] = '.splide__slide';

		$this->controls['layoutInfo'] = array(
			'tab'         => 'content',
			'description' => esc_html__( 'Configure the layout & behavior using the element ID, not a class', 'bricksextras' ),
			'type'        => 'seperator',
		);

		$this->controls['_children'] = array(
			'type'          => 'repeater',
			'placeholder'   => esc_html__( 'Slide', 'bricks' ),
			'group'         => 'addslides',
			'titleProperty' => 'label',
			'items'         => 'children', // NOTE: Undocumented
		);

		$this->controls['slidesSeparator'] = array(
			'group'    => 'slide',
			'label'    => esc_html__( 'Slide widths', 'bricksextras' ),
			'type'     => 'separator',
			'required' => array( 'type', '!=', 'fade' ),
		);

		$this->controls['perPage'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Number of slides to show', 'bricksextras' ),
			'type'        => 'number',
			'small'       => true,
			'placeholder' => 1,
			'breakpoints' => true,
			'required'    => array(
				array( 'type', '!=', 'fade' ),
				array( 'autoWidth', '!=', true ),
			),
			/*
			'css'   => [
				[
					'property' => '--xitemstoshow',
					'selector' => '& > .x-slider_builder > .splide__track_builder',
				],
			],*/
		);

		$this->controls['fixedWidth'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Fixed slide width', 'bricksextras' ),
			'type'        => 'number',
			'units'       => true,
			'breakpoints' => true,
			'required'    => array(
				array( 'type', '!=', 'fade' ),
				array( 'autoWidth', '!=', true ),
			),
			/*
			'css'   => [
				[
					'property' => 'width',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
				],
			],*/
			'rerender'    => true,
		);

		$this->controls['gap'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Gap', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '0px',
			'breakpoints' => true,
			'required'    => array( 'type', '!=', 'fade' ),
			/*
			'css'   => [
				[
					'property' => '--xspacebetween',
					'selector' => '& > .x-slider_builder',
				],
			],*/
			'rerender'    => true,
		);

		$this->controls['autoWidth'] = array(
			'group'  => 'slide',
			'label'  => esc_html__( 'Auto width', 'bricks' ) . ' (' . esc_html__( 'Slides', 'bricks' ) . ')',
			'type'   => 'checkbox',
			'inline' => true,
			'info'   => esc_html__( 'A slide height must be set for this to apply', 'bricksextras' ),
		);

		$this->controls['slidesHeightSeparator'] = array(
			'group' => 'slide',
			'label' => esc_html__( 'Slide Heights', 'bricksextras' ),
			'type'  => 'separator',
		);

		$this->controls['fixedHeight'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Height', 'bricks' ) . ' (' . esc_html__( 'Slides', 'bricks' ) . ')',
			'units'       => true,
			'type'        => 'number',
			'breakpoints' => true,
			/*
			'css'   => [
				[
					'property' => 'height',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
				],
			], */
			'required'    => array( 'autoHeight', '!=', true ),
			'rerender'    => true,
		);

		$this->controls['autoHeight'] = array(
			'group'  => 'slide',
			'label'  => esc_html__( 'Auto height', 'bricks' ) . ' (' . esc_html__( 'Slides', 'bricks' ) . ')',
			'type'   => 'checkbox',
			'inline' => true,
			'info'   => esc_html__( 'For use with vertical sliders', 'bricksextras' ),
			/*
			'css'   => [
				[
					'property' => '--xsliderautoheight',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
					'value' => 'auto'
				],
			],*/
		);

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

		$this->controls['height'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Height', 'bricksextras' ) . ' (' . esc_html__( 'Slider', 'bricks' ) . ')',
			'type'        => 'number',
			'tooltip'     => array(
				'content'  => esc_html__( 'Overall height of slider. Required for for vertical sliders', 'bricksextras' ),
				'position' => 'top-left',
			),
			'units'       => true,
			'breakpoints' => true,
			'placeholder' => 'auto',
			'rerender'    => true,
			/*
			'css' => [
				[
					'property' => 'height',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list',
				],
				[
					'property' => 'height',
					'selector' => '& > .splide__track > .splide__list',
					]
				],*/
		);

		$this->controls['maybeAdaptiveHeight'] = array(
			'group'   => 'slide',
			'label'   => esc_html__( 'Adaptive height', 'bricks' ),
			'type'    => 'checkbox',
			'inline'  => true,
			'tooltip' => array(
				'content'  => esc_html__( 'Adapt slider height to current slide height', 'bricksextras' ),
				'position' => 'top-left',
			),
		);

		$this->controls['adaptiveHeight'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Adaptive height at this breakpoint', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
			'required'    => array( 'maybeAdaptiveHeight', '=', true ),
			'inline'      => true,
			'small'       => true,
			'rerender'    => true,
			'css'         => array(
				array(
					'property' => '--xadaptiveheight',
					'selector' => '.splide__list',
					'value'    => 'var(--xadaptiveheight-%s)',
				),
			),
		);

		$this->controls['adaptiveHeightDuration'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Height transiton duration', 'bricksextras' ),
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '200ms',
			'required'    => array( 'maybeAdaptiveHeight', '=', true ),
			'css'         => array(
				array(
					'property' => '--xadaptiveheightduration',
					'selector' => '.x-splide__track',
				),
			),
			'rerender'    => true,
		);

		// SLIDE

		$this->controls['slidesLayoutSeparator'] = array(
			'group' => 'slide',
			'label' => esc_html__( 'Layout', 'bricks' ) . ' / ' . esc_html__( 'Spacing', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
			'type'  => 'separator',
		);

		$this->controls['slidePadding'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slider_slide',
				),
			),
			'placeholder' => array(
				'top'    => '4rem',
				'right'  => '1rem',
				'bottom' => '4rem',
				'left'   => '1rem',
			),
		);

		$this->controls['slideAlignHorizontal'] = array(
			'group'   => 'slide',
			'label'   => esc_html__( 'Align horizontal', 'bricks' ),
			'type'    => 'align-items',
			'exclude' => 'stretch',
			'inline'  => true,
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => '.splide__slide',
				),
			),
			'default' => 'center',
		);

		$this->controls['slideAlignVertical'] = array(
			'group'   => 'slide',
			'label'   => esc_html__( 'Align vertical', 'bricks' ),
			'type'    => 'justify-content',
			'exclude' => 'space',
			'inline'  => true,
			'css'     => array(
				array(
					'property' => 'justify-content',
					'selector' => '.splide__slide',
				),
			),
			'default' => 'center',
		);

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

		$this->controls['perMove'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Number of slides to move', 'bricksextras' ),
			'tooltip'     => array(
				'content'  => esc_html__( 'The number of slides to move at once', 'bricksextras' ),
				'position' => 'top-left',
			),
			'type'        => 'number',
			'placeholder' => 1,
			'breakpoints' => true,
			'required'    => array( 'type', '!=', 'fade' ),
		);

		$this->controls['direction'] = array(
			'group'       => 'slide',
			'label'       => esc_html__( 'Direction', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'ltr' => esc_html__( 'Left to right', 'bricks' ),
				'rtl' => esc_html__( 'Right to left', 'bricks' ),
				'ttb' => esc_html__( 'Vertical', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Left to right', 'bricks' ),
			'breakpoints' => true,
			'info'        => esc_html__( 'A slider height or aspect-ratio must be set for vertical sliders', 'bricksextras' ),
			/*
			'css'       => [
				[
					'property' => '--xslidedirection',
					'selector' => '& > .x-slider_builder',
					'value'    => '%s',
				]
			],*/
			'rerender'    => true,
		);

		/* builder */

		$initProSlider = false;

		/* allow for init if prefered */
		$initProSlider = apply_filters( 'bricksextras/proslider/builderinit', $initProSlider );

		if ( ! $initProSlider ) {

			$this->controls['perPage']['css'] = array(
				array(
					'property' => '--xitemstoshow',
					'selector' => '& > .x-slider_builder > .splide__track_builder',
				),
			);

			$this->controls['fixedWidth']['css'] = array(
				array(
					'property' => 'width',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
				),
				array(
					'property' => 'width',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .brxe-block',
				),
			);

			$this->controls['gap']['css'] = array(
				array(
					'property' => '--xspacebetween',
					'selector' => '& > .x-slider_builder',
				),
			);

			$this->controls['fixedHeight']['css'] = array(
				array(
					'property' => 'height',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
				),
				array(
					'property' => 'height',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .brxe-block',
				),
			);

			$this->controls['autoHeight']['css'] = array(
				array(
					'property' => '--xsliderautoheight',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .x-slider_slide',
					'value'    => 'auto',
				),
				array(
					'property' => '--xsliderautoheight',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list > .brxe-block',
					'value'    => 'auto',
				),
			);

			$this->controls['height']['css'] = array(
				array(
					'property' => 'height',
					'selector' => '& > .x-slider_builder > .splide__track_builder > .splide__list',
				),
				array(
					'property' => 'height',
					'selector' => '& > .splide__track > .splide__list',
				),
			);

			$this->controls['direction']['css'] = array(
				array(
					'property' => '--xslidedirection',
					'selector' => '& > .x-slider_builder',
					'value'    => '%s',
				),
			);

		}

		$this->controls['trackOverflow'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'Overflow', 'bricks' ) . ' (' . esc_html__( 'Slider track', 'bricks' ) . ')',
			'group'          => 'slide',
			'type'           => 'select',
			'hasDynamicData' => false,
			'inline'         => true,
			'small'          => true,
			'options'        => array(
				'unset'   => 'unset',
				'hidden'  => 'hidden',
				'visible' => 'visible',
			),
			'info'           => esc_html__( 'If set to visible, set overflow hidden on the section', 'bricksextras' ),
			'css'            => array(
				array(
					'property' => 'overflow',
					'selector' => '& > .splide__track',
				),
				array(
					'property' => 'overflow',
					'selector' => '& > .x-slider_builder > .splide__track > .splide__list',
				),
				array(
					'property' => 'overflow',
					'selector' => '& > .x-slider_builder > .splide__track',
				),
			),

		);

			$this->controls['trackOverflowDirection'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Clip direction', 'bricksextras' ),
				'placeholder'    => esc_html__( 'None', 'bricks' ),
				'group'          => 'slide',
				'type'           => 'select',
				'hasDynamicData' => false,
				'inline'         => true,
				'small'          => true,
				'options'        => array(
					'left'  => esc_html__( 'Left', 'bricks' ),
					'right' => esc_html__( 'Right', 'bricks' ),
					'none'  => esc_html__( 'None', 'bricks' ),
				),
				'css'            => array(
					array(
						'property' => '--x-slider-overflow',
						'selector' => '.splide__track',
						'value'    => 'var(--x-slider-overflow-%s)',
					),
				),

			);

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

			$this->controls['imageWidth'] = array(
				'group'  => 'slide',
				'label'  => esc_html__( 'Force images to be 100% slide height', 'bricksextras' ),
				'type'   => 'checkbox',
				'inline' => true,
				'css'    => array(
					array(
						'property' => 'width',
						'selector' => '.x-slider_slide img',
						'value'    => 'auto',
					),
					array(
						'property' => 'height',
						'selector' => '.x-slider_slide img',
						'value'    => '100%',
					),
					array(
						'property' => 'width',
						'selector' => '.x-slider_slide-image',
						'value'    => 'auto',
					),
					array(
						'property' => 'height',
						'selector' => '.x-slider_slide-image',
						'value'    => '100%',
					),
				),
			);

			$this->controls['imageForceWidth'] = array(
				'group'  => 'slide',
				'label'  => esc_html__( 'Force images to be 100% slide width', 'bricksextras' ),
				'type'   => 'checkbox',
				'inline' => true,
				'css'    => array(
					array(
						'property' => 'width',
						'selector' => '.x-slider_slide img',
						'value'    => '100%',
					),
					array(
						'property' => 'width',
						'selector' => '.x-slider_slide-image',
						'value'    => '100%',
					),
				),
			);

			// Fixed settings:

			$this->controls['type'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Type', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'loop'  => esc_html__( 'Loop', 'bricks' ),
					'slide' => esc_html__( 'Slide', 'bricks' ),
					'fade'  => esc_html__( 'Fade', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Slide', 'bricks' ),
				'small'       => true,
			);

			$this->controls['keyboard'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Keyboard', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'false'   => esc_html__( 'Off', 'bricks' ),
					'focused' => esc_html__( 'Focused', 'bricks' ),
					'global'  => esc_html__( 'Global', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Focused', 'bricks' ),
				'breakpoints' => true,
				'small'       => true,
			);

			$this->controls['start'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Start index', 'bricks' ),
				'type'        => 'number',
				'placeholder' => 0,
			);

			$this->controls['speed'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Speed in ms', 'bricks' ),
				'type'        => 'number',
				'placeholder' => 400,
				'breakpoints' => true,
			);

			$this->controls['focus'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Focus', 'bricks' ),
				'group'          => 'options',
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'small'          => true,
				'breakpoints'    => true,
			);

			$this->controls['omitEnd'] = array(
				'group' => 'options',
				'label' => esc_html__( 'Omit end', 'bricksextras' ),
				'type'  => 'checkbox',
			);

			$this->controls['trimSpace'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Trim space', 'bricksextras' ),
				'tooltip'     => array(
					'content'  => esc_html__( 'Trim spaces before and after the slider', 'bricksextras' ),
					'position' => 'top-left',
				),
				'type'        => 'select',
				'options'     => array(
					'enable'  => esc_html__( 'Enable', 'bricks' ),
					'disable' => esc_html__( 'Disable', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['pauseMediaPlayer'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Pause media player when slider moves', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'enable'  => esc_html__( 'Enable', 'bricks' ),
					'disable' => esc_html__( 'Disable', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Enable', 'bricks' ),
			);

			$this->controls['wheel'] = array(
				'tab'    => 'content',
				'label'  => esc_html__( 'Navigation by mouse wheel', 'bricksextras' ),
				'group'  => 'options',
				'type'   => 'checkbox',
				'inline' => true,
			);

			$this->controls['edgeEffectSep'] = array(
				'tab'      => 'content',
				'group'    => 'options',
				'type'     => 'separator',
				'inline'   => true,
				'required' => array( 'type', '=', 'loop' ),
			);

			$this->controls['edgeEffect'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Add loop fade effect', 'bricksextras' ),
				'group'    => 'options',
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'type', '=', 'loop' ),
			);

			$this->controls['edgeEffectDistance'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Distance from edges', 'bricksextras' ),
				'type'        => 'number',
				'units'       => true,
				'placeholder' => '10%',
				'css'         => array(
					array(
						'property' => '--x-slider-mask-edge',
						'selector' => '.splide__track',
					),
				),
				'required'    => array(
					array( 'type', '=', 'loop' ),
					array( 'edgeEffect', '=', true ),
				),
			);

			$this->controls['edgeEffectSlope'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Gradient', 'bricks' ),
				'type'        => 'number',
				'step'        => '0.1',
				'min'         => 1,
				'placeholder' => '2',
				'css'         => array(
					array(
						'property' => '--x-slider-mask-edge-slope',
						'selector' => '.splide__track',
					),
				),
				'required'    => array(
					array( 'type', '=', 'loop' ),
					array( 'edgeEffect', '=', true ),
				),
			);

			$this->controls['wheelSleep'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Wheel sleep', 'bricksextras' ),
				'type'        => 'number',
				'placeholder' => 700,
				'breakpoints' => true,
				'required'    => array( 'wheel', '=', true ),
				'tooltip'     => array(
					'content'  => sprintf( esc_html__( 'The duration (%s) before accepting next wheel', 'bricksextras' ), 'ms' ),
					'position' => 'top-left',
				),
			);

			$this->controls['releaseWheel'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Release Wheel', 'bricksextras' ),
				'group'    => 'options',
				'type'     => 'checkbox',
				'required' => array( 'wheel', '=', true ),
				'inline'   => true,
				'tooltip'  => array(
					'content'  => esc_html__( 'Release wheel event when slider reaches the end', 'bricksextras' ),
					'position' => 'top-left',
				),
			);

			$this->controls['lazySep'] = array(
				'group' => 'options',
				'label' => esc_html__( 'Lazy loading', 'bricksextras' ),
				'type'  => 'separator',
			);

			$this->controls['lazyLoad'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Lazy load', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'false'      => esc_html__( 'False', 'bricks' ),
					'nearby'     => esc_html__( 'Nearby', 'bricksextras' ) . ' (' . esc_html__( 'Recommended', 'bricksextras' ) . ')',
					'sequential' => esc_html__( 'Sequential', 'bricksextras' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Nearby', 'bricksextras' ) . ' (' . esc_html__( 'Recommended', 'bricksextras' ) . ')',
				'small'       => true,
			);

			$this->controls['preloadPages'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Preload number', 'bricksextras' ),
				'type'        => 'number',
				'placeholder' => '1',
				'info'        => esc_html__( 'How many pages around the active slide to load', 'bricksextras' ),
				'required'    => array( 'lazyLoad', '!=', array( 'false', 'sequential' ) ),
			);

			$this->controls['interactionSeparator'] = array(
				'group' => 'options',
				'label' => esc_html__( 'Interaction', 'bricks' ),
				'type'  => 'separator',
			);

			$this->controls['dragMinThreshold'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Minimum threshold for dragging', 'bricksextras' ) . ' (px)',
				'type'        => 'number',
				'inline'      => true,
				'placeholder' => '10',
			);

			$this->controls['flickPower'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Flick power', 'bricksextras' ),
				'type'        => 'number',
				'inline'      => true,
				'placeholder' => '600',
			);

			$this->controls['flickMaxPages'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Maximum number pages that can be flicked', 'bricksextras' ),
				'type'        => 'number',
				'inline'      => true,
				'placeholder' => '1',
			);

			$this->controls['hashNavigation'] = array(
				'group'  => 'options',
				'label'  => esc_html__( 'URL hash navigation', 'bricksextras' ),
				'type'   => 'checkbox',
				'inline' => true,
			);

			$this->controls['drag'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Draggable', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'True', 'bricks' ),
					'false' => esc_html__( 'False', 'bricks' ),
					'free'  => esc_html__( 'Free scrolling', 'bricksextras' ),
				),
				'breakpoints' => true,
				'inline'      => true,
				'placeholder' => esc_html__( 'True', 'bricks' ),
			);

			$this->controls['easing'] = array(
				'group'          => 'options',
				'label'          => esc_html__( 'Easing', 'bricksextras' ),
				'type'           => 'text',
				'inline'         => true,
				'hasDynamicData' => false,
				'placeholder'    => 'cubic-bezier(0.25, 1, 0.5, 1)',
				'breakpoints'    => true,
			);

			$this->controls['snap'] = array(
				'group'       => 'options',
				'label'       => esc_html__( 'Snap to closest slide', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'True', 'bricks' ),
					'false' => esc_html__( 'False', 'bricks' ),
				),
				'breakpoints' => true,
				'inline'      => true,
				'required'    => array( 'drag', '=', 'free' ),
			);

			// REWIND

			$this->controls['rewindSeparator'] = array(
				'group'    => 'options',
				'label'    => esc_html__( 'Rewind', 'bricks' ),
				'type'     => 'separator',
				'required' => array(
					array( 'type', '!=', array( 'loop' ) ),
				),
			);

			$this->controls['rewind'] = array(
				'group'    => 'options',
				'label'    => esc_html__( 'Rewind', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array(
					array( 'type', '!=', array( 'loop' ) ),
				),
				'tooltip'  => array(
					'content'  => esc_html__( 'Rewind slider back to start when reaches end', 'bricksextras' ),
					'position' => 'top-left',
				),
			);

			$this->controls['rewindByDrag'] = array(
				'group'    => 'options',
				'label'    => esc_html__( 'Rewind by drag', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array(
					array( 'type', '!=', array( 'loop' ) ),
					array( 'rewind', '!=', '' ),
				),
			);

			$this->controls['rewindSpeed'] = array(
				'group'    => 'options',
				'label'    => esc_html__( 'Speed in ms', 'bricks' ),
				'type'     => 'number',
				'inline'   => true,
				'required' => array(
					array( 'type', '!=', array( 'loop' ) ),
					array( 'rewind', '!=', '' ),
				),
			);

			// Arrows

			$this->controls['arrows'] = array(
				'group'       => 'arrows',
				'label'       => esc_html__( 'Arrows', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'Icons', 'bricks' ),
					'false' => esc_html__( 'None', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Icons', 'bricks' ),
				'default'     => 'true',

			);

			$this->controls['arrowHeight'] = array(
				'group'       => 'arrows',
				'label'       => esc_html__( 'Height', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '& > .splide__arrows > .splide__arrow',
					),
					array(
						'property' => 'height',
						'selector' => '& > .x-slider_builder > .splide__arrows > .splide__arrow',
					),
				),
				'placeholder' => 50,
				'required'    => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowWidth'] = array(
				'group'       => 'arrows',
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'css'         => array(
					array(
						'property' => 'width',
						'selector' => '& > .splide__arrows > .splide__arrow',
					),
					array(
						'property' => 'width',
						'selector' => '& > .x-slider_builder > .splide__arrows > .splide__arrow',
					),
				),
				'placeholder' => 50,
				'required'    => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowSize'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Icon size', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'font-size',
						'selector' => '& > .splide__arrows .splide__arrow',
					),
					array(
						'property' => 'font-size',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow',
					),
				),
				// 'placeholder' => 50,
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowBackground'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Background', 'bricks' ),
				'type'     => 'color',
				'css'      => array(
					array(
						'property' => 'background',
						'selector' => '& > .splide__arrows .splide__arrow',
					),
					array(
						'property' => 'background',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowBorder'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '& > .splide__arrows .splide__arrow',
					),
					array(
						'property' => 'border',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowShadow'] = array(
				'tab'      => 'content',
				'group'    => 'arrows',
				'label'    => esc_html__( 'Box shadow', 'bricks' ),
				'type'     => 'box-shadow',
				'css'      => array(
					array(
						'property' => 'box-shadow',
						'selector' => '& > .splide__arrows .splide__arrow',
					),
					array(
						'property' => 'box-shadow',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowTypography'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Typography', 'bricks' ),
				'type'     => 'typography',
				'css'      => array(
					array(
						'property' => 'font',
						'selector' => '& > .splide__arrows .splide__arrow',
					),
					array(
						'property' => 'font',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow',
					),
				),
				'exclude'  => array(
					'font-family',
					'font-weight',
					'font-style',
					'text-align',
					'letter-spacing',
					'line-height',
					'text-decoration',
					'text-transform',
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowOpacity'] = array(
				'group'       => 'arrows',
				'label'       => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Disabled', 'bricks' ) . ')',
				'type'        => 'number',
				'step'        => 0.1,
				'min'         => 0,
				'max'         => 1,
				'placeholder' => '0.5',
				'css'         => array(
					array(
						'property' => 'opacity',
						'selector' => '& > .splide__arrows .splide__arrow:disabled',
					),
					array(
						'property' => 'opacity',
						'selector' => '& > .x-slider_builder > .splide__arrows .splide__arrow:disabled',
					),
				),
				'required'    => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['arrowHide'] = array(
				'group'       => 'arrows',
				'label'       => esc_html__( 'Hide at this breakpoint', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'none' => esc_html__( 'True', 'bricks' ),
					'flex' => esc_html__( 'False', 'bricks' ),
				),
				'css'         => array(
					array(
						'property' => 'display',
						'selector' => '& > .splide__arrows',
					),
					array(
						'property' => 'display',
						'selector' => '& > .x-slider_builder > .splide__arrows',
					),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'False', 'bricks' ),
				'required'    => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			// PREV ARROW

			$this->controls['prevArrowSeparator'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Prev arrow', 'bricks' ),
				'type'     => 'separator',
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),

			);

			$this->controls['prevArrow'] = array(
				'group'        => 'arrows',
				'label'        => esc_html__( 'Prev arrow', 'bricks' ),
				'type'         => 'icon',
				'rerender'     => true,
				'css'          => array(
					array(
						'selector' => '& > .x-splide__arrows .splide__arrow--prev > *',
					),
					array(
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev > *',
					),
				),
				'required'     => array( 'arrows', '!=', '' ),
				/*
				'default'  => [
					'library' => 'fontawesomeSolid',
					'icon'    => 'fas fa-angle-left',
					],*/
					'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['prevArrowTop'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Top', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'top',
						'selector' => '& > .x-splide__arrows .splide__arrow--prev',
					),
					array(
						'property' => 'top',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['prevArrowRight'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Right', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'right',
						'selector' => '& > .x-splide__arrows .splide__arrow--prev',
					),
					array(
						'property' => 'right',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['prevArrowBottom'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Bottom', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'bottom',
						'selector' => '& > .x-splide__arrows .splide__arrow--prev',
					),
					array(
						'property' => 'bottom',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['prevArrowLeft'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Left', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'left',
						'selector' => '& > .x-splide__arrows .splide__arrow--prev',
					),
					array(
						'property' => 'left',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['prevArrowMargin'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Margin', 'bricks' ),
				'type'     => 'spacing',
				'css'      => array(
					array(
						'property' => 'margin',
						'selector' => '& > .x-splide__arrows .splide__arrow--prev',
					),
					array(
						'property' => 'margin',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--prev',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			// NEXT ARROW

			$this->controls['nextArrowSeparator'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Next arrow', 'bricks' ),
				'type'     => 'separator',
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['nextArrow'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Next arrow', 'bricks' ),
				'type'     => 'icon',
				'rerender' => true,
				'css'      => array(
					array(
						'selector' => '& > .x-splide__arrows .splide__arrow--next > *',
					),
					array(
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next > *',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			/*
			'default'  => [
				'library' => 'fontawesomeSolid',
				'icon'    => 'fas fa-angle-right',
			],*/
			);

			$this->controls['nextArrowTop'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Top', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'top',
						'selector' => '& > .x-splide__arrows .splide__arrow--next',
					),
					array(
						'property' => 'top',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['nextArrowRight'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Right', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'right',
						'selector' => '& > .x-splide__arrows .splide__arrow--next',
					),
					array(
						'property' => 'right',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['nextArrowBottom'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Bottom', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'bottom',
						'selector' => '& > .x-splide__arrows .splide__arrow--next',
					),
					array(
						'property' => 'bottom',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['nextArrowLeft'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Left', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'left',
						'selector' => '& > .x-splide__arrows .splide__arrow--next',
					),
					array(
						'property' => 'left',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			$this->controls['nextArrowMargin'] = array(
				'group'    => 'arrows',
				'label'    => esc_html__( 'Margin', 'bricks' ),
				'type'     => 'spacing',
				'css'      => array(
					array(
						'property' => 'margin',
						'selector' => '& > .x-splide__arrows .splide__arrow--next',
					),
					array(
						'property' => 'margin',
						'selector' => '& > .x-slider_builder > .x-splide__arrows .splide__arrow--next',
					),
				),
				'required' => array( 'arrows', '!=', array( 'false', 'custom' ) ),
			);

			// Pagination (dots)

			$this->controls['pagination'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Enable', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'rerender' => true,
				'default'  => true,
			);

			$this->controls['paginationHeight'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Height', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'units'       => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'height',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
				),
				'placeholder' => '10px',
				'required'    => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationWidth'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'units'       => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'css'         => array(
					array(
						'property' => 'width',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'width',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
				),
				'placeholder' => '10px',
				'required'    => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationColor'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Color', 'bricks' ),
				'type'     => 'color',
				'css'      => array(
					array(
						'property' => 'color',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'background-color',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'color',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'background-color',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationBorder'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'border',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationSpacing'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Margin', 'bricks' ),
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'margin',
						'selector' => '& > .splide__pagination .splide__pagination__page',
					),
					array(
						'property' => 'margin',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page',
					),
				),
				'placeholder' => array(
					'top'    => '5px',
					'right'  => '5px',
					'bottom' => '5px',
					'left'   => '5px',
				),
				'required'    => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationHide'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Hide at this breakpoint', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'none' => esc_html__( 'True', 'bricks' ),
					'flex' => esc_html__( 'False', 'bricks' ),
				),
				'css'         => array(
					array(
						'property' => 'display',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'display',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
				),
				'inline'      => true,
				'required'    => array( 'pagination', '!=', '' ),
				'placeholder' => esc_html__( 'False', 'bricks' ),
			);

			// ACTIVE

			$this->controls['paginationActiveSeparator'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Dots', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
				'type'     => 'separator',
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationScaleActive'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Scale', 'bricks' ),
				'type'        => 'number',
				'units'       => false,
				'placeholder' => '1',
				'css'         => array(
					array(
						'property' => 'transform',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
						'value'    => 'scale(%s)',
					),
					array(
						'property' => 'transform',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
						'value'    => 'scale(%s)',
					),
				),
				'required'    => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationColorActive'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Color', 'bricks' ),
				'type'     => 'color',
				'css'      => array(
					array(
						'property' => 'color',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'background-color',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'color',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'background-color',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationBorderActive'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'border',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationActiveHeight'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Height', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'units'       => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'height',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
					),
				),
				'placeholder' => '10px',
				'required'    => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationActiveWidth'] = array(
				'group'       => 'pagination',
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'units'       => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'css'         => array(
					array(
						'property' => 'width',
						'selector' => '& > .splide__pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'width',
						'selector' => '& > .x-slider_builder > .splide__pagination .splide__pagination__page.is-active',
					),
				),
				'placeholder' => '10px',
				'required'    => array( 'pagination', '!=', '' ),
			);

			// POSITION

			$this->controls['paginationPositionSeparator'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Position', 'bricks' ),
				'type'     => 'separator',
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationTop'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Top', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'top',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'bottom',
						'value'    => 'auto',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'top',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
					array(
						'property' => 'bottom',
						'value'    => 'auto',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationRight'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Right', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'right',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'left',
						'value'    => 'auto',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'transform',
						'selector' => '& > .splide__pagination',
						'value'    => 'translateX(0)',
					),
					array(
						'property' => 'right',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
					array(
						'property' => 'left',
						'value'    => 'auto',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
					array(
						'property' => 'transform',
						'selector' => '& > .x-slider_builder > .splide__pagination',
						'value'    => 'translateX(0)',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationBottom'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Bottom', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'bottom',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'bottom',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			$this->controls['paginationLeft'] = array(
				'group'    => 'pagination',
				'label'    => esc_html__( 'Left', 'bricks' ),
				'type'     => 'number',
				'units'    => true,
				'css'      => array(
					array(
						'property' => 'left',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'right',
						'value'    => 'auto',
						'selector' => '& > .splide__pagination',
					),
					array(
						'property' => 'transform',
						'selector' => '& > .splide__pagination',
						'value'    => 'translateX(0)',
					),
					array(
						'property' => 'left',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
					array(
						'property' => 'right',
						'value'    => 'auto',
						'selector' => '& > .x-slider_builder > .splide__pagination',
					),
					array(
						'property' => 'transform',
						'selector' => '& > .x-slider_builder > .splide__pagination',
						'value'    => 'translateX(0)',
					),
				),
				'required' => array( 'pagination', '!=', '' ),
			);

			// SYNCING

			$this->controls['syncingInfoSep'] = array(
				'group' => 'sync',
				'label' => esc_html__( 'Slider syncing', 'bricksextras' ),
				'type'  => 'separator',
			);

			$this->controls['isNavigation'] = array(
				'group'  => 'sync',
				'label'  => esc_html__( 'Enable', 'bricks' ),
				'info'   => esc_html__( 'Makes slides clickable to navigate another slider.', 'bricksextras' ),
				'type'   => 'checkbox',
				'inline' => true,
			);

			$this->controls['syncSelector'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Selector of the slider to control', 'bricksextras' ),
				'info'           => esc_html__( 'If inside a query loop, use the ID of the other slider', 'bricksextras' ),
				'group'          => 'sync',
				'type'           => 'text',
				'placeholder'    => '.main-slider',
				'required'       => array( 'isNavigation', '=', true ),
				'hasDynamicData' => false,
			);

			$this->controls['componentScope'] = array(
				'tab'         => 'content',
				'group'       => 'sync',
				'label'       => esc_html__( 'Component scope', 'bricksextras' ),
				'type'        => 'select',
				'options'     => array(
					'true'  => esc_html__( 'True', 'bricks' ),
					'false' => esc_html__( 'False', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'False', 'bricks' ),
				'required'    => array( 'isNavigation', '=', true ),
				'clearable'   => false,
			);

			$this->controls['independentScrolling'] = array(
				'group'    => 'sync',
				'label'    => esc_html__( 'Independent scrolling', 'bricksextras' ),
				'info'     => esc_html__( 'Only control slider by clicking slides', 'bricksextras' ),
				'type'     => 'checkbox',
				'required' => array( 'isNavigation', '=', true ),
				'inline'   => true,
			);

			// AUTOPLAY

			$this->controls['autoplayscroll'] = array(
				'group'       => 'autoScroll',
				'label'       => esc_html__( 'Enable', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'autoplay'   => esc_html__( 'Autoplay', 'bricks' ) . ' (' . esc_html__( 'Intervals', 'bricksextras' ) . ')',
					'autoscroll' => esc_html__( 'Auto scroll', 'bricksextras' ) . ' (' . esc_html__( 'Continuous', 'bricksextras' ) . ')',
					'none'       => esc_html__( 'None', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'None', 'bricks' ),
			);

			$this->controls['interval'] = array(
				'group'       => 'autoScroll',
				'label'       => esc_html__( 'Interval in ms', 'bricks' ),
				'type'        => 'number',
				'required'    => array( 'autoplayscroll', '=', 'autoplay' ),
				'placeholder' => 3000,
			);

			$this->controls['autoplayPaused'] = array(
				'group'    => 'autoScroll',
				'label'    => esc_html__( 'Start as paused', 'bricksextras' ),
				'type'     => 'checkbox',
				'required' => array( 'autoplayscroll', '=', 'autoplay' ),
				'inline'   => true,
			);

			$this->controls['autoScrollSpeed'] = array(
				'group'       => 'autoScroll',
				'label'       => esc_html__( 'Speed', 'bricks' ),
				'description' => esc_html__( 'Use negative number to reverse', 'bricksextras' ),
				'type'        => 'number',
				'units'       => false,
				'placeholder' => '1',
				'min'         => -5,
				'max'         => 5,
				'step'        => 0.1,
				'required'    => array( 'autoplayscroll', '=', 'autoscroll' ),
			);

			$this->controls['pauseOnHover'] = array(
				'group'    => 'autoScroll',
				'label'    => esc_html__( 'Pause on hover', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'autoplayscroll', '=', array( 'autoplay', 'autoscroll' ) ),
			);

			$this->controls['pauseOnFocus'] = array(
				'group'    => 'autoScroll',
				'label'    => esc_html__( 'Pause on focus', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'autoplayscroll', '=', array( 'autoplay', 'autoscroll' ) ),
			);

			$this->controls['intersectionSep'] = array(
				'label'    => 'Intersection',
				'tab'      => 'content',
				'group'    => 'autoScroll',
				'type'     => 'separator',
				'required' => array( 'autoplayscroll', '=', array( 'autoplay', 'autoscroll' ) ),
			);

			$this->controls['intersection'] = array(
				'group'    => 'autoScroll',
				'label'    => esc_html__( 'Only when slider in view', 'bricksextras' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'autoplayscroll', '=', array( 'autoplay', 'autoscroll' ) ),
			);

			$this->controls['rootMargin'] = array(
				'group'       => 'autoScroll',
				'label'       => esc_html__( 'Root margin', 'bricksextras' ),
				'type'        => 'number',
				'units'       => true,
				'placeholder' => '0px',
				'inline'      => true,
				'info'        => esc_html__( 'How far before the slider comes into view', 'bricksextras' ),
				'required'    => array( 'autoplayscroll', '=', array( 'autoplay', 'autoscroll' ) ),
			);

			// ANIMATIONS

			$this->controls['innerAnimations'] = array(
				'group'    => 'animations',
				'label'    => esc_html__( 'Enable', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'optionsType', '!=', 'custom' ),
			);

			$this->controls['animationTrigger'] = array(
				'group'       => 'animations',
				'label'       => esc_html__( 'Trigger', 'bricks' ),
				'type'        => 'select',
				'options'     => array(
					'is-active'  => esc_html__( 'Active', 'bricks' ),
					'is-visible' => esc_html__( 'Visible', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Visible', 'bricks' ),
				'required'    => array( 'innerAnimations', '=', true ),
			);

			$this->controls['animateOnce'] = array(
				'group'    => 'animations',
				'label'    => esc_html__( 'Run only once', 'bricks' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'innerAnimations', '=', true ),
			);

			$this->controls['animationStagger'] = array(
				'group'    => 'animations',
				'label'    => esc_html__( 'Stagger animation delays', 'bricksextras' ),
				'type'     => 'checkbox',
				'inline'   => true,
				'required' => array( 'innerAnimations', '=', true ),
			);

			$this->controls['animationDelayFirst'] = array(
				'group'    => 'animations',
				'label'    => esc_html__( 'Start delay in ms', 'bricks' ),
				'type'     => 'number',
				'inline'   => true,
				'required' => array( 'innerAnimations', '=', true ),
			);

			$this->controls['animationDelay'] = array(
				'group'    => 'animations',
				'label'    => esc_html__( 'Interval in ms', 'bricks' ),
				'type'     => 'number',
				'inline'   => true,
				'required' => array( 'innerAnimations', '=', true ),
			);

			// dynamic styles

			$this->controls['slideStyleSeparator'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Default', 'bricks' ),
				'type'  => 'separator',
			);

			$this->controls['slideOpacity'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Opacity', 'bricks' ),
				'type'  => 'number',
				'css'   => array(
					array(
						'property'  => 'opacity',
						'selector'  => '.x-splide__track > .splide__list .splide__slide',
						'important' => 'true',
					),
				),
			);

			$this->controls['slideBorder'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Border', 'bricks' ),
				'type'  => 'border',
				'css'   => array(
					array(
						'property'  => 'border',
						'selector'  => '.x-splide__track > .splide__list .splide__slide',
						'important' => 'true',
					),
				),
			);

			$this->controls['slideBackground'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Background', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'background',
						'selector' => '.x-splide__track > .splide__list .splide__slide',
					),
				),
			);

			$this->controls['slideTypography'] = array(
				'tab'   => 'content',
				'group' => 'dynamicStyles',
				'type'  => 'typography',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-splide__track > .splide__list .splide__slide',
					),
				),
			);

			$this->controls['slideActiveStyleSeparator'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Active', 'bricks' ),
				'type'  => 'separator',
			);

			$activeClass   = '.is-active';
			$activePreview = '.x-slider_preview-active';

			$this->controls['slideOpacityActive'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Opacity', 'bricks' ),
				'type'  => 'number',
				'css'   => array(
					array(
						'property'  => 'opacity',
						'selector'  => '.x-splide__track > .splide__list .splide__slide' . $activeClass,
						'important' => 'true',
					),
				),
			);

			$this->controls['slideBorderActive'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Border', 'bricks' ),
				'type'  => 'border',
				'css'   => array(
					array(
						'property'  => 'border',
						'selector'  => '.x-splide__track > .splide__list .splide__slide.is-active',
						'important' => 'true',
					),
				),
			);

			$this->controls['slideBackgroundActive'] = array(
				'group' => 'dynamicStyles',
				'label' => esc_html__( 'Background', 'bricks' ),
				'type'  => 'color',
				'css'   => array(
					array(
						'property' => 'background',
						'selector' => '.x-splide__track > .splide__list .splide__slide.is-active',
					),
				),
			);

			$this->controls['slideTypographyActive'] = array(
				'tab'   => 'content',
				'group' => 'dynamicStyles',
				'type'  => 'typography',
				'label' => esc_html__( 'Typography', 'bricks' ),
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => '.x-splide__track > .splide__list .splide__slide.is-active',
					),
				),
			);

			// accessibility

			$this->controls['tagsSep'] = array(
				'group'    => 'accessibility',
				'label'    => esc_html__( 'HTML tag', 'bricks' ),
				'type'     => 'separator',
				'required' => array( 'galleryMode', '!=', true ),
			);

			$this->controls['listTag'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'HTML tag', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'div',
				'required'       => array( 'galleryMode', '!=', true ),
			);

			$this->controls['ariaLabelSep'] = array(
				'group' => 'accessibility',
				'label' => esc_html( 'aria-label' ),
				'type'  => 'separator',
			);

			$this->controls['i18nNext'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Next arrow', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Next slide',
				'required'       => array( 'arrows', '!=', array( 'false' ) ),
			);

			$this->controls['i18nPrev'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Prev arrow', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Previous slide',
				'required'       => array( 'arrows', '!=', array( 'false' ) ),
			);

			$this->controls['i18nSlideX'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Navigation', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Go to slide %s',
			);

			$this->controls['i18nPageX'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Navigation', 'bricks' ) . ' (' . esc_html__( 'Page', 'bricks' ) . ')',
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Go to page %s',
				'required'       => array( 'pagination', '!=', '' ),
			);

			$this->controls['i18nSelect'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Pagination', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Select a slide to show',
				'required'       => array( 'pagination', '!=', '' ),
			);

			$this->controls['i18nSlideLabel'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Slide', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => '%s of %s',
			);

			$this->controls['ariaRoleDescriptionSep'] = array(
				'group' => 'accessibility',
				'label' => esc_html( 'aria-roledescription' ),
				'type'  => 'separator',
			);

			$this->controls['i18nSlide'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Slide', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Slide',
			);

			$this->controls['i18nCarousel'] = array(
				'group'          => 'accessibility',
				'label'          => esc_html__( 'Slider', 'bricks' ),
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'placeholder'    => 'Carousel',
			);

			// conditional slider

			$this->controls['maybeConditionalSlider'] = array(
				'group' => 'conditionalSlider',
				'label' => esc_html__( 'Disable slider if not enough slides to fill slider viewport', 'bricksextras' ),
				'type'  => 'checkbox',
			);

			$this->controls['conditionalSep'] = array(
				'group'    => 'conditionalSlider',
				'label'    => esc_html__( 'Layout if slider not active', 'bricksextras' ),
				'type'     => 'separator',
				'required' => array( 'maybeConditionalSlider', '!=', false ),
			);

			$conditionalSliderSelector = '&.x-slider.x-no-slider .splide__list';

			$this->controls['conditionaljustifyContent'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Align', 'bricks' ) . ' (justify-content)',
				'group'    => 'conditionalSlider',
				'type'     => 'align-items',
				'exclude'  => array( 'stretch', 'auto' ),
				'css'      => array(
					array(
						'property' => 'justify-content',
						'selector' => $conditionalSliderSelector,
					),
				),
				'required' => array( 'maybeConditionalSlider', '!=', false ),
			);

			// gallery

			$this->controls['galleryInfo'] = array(
				'group'       => 'gallery',
				'label'       => esc_html__( 'Gallery mode', 'bricksextras' ),
				'description' => esc_html__( 'The purpose of gallery mode is to allow you to dynamically populate the list of slides, either by using a Pro Slider Gallery element or manually using a code element.', 'bricksextras' ),
				'type'        => 'separator',
			);

			$this->controls['galleryMode'] = array(
				'group'  => 'gallery',
				'label'  => esc_html__( 'Enable', 'bricks' ),
				// 'description'    => esc_html__( 'Enable if adding gallery slides (adding the Pro Slider Gallery or using a code element)', 'bricksextras' ),
				'type'   => 'checkbox',
				'inline' => true,
			);
	}

	public function get_nestable_item() {
		return array(
			'name'     => 'block',
			'label'    => esc_html__( 'Slide', 'bricks' ),
			'settings' => array(

				'_hidden' => array(
					'_cssClasses' => 'x-slider_slide splide__slide',
				),
			),
			'children' => array(
				array(
					'name'     => 'heading',
					'settings' => array(
						'text' => esc_html__( 'Slide', 'bricks' ),
					),
				),
			),
		);
	}

	public function get_nestable_children() {
		$children = array();

		for ( $i = 0; $i < 2; $i++ ) {
			$item = $this->get_nestable_item();

			// Replace {item_index} with $index
			$item       = json_encode( $item );
			$item       = str_replace( '{item_index}', $i + 1, $item );
			$item       = json_decode( $item, true );
			$children[] = $item;
		}

		return $children;
	}

	/**
	 * Render arrows (use custom HTML solution as splideJS only accepts SVG path via 'arrowPath')
	 */
	public function render_arrows() {
		$prev_arrow = ! empty( $this->settings['prevArrow'] ) ? self::render_icon( $this->settings['prevArrow'] ) : false;
		$next_arrow = ! empty( $this->settings['nextArrow'] ) ? self::render_icon( $this->settings['nextArrow'] ) : false;
		$arrows     = ! isset( $this->settings['arrows'] ) || ( isset( $this->settings['arrows'] ) && 'true' === $this->settings['arrows'] );

		$nextAria = ! empty( $this->settings['i18nNext'] ) ? esc_attr( $this->settings['i18nNext'] ) : esc_attr__( 'Next slide', 'bricksextras' );
		$prevAria = ! empty( $this->settings['i18nPrev'] ) ? esc_attr( $this->settings['i18nPrev'] ) : esc_attr__( 'Previous slide', 'bricksextras' );

		if ( isset( $this->settings['arrows'] ) && 'false' === $this->settings['arrows'] ) {
			return;
		}

		$output = '<div class="splide__arrows x-splide__arrows">';

		if ( $prev_arrow ) {
			$output .= '<button class="splide__arrow splide__arrow--prev" aria-label="' . $prevAria . '" type="button">' . $prev_arrow . '</button>';
		} else {
			$output .= '<button class="splide__arrow splide__arrow--prev" aria-label="' . $prevAria . '" type="button"><svg class="x-splide__arrow-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></button>';
		}

		if ( $next_arrow ) {
			$output .= '<button class="splide__arrow splide__arrow--next" aria-label="' . $nextAria . '" type="button">' . $next_arrow . '</button>';
		} else {
			$output .= '<button class="splide__arrow splide__arrow--next" aria-label="' . $nextAria . '" type="button"><svg class="x-splide__arrow-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></button>';
		}

		$output .= '</div>';

		return $output;
	}


	/**
	 * Render individual slides
	 */
	public function render() {
		$this->set_attribute( '_root', 'class', 'splide' );

		$settings = $this->settings;

		$type = ! empty( $settings['type'] ) ? $settings['type'] : 'slide';

		$autoplayscroll = isset( $settings['autoplayscroll'] ) ? $settings['autoplayscroll'] : false;

		$rootMargin = ! empty( $settings['rootMargin'] ) ? esc_attr( $settings['rootMargin'] ) : '0px';

		// Spacing requires a unit
		$gap         = ! empty( $settings['gap'] ) ? $settings['gap'] : '0px';
		$fixedWidth  = ! empty( $settings['fixedWidth'] ) ? $settings['fixedWidth'] : false;
		$fixedHeight = ! empty( $settings['fixedHeight'] ) ? $settings['fixedHeight'] : false;

		$listTag = isset( $this->settings['listTag'] ) ? \Bricks\Helpers::sanitize_html_tag( $this->settings['listTag'], 'div' ) : 'div';

		// Add default unit
		if ( is_numeric( $gap ) ) {
			$gap = "{$gap}px";
		}
		if ( is_numeric( $fixedWidth ) ) {
			$fixedWidth = "{$fixedWidth}px";
		}
		if ( is_numeric( $fixedHeight ) ) {
			$fixedHeight = "{$fixedHeight}px";
		}

		// Arrows
		$arrows = ! isset( $settings['arrows'] ) || ( isset( $settings['arrows'] ) && 'true' === $settings['arrows'] );

		if ( isset( $settings['autoplayscroll'] ) ) {
			if ( 'autoplay' === $settings['autoplayscroll'] ) {
				$autoplay = isset( $settings['autoplayPaused'] ) ? 'pause' : true;
			} else {
				$autoplay = false;
			}
		} else {
			$autoplay = false;
		}

		if ( isset( $settings['drag'] ) ) {
			if ( 'true' === $settings['drag'] ) {
				$drag = true;
			} elseif ( 'false' === $settings['drag'] ) {
				$drag = false;
			} else {
				$drag = 'free';
			}
		} else {
			$drag = true;
		}

		if ( BricksExtras\Helpers::maybePreview() ) {
			$drag = false;
		}

		$keyboard = ! empty( $settings['keyboard'] ) ? $settings['keyboard'] : 'focused';

		if ( 'false' === $keyboard ) {
			$keyboard = false;
		}

		$media_query = \Bricks\Breakpoints::$is_mobile_first ? 'min' : 'max';

		$splide_options = array(
			'rawConfig'       => array(
				'type'         => $type,
				'direction'    => ! empty( $settings['direction'] ) ? esc_attr( $settings['direction'] ) : ( is_rtl() ? 'rtl' : 'ltr' ),
				'keyboard'     => $keyboard,
				'gap'          => $gap,
				'start'        => ! empty( $settings['start'] ) ? intval( $settings['start'] ) : 0,
				'perPage'      => ! empty( $settings['perPage'] ) && 'fade' !== $type ? $settings['perPage'] : 1,
				'perMove'      => ! empty( $settings['perMove'] ) ? $settings['perMove'] : 1,
				'speed'        => ! empty( $settings['speed'] ) ? intval( $settings['speed'] ) : 400,
				'interval'     => ! empty( $settings['interval'] ) ? $settings['interval'] : 3000,
				'height'       => ! empty( $settings['height'] ) ? esc_attr( $settings['height'] ) : 'auto',
				'autoHeight'   => isset( $settings['autoHeight'] ),
				'autoWidth'    => isset( $settings['autoWidth'] ),
				'pauseOnHover' => isset( $settings['pauseOnHover'] ),
				'pauseOnFocus' => isset( $settings['pauseOnFocus'] ),
				'arrows'       => $arrows,
				'pagination'   => isset( $settings['pagination'] ),
				'updateOnMove' => true,
				'fixedHeight'  => ! empty( $settings['fixedHeight'] ) ? $fixedHeight : false,
				'fixedWidth'   => ! empty( $settings['fixedWidth'] ) ? $fixedWidth : false,
				'drag'         => $drag,
				'snap'         => isset( $settings['snap'] ) ? 'true' === $settings['snap'] : false,
				'easing'       => ! empty( $settings['easing'] ) ? $settings['easing'] : 'cubic-bezier(0.25, 1, 0.5, 1)',
				'mediaQuery'   => $media_query,
			),
			'hashNav'         => isset( $settings['hashNavigation'] ),
			'conditional'     => isset( $settings['maybeConditionalSlider'] ),
			'component'       => \BricksExtras\Helpers::is_component_instance( $this->element ),
			'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
			'componentScope'  => isset( $this->settings['componentScope'] ) ? $this->settings['componentScope'] : 'false',
		);

		if ( isset( $settings['rewind'] ) && $type !== 'loop' ) {

			$splide_options['rawConfig']['rewind'] = $settings['rewind'];

			if ( ! empty( $settings['rewindSpeed'] ) ) {
				$splide_options['rawConfig']['rewindSpeed'] = $settings['rewindSpeed'];
			}

			if ( isset( $settings['rewindByDrag'] ) ) {
				$splide_options['rawConfig']['rewindByDrag'] = $settings['rewindByDrag'];
			}
		}

		if ( isset( $settings['trimSpace'] ) ) {
			$splide_options['rawConfig']['trimSpace'] = 'enable' === $settings['trimSpace'];
		}

		$splide_options['pauseMediaPlayer'] = isset( $settings['pauseMediaPlayer'] ) ? 'enable' === $settings['pauseMediaPlayer'] : true;

		if ( isset( $settings['innerAnimations'] ) ) {
			$splide_options['animationTrigger']    = isset( $settings['animationTrigger'] ) ? $settings['animationTrigger'] : 'is-visible';
			$splide_options['animationStagger']    = isset( $settings['animationStagger'] );
			$splide_options['animationDelay']      = ! empty( $settings['animationDelay'] ) ? floatval( $settings['animationDelay'] ) : 0;
			$splide_options['animationDelayFirst'] = ! empty( $settings['animationDelayFirst'] ) ? floatval( $settings['animationDelayFirst'] ) : 0;
			if ( isset( $settings['animateOnce'] ) ) {
				$splide_options['animateOnce'] = isset( $settings['animateOnce'] );
			}
		}

		if ( isset( $settings['dragMinThreshold'] ) ) {
			$splide_options['rawConfig']['dragMinThreshold'] = intval( $settings['dragMinThreshold'] );
		}

		if ( isset( $settings['flickPower'] ) ) {
			$splide_options['rawConfig']['flickPower'] = intval( $settings['flickPower'] );
		}

		if ( isset( $settings['flickMaxPages'] ) ) {
			$splide_options['rawConfig']['flickMaxPages'] = intval( $settings['flickMaxPages'] );
		}

		if ( ! empty( $settings['focus'] ) ) {
			$splide_options['rawConfig']['focus'] = 'center' === $settings['focus'] ? 'center' : intval( $settings['focus'] );
		}

		if ( isset( $settings['omitEnd'] ) ) {
			$splide_options['rawConfig']['omitEnd'] = true;
		}

		if ( isset( $settings['wheel'] ) ) {
			$splide_options['rawConfig']['wheel']        = true;
			$splide_options['rawConfig']['wheelSleep']   = ! empty( $settings['wheelSleep'] ) ? intval( $settings['wheelSleep'] ) : 700;
			$splide_options['rawConfig']['releaseWheel'] = isset( $settings['releaseWheel'] );
		}

		if ( isset( $settings['autoplayscroll'] ) ) {

			if ( 'autoscroll' === $settings['autoplayscroll'] ) {

				$splide_options['rawConfig']['autoScroll'] = array(
					'speed'        => isset( $settings['autoScrollSpeed'] ) ? floatval( $settings['autoScrollSpeed'] ) : 1,
					'rewind'       => isset( $settings['rewind'] ) ? $settings['rewind'] : false,
					'pauseOnHover' => isset( $settings['pauseOnHover'] ),
					'pauseOnFocus' => isset( $settings['pauseOnFocus'] ),
				);

			}
		}

		$splide_options['rawConfig']['i18n'] = array(
			'carousel' => ! empty( $settings['i18nCarousel'] ) ? esc_attr( $settings['i18nCarousel'] ) : esc_attr__( 'carousel', 'bricksextras' ),
		);

		if ( ! empty( $settings['i18nPrev'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'prev' => esc_attr( $settings['i18nPrev'] ) );
		}

		if ( ! empty( $settings['i18nNext'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'next' => esc_attr( $settings['i18nNext'] ) );
		}

		if ( ! empty( $settings['i18nSlideX'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'slideX' => esc_attr( $settings['i18nSlideX'] ) );
		}

		if ( ! empty( $settings['i18nPageX'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'pageX' => esc_attr( $settings['i18nPageX'] ) );
		}

		if ( ! empty( $settings['i18nSelect'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'select' => esc_attr( $settings['i18nSelect'] ) );
		}

		if ( ! empty( $settings['i18nSlide'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'slide' => esc_attr( $settings['i18nSlide'] ) );
		}

		if ( ! empty( $settings['i18nSlideLabel'] ) ) {
			$splide_options['rawConfig']['i18n'] += array( 'slideLabel' => esc_attr( $settings['i18nSlideLabel'] ) );
		}

		if ( isset( $settings['autoplayscroll'] ) ) {
			if ( 'autoplay' === $settings['autoplayscroll'] && ! isset( $settings['intersection'] ) ) {
				$splide_options['rawConfig'] += array( 'autoplay' => $autoplay );
			}
		}

		if ( isset( $settings['intersection'] ) ) {

			if ( isset( $settings['autoplayscroll'] ) ) {

				if ( 'autoscroll' === $settings['autoplayscroll'] ) {

					$splide_options['rawConfig'] += array( 'autoScroll' => 'pause' );
					$splide_options['rawConfig'] += array(
						'intersection' => array(
							'rootMargin' => $rootMargin,
							'inView'     => array(
								'autoScroll' => true,
							),
							'outView'    => array(
								'autoScroll' => false,
							),
						),
					);
				}

				if ( 'autoplay' === $settings['autoplayscroll'] ) {

					$splide_options['rawConfig']['autoplay'] = 'pause';
					$splide_options['rawConfig']            += array(
						'intersection' => array(
							'rootMargin' => $rootMargin,
							'inView'     => array(
								'autoplay' => true,
							),
							'outView'    => array(
								'autoplay' => false,
							),
						),
					);

				}
			}
		}

		$splide_options['rawConfig']['lazyLoad']     = 'nearby';
		$splide_options['rawConfig']['preloadPages'] = isset( $settings['preloadPages'] ) ? floatval( $settings['preloadPages'] ) : 1;

		if ( isset( $settings['lazyLoad'] ) ) {
			$splide_options['rawConfig']['lazyLoad'] = 'false' === $settings['lazyLoad'] ? false : $settings['lazyLoad'];
		}

		if ( isset( $settings['edgeEffect'] ) ) {
			$splide_options['edgeEffect'] = 'true';
		}

		// STEP: Add settings per breakpoints to splide options
		$breakpoints = array();

		$breakpointOptions = array_keys( $splide_options['rawConfig'] );
		array_unshift( $breakpointOptions, 'focus' );

		/* remove options that are not supporting breakpoints */

		$valuesToRemove = array(
			'trimSpace',
			'updateOnMove',
			'autoHeight',
			'autoWidth',
			'mediaQuery',
			'lazyLoad',
			'start',
			'interval',
			'pauseOnHover',
			'pauseOnFocus',
			'rewind',
			'rewindByDrag',
			'wheel',
			'wheelSleep',
			'releaseWheel',
			'dragMinThreshold',
			'flickPower',
			'flickMaxPages',
			'hashNavigation',
			'autoplay',
			'preloadPages',
			'i18n',
			'intersection',
		);

		foreach ( $valuesToRemove as $value ) {
			$key = array_search( $value, $breakpointOptions );

			if ( $key !== false ) {
				unset( $breakpointOptions[ $key ] );
			}
		}

		foreach ( \Bricks\Breakpoints::$breakpoints as $breakpoint ) {
			foreach ( $breakpointOptions as $option ) {

				$setting_key      = $breakpoint['key'] === 'desktop' ? $option : "$option:{$breakpoint['key']}";
				$breakpoint_width = $breakpoint['width'] ?? false;
				$setting_value    = $settings[ $setting_key ] ?? false;

				// Spacing requires a unit
				if ( $option === 'gap' ) {
					// Add default unit
					if ( is_numeric( $setting_value ) ) {
						$setting_value = "{$setting_value}px";
					}
				}

				if ( $option === 'fixedHeight' ) {
					// Add default unit
					if ( is_numeric( $setting_value ) ) {
						$setting_value = "{$setting_value}px";
					}
				}

				if ( $option === 'fixedWidth' ) {
					// Add default unit
					if ( is_numeric( $setting_value ) ) {
						$setting_value = "{$setting_value}px";
					}
				}

				/* for custom breakpoints if above base breakpoint */

				if ( $option === 'gap' && isset( $breakpoint['base'] ) && $setting_value ) {
					if ( is_numeric( $setting_value ) ) {
						$splide_options['rawConfig']['gap'] = "{$setting_value}px";
					} else {
						$splide_options['rawConfig']['gap'] = $setting_value;
					}
				}

				if ( $option === 'fixedWidth' && isset( $breakpoint['base'] ) && $setting_value ) {
					if ( is_numeric( $setting_value ) ) {
						$splide_options['rawConfig']['fixedWidth'] = "{$setting_value}px";
					} else {
						$splide_options['rawConfig']['fixedWidth'] = $setting_value;
					}
				}

				if ( $option === 'fixedHeight' && isset( $breakpoint['base'] ) && $setting_value ) {
					if ( is_numeric( $setting_value ) ) {
						$splide_options['rawConfig']['fixedHeight'] = "{$setting_value}px";
					} else {
						$splide_options['rawConfig']['fixedHeight'] = $setting_value;
					}
				}

				if ( $option === 'height' && isset( $breakpoint['base'] ) && $setting_value ) {
					if ( is_numeric( $setting_value ) ) {
						$splide_options['rawConfig']['height'] = "{$setting_value}px";
					} else {
						$splide_options['rawConfig']['height'] = $setting_value;
					}
				}

				if ( $option === 'perPage' && isset( $breakpoint['base'] ) && $setting_value ) {
					$splide_options['rawConfig']['perPage'] = $setting_value;
				}

				if ( $option === 'perMove' && isset( $breakpoint['base'] ) && $setting_value ) {
					$splide_options['rawConfig']['perMove'] = intval( $setting_value );
				}

				if ( $option === 'direction' && isset( $breakpoint['base'] ) && $setting_value ) {
					$splide_options['rawConfig']['direction'] = $setting_value;
				}

				if ( $option === 'focus' && isset( $breakpoint['base'] ) && $setting_value ) {
					$splide_options['rawConfig']['focus'] = $setting_value;
				}

				if ( $breakpoint_width && $setting_value !== false && $option !== 'drag' ) {
					$breakpoints[ $breakpoint_width ][ $option ] = $setting_value;
				}

				if ( $breakpoint_width && $option === 'drag' ) {

					if ( 'true' === $setting_value ) {
						$breakpoints[ $breakpoint_width ][ $option ] = true;
					} elseif ( 'false' === $setting_value ) {
						$breakpoints[ $breakpoint_width ][ $option ] = false;
					} elseif ( 'free' === $setting_value ) {
						$breakpoints[ $breakpoint_width ][ $option ] = 'free';
					}
				}
			}
		}

		if ( count( $breakpoints ) ) {
			$splide_options['rawConfig']['breakpoints'] = $breakpoints;
		}

		// Custom options (provided as valid JSON string)
		$options_type = ! empty( $settings['optionsType'] ) ? $settings['optionsType'] : 'default';

		if ( $options_type === 'custom' && ! empty( $settings['options'] ) ) {
			$splide_options = trim( stripslashes( $settings['options'] ) );
		}

		// Generate and set a unique identifier for this instance
		$indentifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

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

		$loopIndex = '';

		if ( $query_id ) {

			if ( BricksExtras\Helpers::get_bricks_looping_parent_query_id_by_level( 2 ) ) {
				$loopIndex = \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 ) ) {
					$loopIndex = \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 {
				$loopIndex = \Bricks\Query::get_loop_index();
			}
		}

		if ( isset( $settings['isNavigation'] ) ) {
			if ( ! isset( $settings['independentScrolling'] ) ) {
				$splide_options['rawConfig']['isNavigation'] = true;
			} else {
				$splide_options['isIndepententNav'] = 'true';
			}
			$splide_options['syncSelector'] = isset( $settings['syncSelector'] ) ? $settings['syncSelector'] : '.main-slider';

			if ( \Bricks\Query::is_any_looping() ) {
				$splide_options['syncSelector'] = isset( $settings['syncSelector'] ) ? $settings['syncSelector'] . '_' . $loopIndex : '.main-slider';
			}
		}

		if ( isset( $settings['maybeAdaptiveHeight'] ) ) {
			$splide_options['adaptiveHeight'] = 'true';
		}

		if ( is_array( $splide_options ) ) {
			$splide_options = wp_json_encode( $splide_options );
		}

		$this->set_attribute( '_root', 'data-x-slider', $splide_options );
		$this->set_attribute( '_root', 'class', 'x-slider' );
		$this->set_attribute( 'splide__track', 'class', 'splide__track' );
		$this->set_attribute( 'splide__track', 'class', 'x-splide__track' );
		$this->set_attribute( 'splide__list', 'class', 'splide__list' );

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

		$output .= $this->render_arrows();

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

		$output .= ! isset( $settings['galleryMode'] ) ? '<' . $listTag . " {$this->render_attributes( 'splide__list' )}>" : '';

		$output .= \Bricks\Frontend::render_children( $this );

		$output .= ! isset( $settings['galleryMode'] ) ? '</' . $listTag . '>' : '';  // .splide__list

		$output .= '</div>'; // .splide__track

		$output .= '</div>'; // .root

		echo $output;

		if ( isset( $settings['intersection'] ) ) {
			wp_enqueue_script( 'x-splide-intersection', BRICKSEXTRAS_URL . 'components/assets/js/splide-intersection.js', '', '0.3.0', true );
		}

		if ( 'autoscroll' === $autoplayscroll ) {
			wp_enqueue_script( 'x-splide-autoscroll', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybeMinifyScripts( 'splide-autoscroll' ) . '.js', '', '0.5.3', true );
		}

		if ( isset( $settings['hashNavigation'] ) ) {
			wp_enqueue_script( 'x-splide-hashnav', BRICKSEXTRAS_URL . 'components/assets/js/splide-hashnav.js', '', '0.3.0', true );
		}
	}



	public static function render_builder() {

		$initProSlider = false;

		/* allow for init if prefered */
		$initProSlider = apply_filters( 'bricksextras/proslider/builderinit', $initProSlider );

		if ( ! $initProSlider ) {

			?>

				<script type="text/x-template" id="tmpl-bricks-element-xproslider">
					<component
						class="splide x-slider"
						:class="[settings.direction, settings.edgeEffect && 'loop' === settings.type ? 'edgeEffect' : '']"
					>

					<div
						class="x-slider_builder"
					>

						<div v-show="'custom' !== settings.arrows && 'false' !== settings.arrows" class="splide__arrows splide__arrows_builder x-splide__arrows splide__arrows--ltr">
							<button class="splide__arrow splide__arrow--prev" type="button" aria-label="Previous slide" aria-controls="brxe-doiubd-track"  disabled="">
								<icon-svg v-if="settings.prevArrow"
									:iconSettings="settings.prevArrow"
								/>
								<svg v-else class="x-splide__arrow-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/
								></svg>
							</button>
							<button class="splide__arrow splide__arrow--next" type="button" aria-label="Next slide" aria-controls="brxe-doiubd-track">
								<icon-svg v-if="settings.nextArrow"
									:iconSettings="settings.nextArrow"
								/>

								<svg v-else class="x-splide__arrow-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/
								></svg>
							</button>
						</div>
							<div
								class="splide__track splide__track_builder x-splide__track"
								:class="[('fade' === settings.type ? 'splide__track--fade' : ''), (settings.autoWidth ? 'x-slider_autoWidth' : '')]"
							>
							<div v-if="!settings.galleryMode"
								class="splide__list splide__list_builder"
							><bricks-element-children :element="element" />
							</div>

							<bricks-element-children
								v-else
								:element="element"
							/>

							</div>

							<!-- Add the pagination element -->
							<ul v-show="settings.pagination" class="splide__pagination splide__pagination_builder" role="tablist" aria-label="Select a slide to show">
								<li role="presentation"><button class="splide__pagination__page is-active" type="button" role="tab" aria-label="Go to slide 1" aria-selected="true"></button></li>
								<li role="presentation"><button class="splide__pagination__page" type="button" role="tab" aria-label="Go to slide 2" tabindex="-1"></button></li>
								<li role="presentation"><button class="splide__pagination__page" type="button" role="tab" aria-label="Go to slide 3" tabindex="-1"></button></li>
							</ul>


						</div>
					</component>
				</script>

			<?php

		}
	}
}
