<?php
/**
 * Before/After Image element.
 *
 * @package BricksExtras
 */

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

/**
 * Before/After Image element class.
 */
class X_Before_After_Image extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xbeforeafterimage';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-split-v-alt';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xBeforeAfterImage' );

	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;


	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Before / After Image', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'before after image' );
	}

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

		$this->control_groups['control'] = array(
			'title' => esc_html__( 'Slider control', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['icons'] = array(
			'title' => esc_html__( 'Icons', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['labels'] = array(
			'title' => esc_html__( 'Labels', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['imageStyles'] = array(
			'title' => esc_html__( 'CSS filters', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['userInteraction'] = array(
			'title' => esc_html__( 'User Interaction', 'bricksextras' ),
			'tab'   => 'content',
		);
	}

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

		$this->controls['start'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'Start', 'bricks' ) . ')',
			'info'        => '0-100',
			'inline'      => true,
			'small'       => true,
			'type'        => 'number',
			'css'         => array(
				array(
					'selector' => '',
					'property' => '--x-start-position',
				),
			),
			'placeholder' => esc_html__( '50', 'bricks' ),
		);

		$this->controls['direction'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Direction', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'vertical'   => esc_html__( 'Vertical', 'bricks' ),
				'horizontal' => esc_html__( 'Horizontal', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Horizontal', 'bricks' ),
		);

		$this->controls['sliderHeight'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Height', 'bricks' ),
			'inline'  => true,
			'small'   => true,
			'tooltip' => array(
				'content'  => 'Only set if needing to force the height',
				'position' => 'top-left',
			),
			'type'    => 'number',
			'units'   => true,
			'css'     => array(
				array(
					'selector' => '',
					'property' => 'height',
				),
			),
		);

		$this->controls['aspectRatio'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Aspect ratio', 'bricks' ),
			'inline'      => true,
			'small'       => true,
			'type'        => 'number',
			'tooltip'     => array(
				'content'  => "If setting aspect-ratio don't set a height",
				'position' => 'top-left',
			),
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '',
					'property' => 'aspect-ratio',
				),
			),
			'placeholder' => '',
		);

		/* slide control */

		$this->controls['controlAriaLabel'] = array(
			'tab'         => 'content',
			'group'       => 'control',
			'label'       => 'aria-label',
			'type'        => 'text',
			'placeholder' => esc_html__( 'Percentage of image visible', 'bricksextras' ),
		);

		$this->controls['lineSep'] = array(
			'group' => 'control',
			'label' => esc_html__( 'Line', 'bricksextras' ),
			'type'  => 'separator',
		);

		$this->controls['lineThickness'] = array(
			'tab'    => 'content',
			'group'  => 'control',
			'label'  => esc_html__( 'Width', 'bricks' ),
			'inline' => true,
			'small'  => true,
			'type'   => 'number',
			'units'  => true,
			'css'    => array(
				array(
					'selector' => '.x-before-after_slider-line',
					'property' => '--x-before-after-line',
				),
			),
		);

		$this->controls['lineBackground'] = array(
			'tab'    => 'content',
			'group'  => 'control',
			'label'  => esc_html__( 'Color', 'bricks' ),
			'inline' => true,
			'type'   => 'color',
			'css'    => array(
				array(
					'selector' => '.x-before-after_slider-line',
					'property' => 'background-color',
				),
			),
		);

		$this->controls['iconSep'] = array(
			'group' => 'icons',
			'label' => esc_html__( 'Icons', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['iconLeft'] = array(
			'tab'       => 'content',
			'group'     => 'icons',
			'label'     => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Left', 'bricks' ) . ')',
			'type'      => 'icon',
			'default'   => array(
				'library' => 'themify',
				'icon'    => 'ti-angle-left',
			),
			'clearable' => false,
		);

		$this->controls['iconRight'] = array(
			'tab'     => 'content',
			'group'   => 'icons',
			'label'   => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Right', 'bricks' ) . ')',
			'type'    => 'icon',
			'default' => array(
				'library' => 'themify',
				'icon'    => 'ti-angle-right',
			),
		);

		$this->controls['iconSize'] = array(
			'tab'         => 'content',
			'group'       => 'icons',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'font-size',
					'selector' => '.x-before-after_slider-button-icon',
				),
			),
			'placeholder' => '14px',
		);

		$this->controls['iconColor'] = array(
			'tab'   => 'content',
			'group' => 'icons',
			'label' => esc_html__( 'Icon color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => '.x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['iconColorActive'] = array(
			'tab'   => 'content',
			'group' => 'icons',
			'label' => esc_html__( 'Icon color', 'bricks' ) . ' (' . esc_html__( 'Focus', 'bricks' ) . ')',
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => 'input.x-before-after_slider:focus-visible ~ .x-before-after_slider-button .x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['iconMargin'] = array(
			'tab'   => 'content',
			'group' => 'icons',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => '.x-before-after_slider-button-icon > *',
				),
			),
		);

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

		$this->controls['controlThickness'] = array(
			'tab'         => 'content',
			'group'       => 'control',
			'label'       => esc_html__( 'Slide control thickness', 'bricksextras' ),
			'inline'      => true,
			'small'       => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '',
					'property' => '--x-before-after-controlwidth',
				),
			),
			'placeholder' => '40px',
		);

		$this->controls['controlLength'] = array(
			'tab'         => 'content',
			'group'       => 'control',
			'label'       => esc_html__( 'Slide control length', 'bricksextras' ),
			'inline'      => true,
			'small'       => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '',
					'property' => '--x-before-after-controllength',
				),
			),
			'placeholder' => '60px',
		);

		$this->controls['controlBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'control',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['controlBackgroundColorActive'] = array(
			'tab'   => 'content',
			'group' => 'control',
			'label' => esc_html__( 'Background color', 'bricks' ) . ' (' . esc_html__( 'Focus', 'bricks' ) . ')',
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => 'input.x-before-after_slider:focus-visible ~ .x-before-after_slider-button .x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['controlBackgroundColorBlur'] = array(
			'tab'         => 'content',
			'group'       => 'control',
			'label'       => esc_html__( 'Blur', 'bricks' ),
			'type'        => 'number',
			'inline'      => true,
			'units'       => true,
			'placeholder' => '0px',
			'css'         => array(
				array(
					'property' => '--x-before-after-blur',
					'selector' => '.x-before-after_slider-button',
				),
			),
		);

		$this->controls['controlBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'group' => 'control',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['controlBorderFocus'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'focus', 'bricks' ) . ')',
			'group' => 'control',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => 'input.x-before-after_slider:focus-visible ~ .x-before-after_slider-button .x-before-after_slider-button-icon',
				),
			),
		);

		$this->controls['controlBoxShadow'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'group' => 'control',
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-before-after_slider-button-icon',
				),
			),
		);

		/* image styles */

		$this->controls['beforeFilter'] = array(
			'tab'    => 'content',
			'group'  => 'imageStyles',
			'label'  => esc_html__( 'CSS Filters', 'bricks' ) . ' (' . esc_html__( 'Before', 'bricks' ) . ')',
			'type'   => 'filters',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'filter',
					'selector' => '.x-before-after-image_block:first-of-type img',
				),
			),
		);

		$this->controls['afterFilter'] = array(
			'tab'    => 'content',
			'group'  => 'imageStyles',
			'label'  => esc_html__( 'CSS Filters', 'bricks' ) . ' (' . esc_html__( 'After', 'bricks' ) . ')',
			'type'   => 'filters',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'filter',
					'selector' => '.x-before-after-image_block:nth-of-type(2) img',
				),
			),
		);

		/* labels */

		$this->controls['maybeLabels'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Enable', 'bricks' ),
			'type'  => 'checkbox',
			'group' => 'labels',
		);

		$this->controls['beforeText'] = array(
			'tab'      => 'content',
			'group'    => 'labels',
			'label'    => esc_html__( 'Text', 'bricks' ) . ' (' . esc_html__( 'Before', 'bricks' ) . ')',
			'inline'   => true,
			'type'     => 'text',
			'default'  => esc_html__( 'Before', 'bricksextras' ),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['afterText'] = array(
			'tab'      => 'content',
			'group'    => 'labels',
			'label'    => esc_html__( 'Text', 'bricks' ) . ' (' . esc_html__( 'After', 'bricks' ) . ')',
			'inline'   => true,
			'type'     => 'text',
			'default'  => esc_html__( 'After', 'bricksextras' ),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelTypography'] = array(
			'tab'      => 'content',
			'group'    => 'labels',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'required' => array( 'maybeLabels', '=', true ),
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.x-before-after_label',
				),
			),
		);

		$this->controls['labelBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'labels',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'required' => array( 'maybeLabels', '=', true ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-before-after_label',
				),
			),
		);

		$this->controls['labelBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'required' => array( 'maybeLabels', '=', true ),
			'group'    => 'labels',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-before-after_label',
				),
			),
		);

		$this->controls['labelBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'group'    => 'labels',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-before-after_label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelPadding'] = array(
			'tab'      => 'content',
			'group'    => 'labels',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-before-after_label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelBeforePositionSep'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'Before', 'bricks' ) . ')',
			'type'     => 'separator',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelTop'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Top', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'top',
					'selector' => '.x-before-after_before-label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelLeft'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Left', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'left',
					'selector' => '.x-before-after_before-label',
				),
			),
			'default'  => '20px',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelRight'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Right', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'right',
					'selector' => '.x-before-after_before-label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelBottom'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Bottom', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'bottom',
					'selector' => '.x-before-after_before-label',
				),
			),
			'default'  => '20px',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelAfterPositionSep'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Position', 'bricks' ) . ' (' . esc_html__( 'After', 'bricks' ) . ')',
			'type'     => 'separator',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelAfterTop'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Top', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'top',
					'selector' => '.x-before-after_after-label',
				),
			),
			'default'  => '20px',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelAfterLeft'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Left', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'left',
					'selector' => '.x-before-after_after-label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelAfterRight'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Right', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'right',
					'selector' => '.x-before-after_after-label',
				),
			),
			'default'  => '20px',
			'required' => array( 'maybeLabels', '=', true ),
		);

		$this->controls['labelAfterBottom'] = array(
			'group'    => 'labels',
			'label'    => esc_html__( 'Bottom', 'bricks' ),
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'bottom',
					'selector' => '.x-before-after_after-label',
				),
			),
			'required' => array( 'maybeLabels', '=', true ),
		);

		/* user interaction */

		$this->controls['maybeMouseMove'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Enable cursor movement to control slider', 'bricksextras' ),
			'type'  => 'checkbox',
			'group' => 'userInteraction',
		);

		$this->controls['touchSep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'group'       => 'userInteraction',
			'description' => esc_html__( 'The touchable size of the control on touch devices for dragging', 'bricksextras' ),
		);

		$this->controls['touchWidth'] = array(
			'tab'         => 'content',
			'group'       => 'userInteraction',
			'label'       => esc_html__( 'Touch size', 'bricksextras' ),
			'inline'      => true,
			'small'       => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector' => '',
					'property' => '--x-before-after-touchwidth',
				),
			),
			'placeholder' => '60px',
		);

		$this->controls['previewTouch'] = array(
			'tab'   => 'content',
			'group' => 'userInteraction',
			'label' => esc_html__( 'Preview touch area', 'bricksextras' ),
			'type'  => 'checkbox',
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-before-after-image', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'beforeafterimage' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-before-after-image', BRICKSEXTRAS_URL . 'components/assets/css/beforeafterimage.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

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

		// Icon.
		$icon_left  = empty( $this->settings['iconLeft'] ) ? false : self::render_icon( $this->settings['iconLeft'] );
		$icon_right = empty( $this->settings['iconRight'] ) ? false : self::render_icon( $this->settings['iconRight'] );

		$direction = isset( $this->settings['direction'] ) ? esc_attr( $this->settings['direction'] ) : 'horizontal';

		$maybe_labels = isset( $this->settings['maybeLabels'] ) ? $this->settings['maybeLabels'] : false;

		$control_aria_label = isset( $this->settings['controlAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['controlAriaLabel'] ) ) : esc_attr__( 'Percentage of image visible', 'bricksextras' );

		$config = array(
			'direction'      => $direction,
			'maybeMouseMove' => isset( $this->settings['maybeMouseMove'] ) ? $this->settings['maybeMouseMove'] : false,
		);

		$this->set_attribute( '_root', 'class', 'x-before-after' );
		$this->set_attribute( 'x-before-after_container', 'class', 'x-before-after_container' );

		$this->set_attribute( 'x-before-after_slider-container', 'class', 'x-before-after_slider-container' );
		$this->set_attribute( 'x-before-after_slider', 'class', 'x-before-after_slider' );
		$this->set_attribute( 'x-before-after_slider', 'type', 'range' );
		$this->set_attribute( 'x-before-after_slider', 'min', '00' );
		$this->set_attribute( 'x-before-after_slider', 'max', '100' );
		$this->set_attribute( 'x-before-after_slider', 'step', '0.001' );
		$this->set_attribute( 'x-before-after_slider', 'value', '50' );
		$this->set_attribute( 'x-before-after_slider', 'aria-label', $control_aria_label );
		$this->set_attribute( 'x-before-after_slider', 'orient', $direction );

		$this->set_attribute( 'x-before-after_slider-line-before', 'class', array( 'x-before-after_slider-line', 'x-before-after_slider-line-before' ) );
		$this->set_attribute( 'x-before-after_slider-line-before', 'aria-hidden', 'true' );

		$this->set_attribute( 'x-before-after_slider-line-after', 'class', array( 'x-before-after_slider-line', 'x-before-after_slider-line-after' ) );
		$this->set_attribute( 'x-before-after_slider-line-after', 'aria-hidden', 'true' );

		$this->set_attribute( 'x-before-after_slider-button', 'class', 'x-before-after_slider-button' );
		$this->set_attribute( 'x-before-after_slider-button', 'aria-hidden', 'true' );

		$this->set_attribute( 'x-before-after_before-label', 'class', array( 'x-before-after_before-label', 'x-before-after_label' ) );
		$this->set_attribute( 'x-before-after_after-label', 'class', array( 'x-before-after_after-label', 'x-before-after_label' ) );

		$this->set_attribute( 'x-before-after_slider-button-icon', 'class', 'x-before-after_slider-button-icon' );

		$this->set_attribute( '_root', 'data-x-before-after', wp_json_encode( $config ) );

		$output = '';

		$output     .= "<div {$this->render_attributes( '_root' )}>";
		$output     .= "<div {$this->render_attributes( 'x-before-after_container' )}>";
		$output     .= \Bricks\Frontend::render_children( $this );
		$output     .= '</div>';
		$output     .= "<div {$this->render_attributes( 'x-before-after_slider-container' )}>";
		$output     .= "<input {$this->render_attributes( 'x-before-after_slider' )}/>";
		$output     .= '</div>';
		$output     .= "<div {$this->render_attributes( 'x-before-after_slider-line-before' )}></div>";
		$output     .= "<div {$this->render_attributes( 'x-before-after_slider-button' )}>";
			$output .= "<div {$this->render_attributes( 'x-before-after_slider-button-icon' )}> $icon_left $icon_right </div>";
		$output     .= '</div>';
		$output     .= "<div {$this->render_attributes( 'x-before-after_slider-line-after' )}></div>";

		if ( $maybe_labels ) {

			$before_text = isset( $this->settings['beforeText'] ) ? $this->settings['beforeText'] : esc_attr__( 'Before', 'bricksextras' );
			$after_text  = isset( $this->settings['afterText'] ) ? $this->settings['afterText'] : esc_attr__( 'After', 'bricksextras' );

			$output .= "<div {$this->render_attributes( 'x-before-after_before-label' )}>";
			$output .= wp_kses_post( $before_text );
			$output .= '</div>';

			$output .= "<div {$this->render_attributes( 'x-before-after_after-label' )}>";
			$output .= wp_kses_post( $after_text );
			$output .= '</div>';
		}

		$output .= '</div>';

		echo $output;
	}

	/**
	 * Get nestable item.
	 */
	public function get_nestable_item() {

		return array(
			'name'      => 'block',
			'label'     => esc_html__( 'Block', 'bricks' ),
			'deletable' => false,
			'settings'  => array(
				'_hidden' => array(
					'_cssClasses' => 'x-before-after-image_block',
				),
			),
			'children'  => array(
				array(
					'name'     => 'image',
					'label'    => esc_html__( 'Image', 'bricks' ),
					'settings' => array(
						'image'   => array(
							'url' => 'https://images.unsplash.com/photo-1499578124509-1611b77778c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2676&q=80',
						),
						'caption' => 'none',
						'_hidden' => array(
							'_cssClasses' => 'x-before-after-image_image',
						),
					),
				),
			),
		);
	}

	/**
	 * Get nestable children.
	 */
	public function get_nestable_children() {
		return \BricksExtras\Helpers::get_nestable_children_helper( $this, 2 );
	}



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

		<script type="text/x-template" id="tmpl-bricks-element-xbeforeafterimage">

	<component class="x-before-after" :data-x-before-after="settings.direction">
		<div class="x-before-after_container">
			<bricks-element-children  :element="element"  />
		</div>
		<!-- step="10" -->
		<div class="x-before-after_slider-container"  :class="settings.previewTouch ? 'x-before-after_touch-preview' : ''">
		<input
			type="range"
			min="0"
			max="100"
			value="50"
			aria-label="Percentage of before photo shown"
			class="x-before-after_slider"
		/>
		</div>
		<div class="x-before-after_slider-line x-before-after_slider-line-before" aria-hidden="true"></div>
		<div class="x-before-after_slider-button" aria-hidden="true">
			<div class="x-before-after_slider-button-icon">
			<icon-svg v-if="settings.iconLeft" :iconSettings="settings.iconLeft"/>
			<icon-svg v-if="settings.iconRight" :iconSettings="settings.iconRight"/>
			</div>
		</div>
		<div class="x-before-after_slider-line x-before-after_slider-line-after" aria-hidden="true"></div>
		<contenteditable
						tag="div"
						class="x-before-after_label x-before-after_before-label"
						:name="name"
						controlKey="beforeText"
						v-show="settings.maybeLabels"
						toolbar="style align"
						:settings="settings"
					/>
			<contenteditable
						tag="div"
						class="x-before-after_label x-before-after_after-label"
						:name="name"
						controlKey="afterText"
						v-show="settings.maybeLabels"
						toolbar="style align"
						:settings="settings"
					/>
	</component>
		</script>

		<?php
	}
}