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

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

/**
 * Pro Slider Control element class.
 */
class X_Pro_Slider_Control extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';
	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xproslidercontrol';
	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-signal';
	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


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

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'slider', 'control', 'progress', 'counter', 'arrows' );
	}

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

		$this->control_groups['counterCurrent'] = array(
			'title'    => esc_html__( 'Current slide', 'bricksextras' ),
			'required' => array( 'controlType', '=', 'counter' ),
		);

		$this->control_groups['counterSeperator'] = array(
			'title'    => esc_html__( 'Separator', 'bricks' ),
			'required' => array( 'controlType', '=', 'counter' ),
		);

		$this->control_groups['counterTotal'] = array(
			'title'    => esc_html__( 'Total slides', 'bricksextras' ),
			'required' => array( 'controlType', '=', 'counter' ),
		);

		$this->control_groups['playButtonIconGroup'] = array(
			'title'    => esc_html__( 'Icons', 'bricks' ),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->control_groups['playButtonGroup'] = array(
			'title'    => esc_html__( 'Button style', 'bricks' ),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->control_groups['progressBarGroup'] = array(
			'title'    => esc_html__( 'Progress Bar', 'bricks' ),
			'required' => array( 'controlType', '!=', array( 'navArrow', 'playPause', 'counter', 'autoplayProgress', 'slideContent', 'paginationDots' ) ),
		);

		$this->control_groups['navArrowGroup'] = array(
			'title'    => esc_html__( 'Previous', 'bricks' ) . ' / ' . esc_html__( 'Next', 'bricks' ),
			'required' => array( 'controlType', '=', 'navArrow' ),
		);

		$this->control_groups['autoplayProgressGroup'] = array(
			'title'    => esc_html__( 'Progress Bar', 'bricks' ) . ' (' . esc_html__( 'Autoplay', 'bricks' ) . ')',
			'required' => array( 'controlType', '=', 'autoplayProgress' ),
		);

		$this->control_groups['slideContentGroup'] = array(
			'title'    => esc_html__( 'Content', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
			'required' => array( 'controlType', '=', 'slideContent' ),
		);

		$this->control_groups['paginationDotsGroup'] = array(
			'title'    => esc_html__( 'Pagination Dots', 'bricksextras' ),
			'required' => array( 'controlType', '=', 'paginationDots' ),
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

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

		$this->controls['slider'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Slider to control', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'section'   => esc_html__( 'Within the same section', 'bricksextras' ),
				'selector'  => esc_html__( 'Specific selector', 'bricksextras' ),
				'component' => esc_html__( 'Within the same component', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Within the same section', 'bricksextras' ),
		);

		$this->controls['sliderSelector'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Slider', 'bricks' ) . ')',
			'hasDynamicData' => false,
			'inline'         => true,
			'required'       => array( 'slider', '=', 'selector' ),
		);

		$this->controls['componentScope'] = array(
			'tab'         => 'content',
			'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( 'slider', '=', 'selector' ),
		);

		$this->controls['controlType'] = array(
			'tab'         => 'content',
			'inline'      => true,
			'placeholder' => esc_html__( 'Progress Bar', 'bricks' ),
			'label'       => esc_html__( 'Type', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'progressBar'      => esc_html__( 'Progress Bar', 'bricks' ),
				'counter'          => esc_html__( 'Counter', 'bricks' ),
				'navArrow'         => esc_html__( 'Previous', 'bricks' ) . ' / ' . esc_html__( 'Next', 'bricks' ),
				'playPause'        => esc_html__( 'Play', 'bricks' ) . ' / ' . esc_html__( 'Pause', 'bricks' ) . ' (' . esc_html__( 'Autoplay', 'bricks' ) . ')',
				'autoplayProgress' => esc_html__( 'Progress Bar', 'bricks' ) . ' (' . esc_html__( 'Autoplay', 'bricks' ) . ')',
				'slideContent'     => esc_html__( 'Content', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
				'paginationDots'   => esc_html__( 'Pagination Dots', 'bricksextras' ),
			),
		);

		$this->controls['slideToGetContent'] = array(
			'tab'         => 'content',
			'inline'      => true,
			'placeholder' => esc_html__( 'Active', 'bricks' ),
			'label'       => esc_html__( 'Slide', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'active'   => esc_html__( 'Active', 'bricks' ),
				'previous' => esc_html__( 'Previous', 'bricks' ),
				'next'     => esc_html__( 'Next', 'bricks' ),
			),
			'required'    => array( 'controlType', '=', 'slideContent' ),
		);

		$this->controls['countType'] = array(
			'label'       => esc_html__( 'Counting pages or slides', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'placeholder' => esc_html__( 'Slides to move', 'bricksextras' ),
			'required'    => array( 'controlType', '=', 'counter' ),
			'options'     => array(
				'pages'  => esc_html__( 'Pages to move', 'bricksextras' ),
				'slides' => esc_html__( 'Slides to move', 'bricksextras' ),
			),
		);

		/* content */

		$this->controls['contentTag'] = array(
			'label'          => esc_html__( 'Tag', 'bricks' ),
			'type'           => 'text',
			'hasDynamicData' => false,
			'inline'         => true,
			'small'          => true,
			'placeholder'    => 'div',
			'required'       => array( 'controlType', '=', 'slideContent' ),
		);

		/* play button */

		$this->controls['playIcon'] = array(
			'label'    => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Play', 'bricksextras' ) . ')',
			'type'     => 'icon',
			'group'    => 'playButtonIconGroup',
			'rerender' => true,
			'css'      => array(
				array(
					'selector' => '.x-splide__toggle__play > *',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['pauseIcon'] = array(
			'label'    => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Pause', 'bricksextras' ) . ')',
			'type'     => 'icon',
			'group'    => 'playButtonIconGroup',
			'rerender' => true,
			'css'      => array(
				array(
					'selector' => '.x-splide__toggle__pause > *',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['playAriaLabel'] = array(
			'tab'            => 'content',
			'group'          => 'playButtonIconGroup',
			'type'           => 'text',
			'label'          => 'aria-label ( ' . esc_html__( 'Play', 'bricksextras' ) . ')',
			'hasDynamicData' => false,
			'inline'         => true,
			'required'       => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['pauseAriaLabel'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'label'          => 'aria-label ( ' . esc_html__( 'Pause', 'bricksextras' ) . ')',
			'hasDynamicData' => false,
			'group'          => 'playButtonIconGroup',
			'inline'         => true,
			'required'       => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonSep'] = array(
			'label'    => esc_html__( 'Button style', 'bricks' ),
			'type'     => 'separator',
			'group'    => 'playButtonGroup',
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonTypography'] = array(
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'type'     => 'typography',
			'group'    => 'playButtonGroup',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonBorder'] = array(
			'label'    => esc_html__( 'Border', 'bricks' ),
			'group'    => 'playButtonGroup',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonBackground'] = array(
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'background',
			'group'    => 'playButtonGroup',
			'css'      => array(
				array(
					'property' => 'background',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'group'    => 'playButtonGroup',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonMargin'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Margin', 'bricks' ),
			'group'    => 'playButtonGroup',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'margin',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		$this->controls['buttonPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'group'    => 'playButtonGroup',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-splide__toggle',
				),
			),
			'required' => array( 'controlType', '=', 'playPause' ),
		);

		/* counter */

		$this->controls['counterCurrentSeparator'] = array(
			'group' => 'counterCurrent',
			'label' => esc_html__( 'Current slide number', 'bricksextras' ),
			'type'  => 'separator',
		);

		$this->controls['indexCurrentText'] = array(
			'tab'            => 'content',
			'group'          => 'counterCurrent',
			'type'           => 'text',
			'label'          => esc_html__( 'Prefix', 'bricks' ),
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['indexCurrentTextSuffix'] = array(
			'tab'            => 'content',
			'group'          => 'counterCurrent',
			'type'           => 'text',
			'label'          => esc_html__( 'Suffix', 'bricks' ),
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['indexTypography'] = array(
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'group' => 'counterCurrent',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slider_counter-index',
				),
			),
		);

		$this->controls['indexBorder'] = array(
			'label' => esc_html__( 'Border', 'bricks' ),
			'group' => 'counterCurrent',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slider_counter-index',
				),
			),
		);

		$this->controls['indexBackground'] = array(
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'background',
			'group' => 'counterCurrent',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slider_counter-index',
				),
			),
		);

		$this->controls['indexShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'group' => 'counterCurrent',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-slider_counter-index',
				),
			),
		);

		$this->controls['indexMargin'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Margin', 'bricks' ) . ' (' . esc_html__( 'Number', 'bricks' ) . ')',
			'group'       => 'counterCurrent',
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slider_counter-index-number',
				),
			),
			'placeholder' => array(
				'top'    => '0',
				'right'  => '0',
				'bottom' => '0',
				'left'   => '5px',
			),
		);

		$this->controls['indexPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'group' => 'counterCurrent',
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slider_counter-index',
				),
			),
		);

		$this->controls['counterSeparator'] = array(
			'label' => esc_html__( 'Separator', 'bricks' ),
			'group' => 'counterSeperator',
			'type'  => 'separator',
		);

		$this->controls['slideSeperatorText'] = array(
			'tab'            => 'content',
			'group'          => 'counterSeperator',
			'type'           => 'text',
			'label'          => esc_html__( 'Separator', 'bricks' ),
			'hasDynamicData' => false,
			'placeholder'    => 'of',
			'default'        => 'of',
			'inline'         => true,
		);

		$this->controls['seperatorTypography'] = array(
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'group' => 'counterSeperator',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slider_counter-seperator',
				),
			),
		);

		$this->controls['seperatorMargin'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Margin', 'bricks' ),
			'type'        => 'spacing',
			'group'       => 'counterSeperator',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slider_counter-seperator',
				),
			),
			'placeholder' => array(
				'top'    => '0',
				'right'  => '5px',
				'bottom' => '0',
				'left'   => '5px',
			),
		);

		$this->controls['counterTotalSeparator'] = array(
			'label'    => esc_html__( 'Total slides', 'bricksextras' ),
			'group'    => 'counterTotal',
			'type'     => 'separator',
			'required' => array( 'controlType', '=', 'counter' ),
		);

		$this->controls['slideTotalText'] = array(
			'tab'            => 'content',
			'group'          => 'counterTotal',
			'type'           => 'text',
			'label'          => esc_html__( 'Prefix', 'bricks' ),
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['slideTotalTextSuffix'] = array(
			'tab'            => 'content',
			'type'           => 'text',
			'group'          => 'counterTotal',
			'label'          => esc_html__( 'Suffix', 'bricks' ),
			'hasDynamicData' => false,
			'inline'         => true,
		);

		$this->controls['totalTypography'] = array(
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'group' => 'counterTotal',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.x-slider_counter-total',
				),
			),
		);

		$this->controls['totalBorder'] = array(
			'label' => esc_html__( 'Border', 'bricks' ),
			'type'  => 'border',
			'group' => 'counterTotal',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-slider_counter-total',
				),
			),
		);

		$this->controls['totalBackground'] = array(
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'background',
			'group' => 'counterTotal',
			'css'   => array(
				array(
					'property' => 'background',
					'selector' => '.x-slider_counter-total',
				),
			),
		);

		$this->controls['totalShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'group' => 'counterTotal',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-slider_counter-total',
				),
			),
		);

		$this->controls['totalMargin'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Margin', 'bricks' ) . ' (' . esc_html__( 'Number', 'bricks' ) . ')',
			'type'        => 'spacing',
			'group'       => 'counterTotal',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slider_counter-total-number',
				),
			),
			'placeholder' => array(
				'top'    => '0',
				'right'  => '5px',
				'bottom' => '0',
				'left'   => '0',
			),
		);

		$this->controls['totalPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'counterTotal',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-slider_counter-total',
				),
			),
		);

		// Progress bar.

		$this->controls['progressbarSeparator'] = array(
			'label'    => esc_html__( 'Progress Bar', 'bricks' ),
			'type'     => 'separator',
			'group'    => 'progressBarGroup',
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBarClickable'] = array(
			'label'    => esc_html__( 'Interactive', 'bricks' ),
			'type'     => 'checkbox',
			'group'    => 'progressBarGroup',
			'inline'   => true,
			'default'  => true,
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressSegmented'] = array(
			'label'    => esc_html__( 'Segment progress bar', 'bricksextras' ),
			'type'     => 'checkbox',
			'info'     => esc_html__( 'For use with sliders that move 1 slide at a time', 'bricksextras' ),
			'group'    => 'progressBarGroup',
			'inline'   => true,
			'required' => array(
				array(
					'controlType',
					'!=',
					array(
						'counter',
						'playPause',
						'navArrow',
					),
				),
				array( 'progressBarClickable', '=', true ),
			),
		);

		$this->controls['progressBarSegmentGap'] = array(
			'label'       => esc_html__( 'Gap', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'group'       => 'progressBarGroup',
			'inline'      => true,
			'required'    => array(
				array(
					'controlType',
					'!=',
					array(
						'counter',
						'playPause',
						'navArrow',
					),
				),
				array( 'progressBarClickable', '=', true ),
				array( 'progressSegmented', '=', true ),
			),
			'placeholder' => '2%',
			'css'         => array(
				array(
					'property' => '--x-slider-progress-gap',
					'selector' => '.x-slider_progress',
				),
			),
		);

		$this->controls['progressBarAriaLabel'] = array(
			'label'       => 'aria-label',
			'type'        => 'text',
			'group'       => 'progressBarGroup',
			'inline'      => true,
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
			'placeholder' => esc_attr__( 'Slider progress', 'bricksextras' ),
		);

		$this->controls['progressDirection'] = array(
			'label'       => esc_html__( 'Direction', 'bricks' ),
			'type'        => 'select',
			'group'       => 'progressBarGroup',
			'options'     => array(
				'ltr' => esc_html__( 'Left to right', 'bricks' ),
				'rtl' => esc_html__( 'Right to left', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Left to right', 'bricks' ),
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBarTransition'] = array(
			'label'       => esc_html__( 'Duration', 'bricks' ),
			'type'        => 'number',
			'group'       => 'progressBarGroup',
			'placeholder' => '400ms',
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
			'css'         => array(
				array(
					'property' => 'transition-duration',
					'selector' => '.x-slider_progress-bar',
				),
			),
		);

		$this->controls['progressBarBackground'] = array(
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'background',
			'group'    => 'progressBarGroup',
			'css'      => array(
				array(
					'property' => 'background',
					'selector' => '.x-slider_progress',
				),
			),
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBarActiveBackground'] = array(
			'label'    => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'     => 'background',
			'group'    => 'progressBarGroup',
			'css'      => array(
				array(
					'property' => 'background',
					'selector' => '.x-slider_progress-bar',
				),
			),
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBarBorder'] = array(
			'label'    => esc_html__( 'Border', 'bricks' ),
			'type'     => 'border',
			'group'    => 'progressBarGroup',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-slider_progress',
				),
			),
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBarThickness'] = array(
			'label'       => esc_html__( 'Thickness', 'bricksextras' ),
			'type'        => 'number',
			'group'       => 'progressBarGroup',
			'units'       => true,
			'placeholder' => '4px',
			'css'         => array(
				array(
					'property' => '--xsliderprogress-thickness',
					'selector' => '.x-slider_progress',
				),
			),
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressPositioning'] = array(
			'label'       => esc_html__( 'Position', 'bricks' ),
			'type'        => 'select',
			'group'       => 'progressBarGroup',
			'options'     => array(
				'static'   => 'static',
				'absolute' => 'absolute',
			),
			'inline'      => true,
			'placeholder' => 'relative',
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
			'css'         => array(
				array(
					'property' => 'position',
					'selector' => '.x-slider_progress',
				),
			),
		);

		$this->controls['progressTop'] = array(
			'label'    => esc_html__( 'Top', 'bricks' ),
			'type'     => 'number',
			'group'    => 'progressBarGroup',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'top',
					'selector' => '.x-slider_progress',
				),
			),
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressRight'] = array(
			'label'       => esc_html__( 'Right', 'bricks' ),
			'type'        => 'number',
			'group'       => 'progressBarGroup',
			'units'       => true,
			'placeholder' => '0',
			'css'         => array(
				array(
					'property' => 'right',
					'selector' => '.x-slider_progress',
				),
			),
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressBottom'] = array(
			'label'       => esc_html__( 'Bottom', 'bricks' ),
			'type'        => 'number',
			'group'       => 'progressBarGroup',
			'units'       => true,
			'placeholder' => '0',
			'css'         => array(
				array(
					'property' => 'bottom',
					'selector' => '.x-slider_progress',
				),
			),
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressLeft'] = array(
			'label'       => esc_html__( 'Left', 'bricks' ),
			'type'        => 'number',
			'group'       => 'progressBarGroup',
			'units'       => true,
			'placeholder' => '0',
			'css'         => array(
				array(
					'property' => 'left',
					'selector' => '.x-slider_progress',
				),
			),
			'required'    => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		$this->controls['progressMargin'] = array(
			'label'    => esc_html__( 'Margin', 'bricks' ),
			'type'     => 'spacing',
			'group'    => 'progressBarGroup',
			'css'      => array(
				array(
					'property' => 'margin',
					'selector' => '.x-slider_progress',
				),
			),
			'required' => array(
				'controlType',
				'!=',
				array(
					'counter',
					'playPause',
					'navArrow',
				),
			),
		);

		/* navigation buttons */

		$this->controls['navSeparator'] = array(
			'label'    => esc_html__( 'Navigation', 'bricks' ),
			'type'     => 'separator',
			'group'    => 'navArrowGroup',
			'required' => array(
				array( 'controlType', '=', 'navArrow' ),
			),
		);

			$this->controls['navType'] = array(
				'tab'         => 'content',
				'inline'      => true,
				'label'       => esc_html__( 'Type', 'bricks' ) . ' (' . esc_html__( 'Previous', 'bricks' ) . ' / ' . esc_html__( 'Next', 'bricks' ) . ')',
				'type'        => 'select',
				'group'       => 'navArrowGroup',
				'options'     => array(
					'prev' => esc_html__( 'Previous', 'bricks' ),
					'next' => esc_html__( 'Next', 'bricks' ),
				),
				'placeholder' => esc_html__( 'Previous', 'bricks' ),
				'required'    => array(
					array( 'controlType', '=', 'navArrow' ),
				),
			);

			$this->controls['buttonType'] = array(
				'tab'         => 'content',
				'inline'      => true,
				'label'       => esc_html__( 'Content', 'bricks' ),
				'type'        => 'select',
				'group'       => 'navArrowGroup',
				'options'     => array(
					'icon' => esc_html__( 'Icon', 'bricks' ),
					'nest' => esc_html__( 'Add elements', 'bricks' ) . ' (' . esc_html__( 'Nestable', 'bricks' ) . ')',
				),
				'placeholder' => esc_html__( 'Icon', 'bricks' ),
				'required'    => array(
					array( 'controlType', '=', 'navArrow' ),
				),
			);

			$this->controls['prevIcon'] = array(
				'label'    => esc_html__( 'Icon', 'bricks' ),
				'type'     => 'icon',
				'group'    => 'navArrowGroup',
				'rerender' => true,
				'css'      => array(
					array(
						'selector' => '.x-slider-control_nav--prev .x-slider-control_nav-arrow > *',
					),
				),
				'required' => array(
					array( 'navType', '!=', 'next' ),
					array( 'controlType', '=', 'navArrow' ),
					array( 'buttonType', '!=', 'nest' ),
				),
			);

			$this->controls['nextIcon'] = array(
				'label'    => esc_html__( 'Icon', 'bricks' ),
				'type'     => 'icon',
				'group'    => 'navArrowGroup',
				'css'      => array(
					array(
						'selector' => '.x-slider-control_nav--next .x-slider-control_nav-arrow > *',
					),
				),
				'required' => array(
					array( 'navType', '=', 'next' ),
					array( 'controlType', '=', 'navArrow' ),
					array( 'buttonType', '!=', 'nest' ),
				),
			);

			$this->controls['prevAriaLabel'] = array(
				'tab'            => 'content',
				'group'          => 'navArrowGroup',
				'type'           => 'text',
				'label'          => 'aria-label',
				'hasDynamicData' => false,
				'inline'         => true,
				'required'       => array(
					array( 'navType', '!=', 'next' ),
					array( 'controlType', '=', 'navArrow' ),
				),
				'placeholder'    => 'Previous Slide',
			);

			$this->controls['nextAriaLabel'] = array(
				'tab'            => 'content',
				'type'           => 'text',
				'group'          => 'navArrowGroup',
				'label'          => 'aria-label',
				'hasDynamicData' => false,
				'inline'         => true,
				'required'       => array(
					array( 'navType', '=', 'next' ),
					array( 'controlType', '=', 'navArrow' ),
				),
				'placeholder'    => 'Next Slide',
			);

			$nav_button = '.x-slider-control_nav';

			$this->controls['navbuttonSep'] = array(
				'label'    => esc_html__( 'Button style', 'bricks' ),
				'type'     => 'separator',
				'group'    => 'navArrowGroup',
				'required' => array(
					array( 'controlType', '=', 'navArrow' ),
				),
			);

			$this->controls['navbuttonTypography'] = array(
				'label' => esc_html__( 'Typography', 'bricks' ),
				'type'  => 'typography',
				'group' => 'navArrowGroup',
				'css'   => array(
					array(
						'property' => 'font',
						'selector' => $nav_button,
					),
				),
			);

			$this->controls['navbuttonBorder'] = array(
				'label' => esc_html__( 'Border', 'bricks' ),
				'type'  => 'border',
				'group' => 'navArrowGroup',
				'css'   => array(
					array(
						'property' => 'border',
						'selector' => '.x-slider-control_nav',
					),
				),
			);

			$this->controls['navbuttonBackground'] = array(
				'label' => esc_html__( 'Background', 'bricks' ),
				'type'  => 'background',
				'group' => 'navArrowGroup',
				'css'   => array(
					array(
						'property' => 'background',
						'selector' => '.x-slider-control_nav',
					),
				),
			);

			$this->controls['navbuttonShadow'] = array(
				'tab'   => 'content',
				'label' => esc_html__( 'Box shadow', 'bricks' ),
				'type'  => 'box-shadow',
				'group' => 'navArrowGroup',
				'css'   => array(
					array(
						'property' => 'box-shadow',
						'selector' => $nav_button,
					),
				),
			);

			$this->controls['navButtonWidth'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Width', 'bricks' ),
				'inline'      => true,
				'group'       => 'navArrowGroup',
				'type'        => 'number',
				'units'       => true,
				'css'         => array(
					array(
						'selector' => $nav_button,
						'property' => 'width',
					),
				),
				'placeholder' => '',
			);

			$this->controls['navButtonHeight'] = array(
				'tab'         => 'content',
				'group'       => 'navArrowGroup',
				'label'       => esc_html__( 'Height', 'bricks' ),
				'inline'      => true,
				'type'        => 'number',
				'units'       => true,
				'css'         => array(
					array(
						'selector' => $nav_button,
						'property' => 'height',
					),
				),
				'placeholder' => '',
			);

			$this->controls['navButtonOpacity'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Opacity', 'bricks' ),
				'inline'      => true,
				'group'       => 'navArrowGroup',
				'type'        => 'number',
				'min'         => 0,
				'max'         => 1,
				'placeholder' => '1',
				'step'        => '0.1',
				'css'         => array(
					array(
						'selector' => $nav_button,
						'property' => 'opacity',
					),
				),
			);

			$this->controls['navButtonOpacityDisabled'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Disabled', 'bricks' ) . ')',
				'inline'      => true,
				'group'       => 'navArrowGroup',
				'type'        => 'number',
				'min'         => 0,
				'max'         => 1,
				'step'        => '0.1',
				'placeholder' => '0.35',
				'css'         => array(
					array(
						'selector' => $nav_button . '[disabled]',
						'property' => 'opacity',
					),
					array(
						'selector' => $nav_button . ':disabled',
						'property' => 'opacity',
					),
				),

			);

			$this->controls['navbuttonPadding'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Padding', 'bricks' ),
				'group'       => 'navArrowGroup',
				'type'        => 'spacing',
				'css'         => array(
					array(
						'property' => 'padding',
						'selector' => $nav_button,
					),
				),
				'placeholder' => array(
					'top'    => '15px',
					'right'  => '20px',
					'bottom' => '15px',
					'left'   => '20px',
				),
			);

			/*
			Autoplay progress
			*/
			$this->controls['autoplayProgressType'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Type', 'bricks' ),
				'placeholder' => esc_html__( 'Progress Bar', 'bricks' ),
				'type'        => 'select',
				'inline'      => true,
				'group'       => 'autoplayProgressGroup',
				'options'     => array(
					'progressBar' => esc_html__( 'Progress Bar', 'bricks' ),
					'circle'      => esc_html__( 'Circle', 'bricks' ),
				),
			);

			/* autoplay circle */

			$this->controls['autoplayCircleWidth'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Size', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'autoplayProgressGroup',
				'placeholder' => '100px',
				'css'         => array(
					array(
						'selector' => '.x-slider-control_autoplay_container',
						'property' => 'width',
					),
					array(
						'selector' => '.x-slider-control_autoplay_container',
						'property' => 'height',
					),
				),
				'required'    => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayProgressSegmented'] = array(
				'label'    => esc_html__( 'Segment autoplay progress bar', 'bricksextras' ),
				'type'     => 'checkbox',
				'info'     => esc_html__( 'For use with sliders that move 1 slide at a time', 'bricksextras' ),
				'group'    => 'autoplayProgressGroup',
				'inline'   => true,
				'required' => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
			);

			$this->controls['autoplayProgressSegmentGap'] = array(
				'label'       => esc_html__( 'Segment gap', 'bricksextras' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'autoplayProgressGroup',
				'inline'      => true,
				'placeholder' => '2%',
				'required'    => array( 'autoplayProgressSegmented', '=', true ),
				'css'         => array(
					array(
						'property' => '--x-slider-autoplay-gap',
						'selector' => '.x-slider-control_autoplay_progress',
					),
				),
			);

			$this->controls['autoplayprogreslineSep'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Progress', 'bricks' ),
				'type'     => 'separator',
				'group'    => 'autoplayProgressGroup',
				'required' => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressLineWidth'] = array(
				'tab'         => 'content',
				'label'       => esc_html__( 'Line width', 'bricksextras' ),
				'inline'      => true,
				'type'        => 'number',
				'units'       => true,
				'placeholder' => '10',
				'css'         => array(
					array(
						'selector' => '.x-slider-control_autoplay_circle circle',
						'property' => '--x-autoplay-stroke-width',
					),
				),
				'group'       => 'autoplayProgressGroup',
				'required'    => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressLineColor'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Color', 'bricks' ),
				'inline'   => true,
				'type'     => 'color',
				'css'      => array(
					array(
						'selector' => '.x-slider-control_autoplay_circle circle',
						'property' => 'stroke',
					),
				),
				'group'    => 'autoplayProgressGroup',
				'required' => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogresBgSep'] = array(
				'tab'      => 'content',
				'label'    => esc_html__( 'Circle', 'bricks' ),
				'type'     => 'separator',
				'group'    => 'autoplayProgressGroup',
				'required' => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressBgWidth'] = array(
				'group'       => 'autoplayProgressGroup',
				'tab'         => 'content',
				'label'       => esc_html__( 'Line width', 'bricksextras' ),
				'inline'      => true,
				'type'        => 'number',
				'units'       => true,
				'placeholder' => '10',
				'css'         => array(
					array(
						'selector' => '.x-slider-control_autoplay_circle_bg circle',
						'property' => '--x-autoplay-stroke-width',
					),
				),
				'required'    => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressBgColor'] = array(
				'group'    => 'autoplayProgressGroup',
				'tab'      => 'content',
				'label'    => esc_html__( 'Color', 'bricks' ),
				'inline'   => true,
				'type'     => 'color',
				'css'      => array(
					array(
						'selector' => '.x-slider-control_autoplay_circle_bg circle',
						'property' => 'stroke',
					),
				),
				'required' => array( 'autoplayProgressType', '=', array( 'circle' ) ),
			);

			/* autoplay progress */

			$this->controls['autoplayprogressBarBackground'] = array(
				'label'    => esc_html__( 'Background', 'bricks' ),
				'type'     => 'color',
				'group'    => 'autoplayProgressGroup',
				'css'      => array(
					array(
						'property' => 'background-color',
						'selector' => '.x-slider-control_autoplay_progress',
					),
				),
				'required' => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressBarActiveBackground'] = array(
				'label'    => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
				'type'     => 'color',
				'group'    => 'autoplayProgressGroup',
				'css'      => array(
					array(
						'property' => 'background-color',
						'selector' => '.x-slider-control_autoplay_progress-bar',
					),
				),
				'required' => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressBarBorder'] = array(
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'group'    => 'autoplayProgressGroup',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '.x-slider-control_autoplay_progress',
					),
				),
				'required' => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressBarThickness'] = array(
				'label'       => esc_html__( 'Thickness', 'bricksextras' ),
				'type'        => 'number',
				'group'       => 'autoplayProgressGroup',
				'units'       => true,
				'placeholder' => '4px',
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '.x-slider-control_autoplay_progress-bar',
					),
				),
				'required'    => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
			);

			$this->controls['autoplayprogressDirection'] = array(
				'label'       => esc_html__( 'Direction', 'bricks' ),
				'type'        => 'select',
				'group'       => 'autoplayProgressGroup',
				'options'     => array(
					'left'  => esc_html__( 'Left to right', 'bricks' ),
					'right' => esc_html__( 'Right to left', 'bricks' ),
				),
				'inline'      => true,
				'placeholder' => esc_html__( 'Left to right', 'bricks' ),
				'required'    => array( 'autoplayProgressType', '!=', array( 'circle' ) ),
				'css'         => array(
					array(
						'property' => 'transform-origin',
						'selector' => '.x-slider-control_autoplay_progress-bar',
					),
				),
			);

			/*
			Slide content
			*/

			$this->controls['slideContentType'] = array(
				'label'       => esc_html__( 'Content type', 'bricks' ),
				'type'        => 'select',
				'group'       => 'slideContentGroup',
				'inline'      => true,
				'options'     => array(
					'caption'   => esc_html__( 'Pro Slider Gallery Caption', 'bricksextras' ),
					'attribute' => esc_html__( 'Slide Data Attribute', 'bricksextras' ),
					'custom'    => esc_html__( 'Custom element', 'bricksextras' ),
				),
				'placeholder' => esc_html__( 'Pro Slider Gallery Caption', 'bricksextras' ),
			);

			$this->controls['slideContentSelector'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Element', 'bricks' ) . ')',
				'placeholder'    => '.some-element',
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'group'          => 'slideContentGroup',
				'required'       => array( 'slideContentType', '=', 'custom' ),
			);

			$this->controls['slideAttribute'] = array(
				'tab'            => 'content',
				'label'          => esc_html__( 'Custom attribute', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
				'placeholder'    => 'data-x-content',
				'type'           => 'text',
				'hasDynamicData' => false,
				'inline'         => true,
				'group'          => 'slideContentGroup',
				'required'       => array( 'slideContentType', '=', 'attribute' ),
			);

			/* pagination dots */

			$this->controls['dotHeight'] = array(
				'label'       => esc_html__( 'Height', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '10px',
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '.x-slider-control_pagination .splide__pagination__page',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotWidth'] = array(
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '10px',
				'css'         => array(
					array(
						'property' => 'width',
						'selector' => '.x-slider-control_pagination .splide__pagination__page',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotColor'] = array(
				'label'    => esc_html__( 'Color', 'bricks' ),
				'type'     => 'color',
				'group'    => 'paginationDotsGroup',
				'css'      => array(
					array(
						'property' => 'color',
						'selector' => '.x-slider-control_pagination .splide__pagination__page',
					),
					array(
						'property' => 'background-color',
						'selector' => '.x-slider-control_pagination .splide__pagination__page',
					),
				),
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotBorder'] = array(
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'group'    => 'paginationDotsGroup',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '.x-slider-control_pagination .splide__pagination__page',
					),
				),
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotActiveSep'] = array(
				'label'    => esc_html__( 'Dots', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
				'type'     => 'separator',
				'group'    => 'paginationDotsGroup',
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotScaleActive'] = array(
				'label'       => esc_html__( 'Scale', 'bricks' ),
				'type'        => 'number',
				'units'       => false,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '1',
				'css'         => array(
					array(
						'property' => 'transform',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
						'value'    => 'scale(%s)',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotColorActive'] = array(
				'label'    => esc_html__( 'Color', 'bricks' ),
				'type'     => 'color',
				'group'    => 'paginationDotsGroup',
				'css'      => array(
					array(
						'property' => 'color',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
					),
					array(
						'property' => 'background-color',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
					),
				),
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotBorderActive'] = array(
				'label'    => esc_html__( 'Border', 'bricks' ),
				'type'     => 'border',
				'group'    => 'paginationDotsGroup',
				'css'      => array(
					array(
						'property' => 'border',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
					),
				),
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotHeightActive'] = array(
				'label'       => esc_html__( 'Height', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '10px',
				'css'         => array(
					array(
						'property' => 'height',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotWidthActive'] = array(
				'label'       => esc_html__( 'Width', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '10px',
				'css'         => array(
					array(
						'property' => 'width',
						'selector' => '.x-slider-control_pagination .splide__pagination__page.is-active',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotLayoutSep'] = array(
				'label'    => esc_html__( 'Layout', 'bricks' ),
				'type'     => 'separator',
				'group'    => 'paginationDotsGroup',
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotDirection'] = array(
				'label'    => esc_html__( 'Direction', 'bricks' ),
				'type'     => 'direction',
				'group'    => 'paginationDotsGroup',
				'css'      => array(
					array(
						'property' => 'flex-direction',
						'selector' => '.x-slider-control_pagination',
					),
				),
				'inline'   => true,
				'required' => array( 'controlType', '=', 'paginationDots' ),
			);

			$this->controls['dotGap'] = array(
				'label'       => esc_html__( 'Gap', 'bricks' ),
				'type'        => 'number',
				'units'       => true,
				'group'       => 'paginationDotsGroup',
				'inline'      => true,
				'placeholder' => '5px',
				'css'         => array(
					array(
						'property' => 'gap',
						'selector' => '.x-slider-control_pagination',
					),
				),
				'required'    => array( 'controlType', '=', 'paginationDots' ),
			);
	}

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

		if ( bricks_is_builder_main() ) {
			return;
		}

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

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

		$settings = $this->settings;

		$control_type    = isset( $settings['controlType'] ) ? $settings['controlType'] : 'progressBar';
		$slider          = isset( $settings['slider'] ) ? $settings['slider'] : 'section';
		$slider_selector = isset( $settings['sliderSelector'] ) ? $settings['sliderSelector'] : '';

		$progress_direction = isset( $settings['progressDirection'] ) ? $settings['progressDirection'] : 'ltr';

		$autoplay_progress_type = isset( $settings['autoplayProgressType'] ) ? $settings['autoplayProgressType'] : 'progressBar';

		$slide_content_selector = isset( $settings['slideContentSelector'] ) ? $settings['slideContentSelector'] : '.some-element';
		$slide_content_type     = isset( $settings['slideContentType'] ) ? $settings['slideContentType'] : 'caption';
		$slide_attribute        = isset( $settings['slideAttribute'] ) ? $settings['slideAttribute'] : 'data-x-content';
		$slide_to_get_content   = isset( $this->settings['slideToGetContent'] ) ? $this->settings['slideToGetContent'] : 'active';

		if ( 'section' === $slider ) {
			$slider_selector = false;
		}

		$config = array(
			'control' => $slider,
			'slider'  => $slider_selector,
			'type'    => $control_type,

		);

		if ( isset( $this->settings['componentScope'] ) ) {
			$config += array( 'componentScope' => $this->settings['componentScope'] );
			$config += array( 'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ) );
		}

		if ( 'component' === $slider ) {
			$config += array( 'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ) );
		}

		if ( 'progressBar' === $control_type && isset( $settings['progressBarClickable'] ) ) {
			$config['progressBarClickable'] = true;
			$config['direction']            = $progress_direction;
			if ( isset( $settings['progressSegmented'] ) && ! \BricksExtras\Helpers::maybe_preview() ) {
				$config['progressSegmented'] = true;
			}
		}

		if ( 'playPause' === $control_type ) {
			$config['playAriaLabel']  = isset( $this->settings['playAriaLabel'] ) ? $this->settings['playAriaLabel'] : esc_attr__( 'Play', 'bricksextras' );
			$config['pauseAriaLabel'] = isset( $this->settings['pauseAriaLabel'] ) ? $this->settings['pauseAriaLabel'] : esc_attr__( 'Pause', 'bricksextras' );
		}

		if ( 'autoplayProgress' === $control_type ) {
			$config['autoplay-progress'] = $autoplay_progress_type;
			if ( isset( $settings['autoplayProgressSegmented'] ) && ! \BricksExtras\Helpers::maybe_preview() ) {
				$config['autoplayProgressSegmented'] = true;
			}
		}

		if ( 'slideContent' === $control_type ) {
			$config['slideContentType']     = $slide_content_type;
			$config['slideContentSelector'] = $slide_content_selector;
			$config['slideAttribute']       = $slide_attribute;
			$config['currentSlide']         = $slide_to_get_content;
		}

		if ( 'counter' === $control_type ) {
			$config['countType'] = isset( $settings['countType'] ) ? $settings['countType'] : 'slides';
		}

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

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

			if ( $query_id ) {
				$config += array( 'isLooping' => strtok( \Bricks\Query::get_query_element_id( $query_id ), '-' ) );
			}
		}

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

		$this->set_attribute( '_root', 'data-x-slider-control', wp_json_encode( $config ) );
		$this->set_attribute( '_root', 'class', 'x-slider-control' );

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

		$output = '';

		$output .= 'slideContent' === $control_type ? '<' . $content_tag . " {$this->render_attributes( '_root' )} >" : "<div {$this->render_attributes( '_root' )} >";

		if ( 'progressBar' === $control_type ) {

			$this->set_attribute( 'x-slider_progress', 'class', 'x-slider_progress' );
			$this->set_attribute( 'x-slider_progress-bar', 'class', 'x-slider_progress-bar' );

			$this->set_attribute( 'x-slider_progress', 'aria-valuemin', '1' );

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

				$this->set_attribute( 'x-slider_progress', 'role', 'slider' );
				$this->set_attribute( 'x-slider_progress', 'tabindex', '0' );

			} else {
				$this->set_attribute( 'x-slider_progress', 'role', 'progressbar' );
			}

			$progress_bar_aria_label = isset( $this->settings['progressBarAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['progressBarAriaLabel'] ) ) : esc_attr__( 'Slider progress', 'bricksextras' );
			$this->set_attribute( 'x-slider_progress', 'aria-label', $progress_bar_aria_label );

			$output .= "<div {$this->render_attributes( 'x-slider_progress' )}>";
			$output .= "<div {$this->render_attributes( 'x-slider_progress-bar' )}>";
			$output .= '</div>';
			$output .= '</div>';

		} elseif ( 'counter' === $control_type ) {

			$this->set_attribute( 'x-slider_counter', 'class', 'x-slider_counter' );
			$this->set_attribute( 'x-slider_counter-seperator', 'class', 'x-slider_counter-seperator' );

			$this->set_attribute( 'x-slider_counter-total', 'class', 'x-slider_counter-total' );
			$this->set_attribute( 'x-slider_counter-total-prefix', 'class', 'x-slider_counter-total-prefix' );
			$this->set_attribute( 'x-slider_counter-total-suffix', 'class', 'x-slider_counter-total-suffix' );

			$this->set_attribute( 'x-slider_counter-index', 'class', 'x-slider_counter-index' );
			$this->set_attribute( 'x-slider_counter-index-prefix', 'class', 'x-slider_counter-index-prefix' );
			$this->set_attribute( 'x-slider_counter-index-suffix', 'class', 'x-slider_counter-index-suffix' );

			$output .= "<div {$this->render_attributes( 'x-slider_counter' )}>";
			$output .= "<div {$this->render_attributes( 'x-slider_counter-index' )}>";
			if ( isset( $settings['indexCurrentText'] ) && $settings['indexCurrentText'] ) {
				$output .= "<div {$this->render_attributes( 'x-slider_counter-index-prefix' )}>" . esc_html( $settings['indexCurrentText'] ) . '</div>';
			}
			$output .= "<div class='x-slider_counter-index-number'></div>";
			if ( isset( $settings['indexCurrentTextSuffix'] ) && $settings['indexCurrentTextSuffix'] ) {
				$output .= "<div {$this->render_attributes( 'x-slider_counter-index-suffix' )}>" . esc_html( $settings['indexCurrentTextSuffix'] ) . '</div>';
			}
			$output .= ' </div>';

			$output .= "<div {$this->render_attributes( 'x-slider_counter-seperator' )}> " . esc_html( isset( $settings['slideSeperatorText'] ) ? $settings['slideSeperatorText'] : esc_html__( 'of', 'bricksextras' ) ) . ' </div>';

			$output .= "<div {$this->render_attributes( 'x-slider_counter-total' )}>";
			if ( isset( $settings['slideTotalText'] ) && $settings['slideTotalText'] ) {
				$output .= "<div {$this->render_attributes( 'x-slider_counter-total-prefix' )}>" . esc_html( $settings['slideTotalText'] ) . '</div>';
			}
			$output .= "<div class='x-slider_counter-total-number'></div>";
			if ( isset( $settings['slideTotalTextSuffix'] ) && $settings['slideTotalTextSuffix'] ) {
				$output .= "<div {$this->render_attributes( 'x-slider_counter-total-suffix' )}>" . esc_html( $settings['slideTotalTextSuffix'] ) . '</div>';
			}
			$output .= '</div>';
			$output .= '</div>';

		} elseif ( 'playPause' === $control_type ) {

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

		} elseif ( 'navArrow' === $control_type ) {

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

		} elseif ( 'autoplayProgress' === $control_type ) {

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

		} elseif ( 'slideContent' === $control_type ) {

			$output .= '<span class=x-slider-control_content></span>';

		} elseif ( 'paginationDots' === $control_type ) {

			$output .= '<ul class="x-slider-control_pagination"></ul>';

		}

		$output .= 'slideContent' === $control_type ? '</' . $content_tag . '>' : '</div>';

		echo $output;
	}

	/**
	 * Render autoplay progress.
	 */
	public function autoplayProgress() {

		$output = '';

		$autoplay_progress_type = isset( $this->settings['autoplayProgressType'] ) ? $this->settings['autoplayProgressType'] : 'progressBar';

		if ( 'circle' === $autoplay_progress_type ) {

			$output .= '<div class=x-slider-control_autoplay_container>';

			$output .= '<svg class="x-slider-control_autoplay_circle_bg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><circle cx="250" cy="250" r="245" style="opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 1571.8px, 1581.8px;"></circle></svg>';
			$output .= '<svg class="x-slider-control_autoplay_circle" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><circle cx="250" cy="250" r="245" style="opacity: 1; stroke-dashoffset: 874.617; stroke-dasharray: 1571.8px, 1581.8px;"></circle></svg>';

			$output .= '<div class=x-slider-control_autoplay_inner>';
			$output .= \Bricks\Frontend::render_children( $this );
			$output .= '</div>';
			$output .= '</div>';

		} else {
			$is_segmented = isset( $this->settings['autoplayProgressSegmented'] );
			$role         = $is_segmented ? 'slider' : 'presentation';
			$aria_attrs   = '';

			if ( $is_segmented ) {
				$aria_label = isset( $this->settings['autoplayProgressAriaLabel'] ) ? esc_attr( $this->settings['autoplayProgressAriaLabel'] ) : esc_attr__( 'Autoplay progress', 'bricksextras' );
				$aria_attrs = ' aria-label="' . $aria_label . '" aria-valuemin="1" aria-valuemax="1" tabindex="0"';
			}

			$output .= '<div class="x-slider-control_autoplay_progress" role="' . $role . '"' . $aria_attrs . '>';
			$output .= '<div class="x-slider-control_autoplay_progress-bar"></div>';
			$output .= '</div>';
		}

		return $output;
	}

	/**
	 * Render navigation.
	 */
	public function render_nav() {

		$prev_icon = ! empty( $this->settings['prevIcon'] ) ? self::render_icon( $this->settings['prevIcon'] ) : false;
		$next_icon = ! empty( $this->settings['nextIcon'] ) ? self::render_icon( $this->settings['nextIcon'] ) : false;

		$nav_type    = isset( $this->settings['navType'] ) ? esc_attr( $this->settings['navType'] ) : 'prev';
		$arrow       = 'next' !== $nav_type ? $prev_icon : $next_icon;
		$button_type = isset( $this->settings['buttonType'] ) ? $this->settings['buttonType'] : 'icon';

		$prev_aria_label = isset( $this->settings['prevAriaLabel'] ) ? esc_attr( $this->settings['prevAriaLabel'] ) : esc_attr__( 'Previous Slide', 'bricksextras' );
		$next_aria_label = isset( $this->settings['nextAriaLabel'] ) ? esc_attr( $this->settings['nextAriaLabel'] ) : esc_attr__( 'Next Slide', 'bricksextras' );

		$nav_aria_label = 'next' !== $nav_type ? $prev_aria_label : $next_aria_label;

		$this->set_attribute( 'x-slider-control_nav', 'class', array( 'x-slider-control_nav', 'x-slider-control_nav--' . $nav_type ) );
		$this->set_attribute( 'x-slider-control_nav-arrow', 'class', array( 'x-slider-control_nav-arrow' ) );
		$this->set_attribute( 'x-slider-control_nav', 'type', 'button' );
		$this->set_attribute( 'x-slider-control_nav', 'disabled', '' ); /* disabled by default */
		$this->set_attribute( 'x-slider-control_nav', 'aria-label', $nav_aria_label );

		$output = "<button {$this->render_attributes( 'x-slider-control_nav' )}>";

		if ( 'next' !== $nav_type && 'icon' === $button_type ) {
			$output .= $prev_icon ? "<span {$this->render_attributes( 'x-slider-control_nav-arrow' )}>" . $prev_icon . '</span>' : "<span {$this->render_attributes( 'x-slider-control_nav-arrow' )}><svg class='x-slider-control_nav-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></span>";
		}

		if ( 'next' === $nav_type && 'icon' === $button_type ) {
			$output .= $next_icon ? "<span {$this->render_attributes( 'x-slider-control_nav-arrow' )}>" . $next_icon . '</span>' : "<span {$this->render_attributes( 'x-slider-control_nav-arrow' )}><svg class='x-slider-control_nav-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></span>";
		}

		if ( 'nest' === $button_type ) {
			$output .= \Bricks\Frontend::render_children( $this );
		}

		$output .= '</button>';

		return $output;
	}

	/**
	 * Render play button.
	 */
	public function render_button() {

		$play_icon  = ! empty( $this->settings['playIcon'] ) ? self::render_icon( $this->settings['playIcon'] ) : false;
		$pause_icon = ! empty( $this->settings['pauseIcon'] ) ? self::render_icon( $this->settings['pauseIcon'] ) : false;

		$this->set_attribute( 'x-splide__toggle', 'class', array( 'x-splide__toggle', 'splide__toggle' ) );
		$this->set_attribute( 'x-splide__toggle', 'type', 'button' );
		$this->set_attribute( 'x-splide__toggle__play', 'class', array( 'x-splide__toggle__play', 'splide__toggle__play' ) );
		$this->set_attribute( 'x-splide__toggle__pause', 'class', array( 'x-splide__toggle__pause', 'splide__toggle__pause' ) );

		$output = "<button {$this->render_attributes( 'x-splide__toggle' )}>";

		$output .= $play_icon ? "<span {$this->render_attributes( 'x-splide__toggle__play' )}>" . $play_icon . '</span>' : "<span {$this->render_attributes( 'x-splide__toggle__play' )}><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M128 104.3v303.4c0 6.4 6.5 10.4 11.7 7.2l240.5-151.7c5.1-3.2 5.1-11.1 0-14.3L139.7 97.2c-5.2-3.3-11.7.7-11.7 7.1z' fill='currentColor'/></svg></span>";
		$output .= $pause_icon ? "<span {$this->render_attributes( 'x-splide__toggle__pause' )}>" . $pause_icon . '</span>' : "<span {$this->render_attributes( 'x-splide__toggle__pause' )}><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M199.9 416h-63.8c-4.5 0-8.1-3.6-8.1-8V104c0-4.4 3.6-8 8.1-8h63.8c4.5 0 8.1 3.6 8.1 8v304c0 4.4-3.6 8-8.1 8z' fill='currentColor'/><path d='M375.9 416h-63.8c-4.5 0-8.1-3.6-8.1-8V104c0-4.4 3.6-8 8.1-8h63.8c4.5 0 8.1 3.6 8.1 8v304c0 4.4-3.6 8-8.1 8z' fill='currentColor'/></svg></span>";

		$output .= '</button>';

		return $output;
	}

	/**
	 * Render builder template.
	 */
	public static function render_builder() {

		$init_pro_slider = false;

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

		if ( ! $init_pro_slider ) {

			?>
			

		<script type="text/x-template" id="tmpl-bricks-element-xproslidercontrol">
			
			<component
				class="x-slider-control x-slider-control_builder"
				:class="'autoplayProgess' !== settings.controlType ? 'autoplayProgress' : ''" 
				:data-x-slider-control="'counter' !== settings.controlType && 'playPause' !== settings.controlType && 'navArrow' !== settings.controlType && 'autoplayProgress' !== settings.controlType && 'slideContent' !== settings.controlType && 'paginationDots' !== settings.controlType ? 'progressBarClickable' : ''"
				:data-x-autoplay-progress="'autoplayProgress' === settings.controlType ? 'circle' === settings.autoplayProgressType ? 'autoplayProgressCircle' : 'autoplayProgressBar' : ''"
				> 

			<div v-if="'counter' !== settings.controlType && 'playPause' !== settings.controlType && 'navArrow' !== settings.controlType && 'autoplayProgress' !== settings.controlType && 'slideContent' !== settings.controlType && 'paginationDots' !== settings.controlType" class="x-slider_progress" aria-valuemax="3" :data-segmented="settings.progressSegmented ? 'true' : null">
			<div class="x-slider_progress-bar" :class="settings.progressDirection"></div>
			</div>

			<div v-if="'counter' === settings.controlType" class="x-slider_counter">
			<div class="x-slider_counter-index">
			
			<contenteditable
				v-if="settings.indexCurrentText"
				tag="div"
				class="x-slider_counter-index-prefix"
				:name="name"
				placeholder= ""
				controlKey="indexCurrentText"
				toolbar="style align"
				:settings="settings"
			/>
			<div class="x-slider_counter-index-number">X</div>
			<contenteditable
				v-if="settings.indexCurrentTextSuffix"
				tag="div"
				class="x-slider_counter-index-suffix"
				:name="name"
				placeholder= ""
				controlKey="indexCurrentTextSuffix"
				toolbar="style align"
				:settings="settings"
			/>
			</div>
			<contenteditable
				v-if="settings.slideSeperatorText"
				tag="div"
				class="x-slider_counter-seperator"
				:name="name"
				placeholder= ""
				controlKey="slideSeperatorText"
				toolbar="style align"
				:settings="settings"
			/>
			<div v-else class="x-slider_counter-seperator">of</div>
			<div class="x-slider_counter-total">
				<contenteditable
				v-if="settings.slideTotalText"
				tag="div"
				class="x-slider_counter-total-prefix"
				:name="name"
				placeholder= ""
				controlKey="slideTotalText"
				toolbar="style align"
				:settings="settings"
				/>
				<div class="x-slider_counter-total-number">Y</div>
				<contenteditable
				v-if="settings.slideTotalTextSuffix"
				tag="div"
				class="x-slider_counter-total-suffix"
				:name="name"
				placeholder= ""
				controlKey="slideTotalTextSuffix"
				toolbar="style align"
				:settings="settings"
				/>
			</div>
			</div>

			<button 
			v-if="'playPause' === settings.controlType" 
			class="x-splide__toggle splide__toggle"
			@click="is_active = !is_active"
			:class="is_active ? 'is-active' : ''" 
			>
			<span class="x-splide__toggle__play splide__toggle__play">
			<icon-svg v-if="settings.playIcon"
			:iconSettings="settings.playIcon"
			/>
			<svg v-else xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M128 104.3v303.4c0 6.4 6.5 10.4 11.7 7.2l240.5-151.7c5.1-3.2 5.1-11.1 0-14.3L139.7 97.2c-5.2-3.3-11.7.7-11.7 7.1z'/></svg>
			</span>
			<span class="x-splide__toggle__pause splide__toggle__pause">
			<icon-svg v-if="settings.pauseIcon"
				:iconSettings="settings.pauseIcon"
			/>
			<svg v-else xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M199.9 416h-63.8c-4.5 0-8.1-3.6-8.1-8V104c0-4.4 3.6-8 8.1-8h63.8c4.5 0 8.1 3.6 8.1 8v304c0 4.4-3.6 8-8.1 8z' fill='currentColor'/><path d='M375.9 416h-63.8c-4.5 0-8.1-3.6-8.1-8V104c0-4.4 3.6-8 8.1-8h63.8c4.5 0 8.1 3.6 8.1 8v304c0 4.4-3.6 8-8.1 8z'/></svg>
			</span>
			</button>  

			<button 
			v-if="'navArrow' === settings.controlType" 
			class="x-slider-control_nav"
			:class="'next' === settings.navType ? 'x-slider-control_nav--next' : 'x-slider-control_nav--prev'" 
			>
			<span v-if="'nest' !== settings.buttonType" class="x-slider-control_nav-arrow">
				<icon-svg 
				v-if="'next' !== settings.navType && settings.prevIcon" 
				:iconSettings="settings.prevIcon" /
			>
			<svg class="x-slider-control_nav-arrow-default" v-else-if="'next' !== settings.navType && !settings.prevIcon" 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>
			<icon-svg 
				v-else-if="'next' === settings.navType && settings.nextIcon" 
				:iconSettings="settings.nextIcon" />
			<svg class="x-slider-control_nav-arrow-default" v-else-if="'next' === settings.navType && !settings.nestIcon" 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>
			</span>

			<bricks-element-children v-if="'nest' === settings.buttonType" :element="element" />
			</button>  

			<div 
				v-if="'autoplayProgress' === settings.controlType && 'circle' === settings.autoplayProgressType"
			class="x-slider-control_autoplay_container"
			>
			<svg v-if="'autoplayProgress' === settings.controlType && 'circle' === settings.autoplayProgressType" class="x-slider-control_autoplay_circle_bg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><circle cx="250" cy="250" r="245" style="opacity: 1; stroke-dashoffset: 0; stroke-dasharray: 1571.8px, 1581.8px;"></circle></svg>
			<svg v-if="'autoplayProgress' === settings.controlType && 'circle' === settings.autoplayProgressType" class="x-slider-control_autoplay_circle" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><circle cx="250" cy="250" r="245" style="opacity: 1; stroke-dashoffset: 1174.617!important; stroke-dasharray: 1571.8px, 1581.8px;"></circle></svg> 
			<div v-if="'autoplayProgress' === settings.controlType && 'circle' === settings.autoplayProgressType" class=x-slider-control_autoplay_inner>
			<bricks-element-children v-if="'autoplayProgress' === settings.controlType && 'circle' === settings.autoplayProgressType" :element="element" />
			</div>
			</div> 
		  
			<div 
				v-if="'autoplayProgress' === settings.controlType && 'circle' !== settings.autoplayProgressType"
			class="x-slider-control_autoplay_progress"
			:data-segmented="settings.autoplayProgressSegmented ? 'true' : null"
			>
			<div 
			v-if="'autoplayProgress' === settings.controlType && 'circle' !== settings.autoplayProgressType"
			class="x-slider-control_autoplay_progress-bar"
			style="transform: scaleX(0.33333333333);"
			>
			</div>
			</div>

			<div 
				v-if="'slideContent' === settings.controlType"
			class="x-slider-control_content"
			> Content here
			</div>

			<ul v-if="'paginationDots' === settings.controlType" class="x-slider-control_pagination">
				<li><button class="splide__pagination__page is-active" type="button"></button></li>
				<li><button class="splide__pagination__page" type="button"></button></li>
				<li><button class="splide__pagination__page" type="button"></button></li>
			</ul>

			</component>      

		</script>

			<?php
		}
	}
}