<?php
/**
 * Content Timeline element.
 *
 * @package BricksExtras
 */

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

/**
 * Content Timeline element class.
 */
class X_Content_Timeline extends \Bricks\Element {

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

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

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-list-thumb';

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

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

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Content Timeline', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'content timeline', 'timeline' );
	}

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

		$this->control_groups['addItems'] = array(
			'title' => esc_html__( 'Add Item', 'bricks' ),
		);

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

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

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

		$this->control_groups['metaContent'] = array(
			'title' => esc_html__( 'Meta content', 'bricksextras' ),
		);

		$this->control_groups['line'] = array(
			'title' => esc_html__( 'Line', 'bricksextras' ),
		);

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

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

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

		$this->controls['_children'] = array(
			'type'          => 'repeater',
			'titleProperty' => 'label',
			'items'         => 'children',
			'group'         => 'addItems',
		);

		$this->controls['listTag'] = array(
			'group'          => 'layout',
			'label'          => esc_html__( 'HTML tag', 'bricks' ),
			'type'           => 'text',
			'hasDynamicData' => false,
			'info'           => esc_html__( 'If changing the items to li, set this to ul', 'bricksextras' ),
			'inline'         => true,
			'small'          => true,
			'placeholder'    => 'div',
		);

		/* layout */

		$this->controls['contentWidth'] = array(
			'tab'         => 'content',
			'group'       => 'layout',
			'label'       => esc_html__( 'Content width', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '50%', 'bricksextras' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'flex-basis',
					'selector' => '.x-content-timeline_content',
				),
			),
		);

		$this->controls['metaWidth'] = array(
			'tab'         => 'content',
			'group'       => 'layout',
			'label'       => esc_html__( 'Meta width', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '50%', 'bricksextras' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'flex-basis',
					'selector' => '.x-content-timeline_meta',
				),
			),
		);

		$this->controls['direction'] = array(
			'tab'     => 'content',
			'group'   => 'layout',
			'label'   => esc_html__( 'Flex direction', 'bricks' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'row'         => esc_html__( 'Row', 'bricks' ),
				'row-reverse' => esc_html__( 'Row-reverse', 'bricksextras' ),
			),
			'css'     => array(
				array(
					'property' => 'flex-direction',
					'selector' => '.x-content-timeline_item',
				),
			),
		);

		/* layout */

		$this->controls['metaAlign'] = array(
			'tab'     => 'content',
			'group'   => 'layout',
			'label'   => esc_html__( 'Meta content align', 'bricksextras' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'flex-start' => 'flex-start',
				'flex-end'   => 'flex-end',
			),
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => '.x-content-timeline_meta-inner',
				),
			),
		);

		$this->controls['contentTextAlign'] = array(
			'tab'     => 'content',
			'group'   => 'layout',
			'label'   => esc_html__( 'Content text align', 'bricks' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'left'  => esc_html__( 'Left', 'bricks' ),
				'right' => esc_html__( 'Right', 'bricks' ),
			),
			'css'     => array(
				array(
					'property' => 'text-align',
					'selector' => '.x-content-timeline_content-inner',
				),
			),
		);

		$this->controls['alternatingSep'] = array(
			'tab'   => 'content',
			'group' => 'layout',
			'label' => esc_html__( 'Alternating layout', 'bricksextras' ),
			'type'  => 'separator',
		);

		$this->controls['directionEven'] = array(
			'tab'     => 'content',
			'group'   => 'layout',
			'inline'  => true,
			'label'   => esc_html__( 'Flex direction', 'bricks' ) . ' (' . esc_html__( 'Even', 'bricksextras' ) . ')',
			'type'    => 'select',
			'options' => array(
				'row'         => esc_html__( 'Row', 'bricks' ),
				'row-reverse' => esc_html__( 'Row-reverse', 'bricksextras' ),
			),
			'css'     => array(
				array(
					'property' => 'flex-direction',
					'selector' => '.x-content-timeline_item:nth-child(2n)',
				),
			),
		);

		$this->controls['metaAlignEven'] = array(
			'tab'     => 'content',
			'group'   => 'layout',
			'inline'  => true,
			'label'   => esc_html__( 'Meta content align', 'bricksextras' ) . ' (' . esc_html__( 'Even', 'bricksextras' ) . ')',
			'type'    => 'select',
			'options' => array(
				'flex-start' => 'flex-start',
				'flex-end'   => 'flex-end',
			),
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => '.x-content-timeline_item:nth-child(2n) .x-content-timeline_meta-inner',
				),
			),
		);

		$this->controls['contentTextAlignEven'] = array(
			'tab'     => 'content',
			'inline'  => true,
			'group'   => 'layout',
			'label'   => esc_html__( 'Content text align', 'bricks' ) . ' (' . esc_html__( 'Even', 'bricksextras' ) . ')',
			'type'    => 'select',
			'options' => array(
				'left'  => esc_html__( 'Left', 'bricks' ),
				'right' => esc_html__( 'Right', 'bricks' ),
			),
			'css'     => array(
				array(
					'property' => 'text-align',
					'selector' => '.x-content-timeline_item:nth-child(2n) .x-content-timeline_content-inner',
				),
			),
		);

		/* markers*/

		$this->controls['markerMargin'] = array(
			'tab'   => 'content',
			'group' => 'markers',
			'label' => esc_html__( 'Margin', 'bricks' ),
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'margin',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerHeight'] = array(
			'tab'         => 'content',
			'group'       => 'markers',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'placeholder' => '40px',
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerWidth'] = array(
			'tab'         => 'content',
			'group'       => 'markers',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'type'        => 'number',
			'placeholder' => '40px',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerBackground'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Background', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-marker-bg',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerColor'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-marker-color',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerBorder'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Border', 'bricks' ),
			'type'   => 'border',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markersActiveSep'] = array(
			'tab'   => 'content',
			'group' => 'markers',
			'label' => esc_html__( 'Active styles', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['markerBackgroundActive'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-marker-bg-active',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerColorActive'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-marker-color-active',
					'selector' => '.x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerBorderActive'] = array(
			'tab'    => 'content',
			'group'  => 'markers',
			'label'  => esc_html__( 'Border', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'border',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => '.x-content-timeline_active .x-content-timeline_marker-inner',
				),
			),
		);

		$this->controls['markerTransformActive'] = array(
			'tab'    => 'style',
			'group'  => 'markers',
			'type'   => 'transform',
			'label'  => esc_html__( 'Transform', 'bricks' ),
			'css'    => array(
				array(
					'selector' => '.x-content-timeline_active .x-content-timeline_marker-inner',
					'property' => 'transform',
				),
			),
			'inline' => true,
			'small'  => true,
		);

		/* line */

		$this->controls['lineWidth'] = array(
			'tab'         => 'content',
			'group'       => 'line',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'type'        => 'number',
			'placeholder' => '2px',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => '.x-content-timeline_marker::before',
				),
				array(
					'property' => 'width',
					'selector' => '.x-content-timeline_line',
				),
				array(
					'property' => '--x-timeline-thickness',
				),
			),
		);

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

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

		/* content */

		$content_selector = '.x-content-timeline_content-inner';

		$this->controls['contentBackground'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Background color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-bg',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentColor'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-color',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentBorder'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Border', 'bricks' ),
			'type'   => 'border',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentBoxShadow'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Box shadow', 'bricks' ),
			'type'   => 'box-shadow',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'box-shadow',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentOpacity'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Opacity', 'bricks' ),
			'type'   => 'number',
			'units'  => false,
			'step'   => 0.1,
			'min'    => 0,
			'max'    => 1,
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-opacity',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentPadding'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'group'       => 'content',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => $content_selector,
				),
			),
			'placeholder' => array(
				'top'    => '3rem',
				'right'  => '3rem',
				'bottom' => '3rem',
				'left'   => '3rem',
			),
		);

		$this->controls['contentActiveSep'] = array(
			'tab'   => 'content',
			'group' => 'content',
			'label' => esc_html__( 'Active styles', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['contentBackgroundActive'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Background color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-bg-active',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentColorActive'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-color-active',
					'selector' => $content_selector,
				),
			),
		);

		$this->controls['contentOpacityActive'] = array(
			'tab'    => 'content',
			'group'  => 'content',
			'label'  => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'number',
			'units'  => false,
			'step'   => 0.1,
			'min'    => 0,
			'max'    => 1,
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-content-opacity-active',
					'selector' => $content_selector,
				),
			),
		);

		/* meta content */

		$meta_content_selector = '.x-content-timeline_meta-inner';

		$this->controls['metacontentBackground'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Background color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-bg',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentColor'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-color',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentBorder'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Border', 'bricks' ),
			'type'   => 'border',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'border',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentBoxShadow'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Box shadow', 'bricks' ),
			'type'   => 'box-shadow',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'box-shadow',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentOpacity'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Opacity', 'bricks' ),
			'type'   => 'number',
			'units'  => false,
			'step'   => 0.1,
			'min'    => 0,
			'max'    => 1,
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-opacity',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'type'  => 'spacing',
			'group' => 'metaContent',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metaDisplay'] = array(
			'tab'     => 'content',
			'inline'  => true,
			'group'   => 'metaContent',
			'label'   => esc_html__( 'Display', 'bricks' ),
			'type'    => 'select',
			'options' => array(
				'block' => esc_html__( 'Block', 'bricks' ),
				'none'  => esc_html__( 'None', 'bricks' ),
			),
			'css'     => array(
				array(
					'property' => 'display',
					'selector' => '.x-content-timeline_meta',
				),
			),
		);

		$this->controls['metacontentActiveSep'] = array(
			'tab'   => 'content',
			'group' => 'metaContent',
			'label' => esc_html__( 'Active styles', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['metacontentBackgroundActive'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Background color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-bg-active',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentColorActive'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-color-active',
					'selector' => $meta_content_selector,
				),
			),
		);

		$this->controls['metacontentOpacityActive'] = array(
			'tab'    => 'content',
			'group'  => 'metaContent',
			'label'  => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'   => 'number',
			'units'  => false,
			'step'   => 0.1,
			'min'    => 0,
			'max'    => 1,
			'inline' => true,
			'css'    => array(
				array(
					'property' => '--x-timeline-meta-opacity-active',
					'selector' => $meta_content_selector,
				),
			),
		);

		/* scroll/active styles */

		$this->controls['scrollEffects'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Active styles', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
			'group'       => 'scroll',
		);

		/* horizontal */

		$this->controls['horizontal'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Support horizontal for slider', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
			'group'       => 'slider',
		);

		$this->controls['horizontalDirection'] = array(
			'tab'         => 'content',
			'group'       => 'slider',
			'label'       => esc_html__( 'Flex direction', 'bricks' ),
			'inline'      => 'true',
			'placeholder' => 'column',
			'type'        => 'select',
			'options'     => array(
				'column'         => 'column',
				'column-reverse' => 'column-reverse',
			),
			'css'         => array(
				array(
					'property' => 'flex-direction',
					'selector' => '.x-content-timeline_list[data-x-horizontal="true"] .x-content-timeline_item',
				),
			),
		);
	}

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

		return array(
			'name'     => 'div',
			'label'    => esc_html__( 'Timeline Item', 'bricksextras' ),
			'settings' => array(
				'_hidden' => array(
					'_cssClasses' => 'x-content-timeline_item',
				),
			),
			'children' => array(
				array(
					'name'      => 'div',
					'label'     => esc_html__( 'Content', 'bricks' ) . ' (' . esc_html__( 'Structure', 'bricks' ) . ')',
					'deletable' => false,
					'settings'  => array(
						'_hidden' => array(
							'_cssClasses' => 'x-content-timeline_content',
						),
					),
					'children'  => array(
						array(
							'name'     => 'div',
							'label'    => esc_html__( 'Content inner', 'bricksextras' ),
							'settings' => array(
								'_hidden' => array(
									'_cssClasses' => 'x-content-timeline_content-inner',
								),
							),
							'children' => array(
								array(
									'name'     => 'heading',
									'label'    => esc_html__( 'Heading', 'bricks' ),
									'settings' => array(
										'text' => esc_html__( 'Content here', 'bricksextras' ),
									),

								),
							),
						),

					),
				),
				array(
					'name'      => 'div',
					'label'     => esc_html__( 'Marker ', 'bricksextras' ) . ' (structure)',
					'deletable' => false,
					'settings'  => array(
						'_hidden' => array(
							'_cssClasses' => 'x-content-timeline_marker',
						),
					),
					'children'  => array(
						array(
							'name'      => 'div',
							'label'     => esc_html__( 'Marker inner', 'bricksextras' ),
							'deletable' => false,
							'settings'  => array(
								'_hidden' => array(
									'_cssClasses' => 'x-content-timeline_marker-inner',
								),
							),
							'children'  => array(
								array(
									'name'     => 'icon',
									'label'    => esc_html__( 'Icon', 'bricks' ),
									'settings' => array(
										'icon'    => array(
											'icon'    => 'ion-ios-calendar',
											'library' => 'ionicons',
										),
										'_hidden' => array(
											'_cssClasses' => 'x-content-timeline_marker-icon',
										),
									),
								),
							),
						),
					),
				),
				array(
					'name'      => 'div',
					'label'     => esc_html__( 'Meta', 'bricks' ) . ' (' . esc_html__( 'Structure', 'bricks' ) . ')',
					'deletable' => false,
					'settings'  => array(
						'_hidden' => array(
							'_cssClasses' => 'x-content-timeline_meta',
						),
					),
					'children'  => array(
						array(
							'name'     => 'div',
							'label'    => esc_html__( 'Meta inner', 'bricksextras' ),
							'settings' => array(
								'_hidden' => array(
									'_cssClasses' => 'x-content-timeline_meta-inner',
								),
							),
							'children' => array(
								array(
									'name'     => 'text-basic',
									'label'    => esc_html__( 'Meta text', 'bricksextras' ),
									'settings' => array(
										'text' => esc_html__( 'Meta content', 'bricksextras' ),
									),
								),
							),
						),
					),
				),

			),
		);
	}

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


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

		if ( bricks_is_builder_main() ) {
			return;
		}
		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-content-timeline', BRICKSEXTRAS_URL . 'components/assets/css/contenttimeline.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

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

		$element = $this->element;

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

		$this->set_attribute( '_root', 'data-x-horizontal', $horizontal );
		$this->set_attribute( '_root', 'data-x-scroll', $scroll_effects );

		$this->set_attribute( 'x-content-timeline_list', 'data-x-horizontal', $horizontal );
		$this->set_attribute( 'x-content-timeline_line', 'class', 'x-content-timeline_line' );
		$this->set_attribute( 'x-content-timeline_line-active', 'class', 'x-content-timeline_line-active' );
		$this->set_attribute( 'x-content-timeline_list', 'class', 'x-content-timeline_list' );

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

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

		$output = '';

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

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

		if ( method_exists( '\Bricks\Frontend', 'render_element' ) ) {

			if ( ! empty( $element['children'] ) && is_array( $element['children'] ) ) {

				foreach ( $element['children'] as $child_id ) {
					if ( ! array_key_exists( $child_id, \Bricks\Frontend::$elements ) ) {
						continue;
					}

					$child = \Bricks\Frontend::$elements[ $child_id ];

					$output .= \Bricks\Frontend::render_element( $child );
				}
			}
		}

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

		$output .= "<div {$this->render_attributes( 'x-content-timeline_line' )}>";
		$output .= "<div {$this->render_attributes( 'x-content-timeline_line-active' )}>";
		$output .= '</div>';
		$output .= '</div>';

		$output .= '</div>';

		echo $output;

		if ( ! bricks_is_builder_main() ) {
			if ( 'true' === $horizontal ) {
				wp_enqueue_script( 'x-content-timeline-horizontal', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'contenttimelinehorizontal' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
			} else {
				wp_enqueue_script( 'x-content-timeline', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'contenttimeline' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
			}
		}
	}

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

		<script type="text/x-template" id="tmpl-bricks-element-xcontenttimeline">
			
	<component 
		class="x-content-timeline"
	>
		<div
		class="x-content-timeline_list"
		:data-x-horizontal="settings.horizontal"
		>
			<bricks-element-children  :element="element"  />
		</div>
	</component>    

		</script>

		<?php
	}
}