<?php
/**
 * Dynamic Lightbox element.
 *
 * @package BricksExtras
 */

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

use BricksExtras\Helpers;

/**
 * Dynamic Lightbox element class.
 */
class X_Dynamic_Lightbox extends \Bricks\Element {

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

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

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-layout-media-center-alt';

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

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

	/**
	 * Script localized flag.
	 *
	 * @var bool
	 */
	private static $script_localized = false;

	/**
	 * Get element label.
	 *
	 * @return string
	 */
	public function get_label() {
		return esc_html__( 'Dynamic lightbox', 'bricksextras' );
	}

	/**
	 * Get nestable item.
	 *
	 * @return string
	 */
	public function get_nestable_item() {
		return esc_html__( 'Dynamic lightbox', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 *
	 * @return array
	 */
	public function get_keywords() {
		return array( 'dynamic lightbox', 'lightbox' );
	}

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

		$this->control_groups['grouping'] = array(
			'title'    => esc_html__( 'Grouping', 'bricksextras' ),
			'tab'      => 'content',
			'required' => array( 'lightboxContent', '!=', array( 'calendar' ) ),
		);

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

		$this->control_groups['styling'] = array(
			'title' => esc_html__( 'Styling UI', 'bricksextras' ),
			'tab'   => 'content',
		);

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

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

		$this->control_groups['captions'] = array(
			'title'    => esc_html__( 'Captions', 'bricksextras' ),
			'tab'      => 'content',
			'required' => array( 'lightboxContent', '!=', array( 'inline', 'iframe' ) ),
		);
	}


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

		$this->controls['builderHidden'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Hide in builder', 'bricksextras' ),
			'type'   => 'checkbox',
		);

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

		$this->controls['lightboxContent'] = array(
			'tab'       => 'content',
			'label'     => esc_html__( 'Content', 'bricks' ),
			'type'      => 'select',
			'options'   => array(
				'inline'  => esc_html__( 'Add elements', 'bricks' ),
				'iframe'  => 'iFrame',
				'gallery' => esc_html__( 'Gallery', 'bricks' ),
				'manual'  => esc_html__( 'Custom ', 'bricks' ) . ' (' . esc_html__( 'Links', 'bricks' ) . ')',
			),
			'inline'    => true,
			'default'   => 'inline',
			'clearable' => false,
		);

		$this->controls['gallerySep'] = array(
			'tab'         => 'content',
			'type'        => 'separator',
			'required'    => array( 'lightboxContent', '=', array( 'gallery' ) ),
			'description' => esc_html__( 'Image gallery', 'bricks' ),
		);

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

		$this->controls['linkSelector'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'Link', 'bricks' ) . ')',
			'type'           => 'text',
			'inline'         => true,
			'placeholder'    => '',
			'required'       => array( 'lightboxContent', '=', array( 'manual', 'inline' ) ),
			'hasDynamicData' => false,
		);

		$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( 'lightboxContent', '=', array( 'manual', 'inline' ) ),
		);

		$this->controls['contentSource'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Source', 'bricks' ),
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => '/',
			'required'    => array( 'lightboxContent', '=', array( 'iframe' ) ),
		);

		$this->controls['contentSelector'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Selector', 'bricks' ) . ' (' . esc_html__( 'iFrame', 'bricks' ) . ')',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => '',
			'description' => esc_html__( 'If the iFrame source is a page on your site, you can limit the iFrame content to one individual selector', 'bricksextras' ),
			'required'    => array( 'lightboxContent', '=', array( 'iframe' ) ),
		);

		/* content */

		$this->controls['lightboxContentSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Content', 'bricks' ),
		);

		$this->controls['lightboxContentHeight'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Height', 'bricks' ),
			'small'  => true,
			'inline' => true,
			'type'   => 'number',
			'units'  => true,
		);

		$this->controls['lightboxContentMaxHeight'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Max. height', 'bricks' ),
			'small'       => true,
			'inline'      => true,
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'selector'  => '',
					'property'  => '--x-lightbox-maxheight',
					'important' => true,
				),
			),
			'placeholder' => '100vh',
		);

		$this->controls['lightboxContentWidth'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Width', 'bricks' ),
			'small'  => true,
			'inline' => true,
			'type'   => 'number',
			'units'  => true,
			'css'    => array(
				array(
					'selector'  => '.gslide-inline',
					'property'  => 'width',
					'important' => true,
				),
				array(
					'selector'  => '.ginner-container',
					'property'  => 'max-width',
					'important' => true,
				),
			),
		);

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

		$this->controls['autoplayVideos'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Autoplay video', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'lightboxContent', '=', 'manual' ),
		);

		$this->controls['videosWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Max. width', 'bricks' ) . ' (' . esc_html__( 'Video', 'bricks' ) . ')',
			'type'        => 'number',
			'placeholder' => '960px',
			'units'       => true,
			'required'    => array( 'lightboxContent', '=', 'manual' ),
		);

		$this->controls['videosUIcolor'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Video', 'bricks' ) . ')',
			'type'        => 'color',
			'placeholder' => '',
			'required'    => array( 'lightboxContent', '=', 'manual' ),
			'css'         => array(
				array(
					'selector' => '',
					'property' => '--plyr-color-main',
				),
			),
		);

		$this->controls['imagesWidth'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Max. width', 'bricks' ) . ' (' . esc_html__( 'Images', 'bricks' ) . ' / ' . esc_html__( 'Galleries', 'bricks' ) . ')',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'selector'  => '.gslide-image > img',
					'property'  => 'width',
					'important' => true,
				),
				array(
					'selector'  => '.x_lightbox_dummy_content_gallery',
					'property'  => 'width',
					'important' => true,
				),
			),
		);

		/* backdrop */

		$this->controls['backdrop_color_sep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Backdrop', 'bricksextras' ),
		);

		$this->controls['backdrop_color'] = array(
			'tab'    => 'content',
			'label'  => esc_html__( 'Background color', 'bricks' ),
			'type'   => 'color',
			'inline' => true,
			'css'    => array(
				array(
					'property' => 'background-color',
					'selector' => '.goverlay',
				),
			),
		);

		/* grouping */

		$this->controls['maybeGrouping'] = array(
			'tab'    => 'content',
			'group'  => 'grouping',
			'inline' => true,
			'small'  => true,
			'label'  => esc_html__( 'Grouping', 'bricksextras' ),
			'type'   => 'checkbox',
		);

		$this->controls['maybeLoop'] = array(
			'tab'      => 'content',
			'group'    => 'grouping',
			'inline'   => true,
			'small'    => true,
			'label'    => esc_html__( 'Loop', 'bricks' ),
			'type'     => 'checkbox',
			'required' => array( 'maybeGrouping', '=', true ),
		);

		$this->controls['draggable'] = array(
			'tab'      => 'content',
			'group'    => 'grouping',
			'inline'   => true,
			'small'    => true,
			'label'    => esc_html__( 'Draggable', 'bricks' ),
			'type'     => 'checkbox',
			'required' => array( 'maybeGrouping', '=', true ),
		);

		$this->controls['slideEffect'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Effect', 'bricks' ),
			'type'        => 'select',
			'group'       => 'grouping',
			'options'     => array(
				'slide' => esc_html__( 'Slide', 'bricks' ),
				'fade'  => esc_html__( 'Fade', 'bricks' ),
				'none'  => esc_html__( 'None', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Slide', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'maybeGrouping', '=', true ),
		);

		$this->controls['groupingScope'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Grouping Scope', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'grouping',
			'options'     => array(
				'global'    => esc_html__( 'Default', 'bricks' ),
				'component' => esc_html__( 'Component', 'bricks' ),
				'queryloop' => esc_html__( 'Query loop', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Default', 'bricks' ),
			'default'     => 'queryloop',
			'required'    => array( 'maybeGrouping', '=', true ),
		);

		/* config */

		$this->controls['closeOnOutsideClick'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Click backdrop to close', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
			'clearable'   => false,
		);

		$this->controls['keyboardNavigation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Keyboard Navigation', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
			'clearable'   => false,
		);

		$this->controls['hashToClose'] = array(
			'tab'         => 'content',
			'group'       => 'config',
			'label'       => esc_html__( 'Hash link to close', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);

		$this->controls['returnFocus'] = array(
			'tab'         => 'content',
			'group'       => 'config',
			'label'       => esc_html__( 'Return focus to trigger on close', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		$this->controls['allowID'] = array(
			'tab'         => 'content',
			'group'       => 'config',
			'label'       => esc_html__( 'Allow ID styling to be added', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		$this->controls['closeButton'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Close button', 'bricks' ),
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
			'clearable'   => false,
		);

		$this->controls['lazyDOMLoading'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Lazy loading', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'true'  => esc_html__( 'Enable', 'bricks' ),
				'false' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
			'required'    => array( 'lightboxContent', '=', array( 'inline' ) ),
		);

		$this->controls['configSep'] = array(
			'tab'         => 'content',
			'group'       => 'config',
			'type'        => 'sep',
			'description' => esc_html__( 'To add a custom close button inside the lightbox content, add the attribute name "data-x-lightbox-close" to your chosen element.', 'bricksextras' ),
		);

		/* inner layout */

		$inner_content = '.x-dynamic-lightbox_content';

		// Display.

		$this->controls['_flexWrap'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Flex wrap', 'bricks' ),
			'group'       => 'inner_layout',
			'tooltip'     => array(
				'content'  => 'flex-wrap',
				'position' => 'top-left',
			),
			'type'        => 'select',
			'options'     => array(
				'nowrap'       => esc_html__( 'No wrap', 'bricks' ),
				'wrap'         => esc_html__( 'Wrap', 'bricks' ),
				'wrap-reverse' => esc_html__( 'Wrap reverse', 'bricks' ),
			),
			'inline'      => true,
			'css'         => array(
				array(
					'property' => 'flex-wrap',
					'selector' => $inner_content,
				),
			),
			'placeholder' => esc_html__( 'No wrap', 'bricks' ),
		);

		$this->controls['_direction'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Direction', 'bricks' ),
			'group'    => 'inner_layout',
			'tooltip'  => array(
				'content'  => 'flex-direction',
				'position' => 'top-left',
			),
			'type'     => 'direction',
			'css'      => array(
				array(
					'property' => 'flex-direction',
					'selector' => $inner_content,
				),
			),
			'inline'   => true,
			'rerender' => true,
		);

		$this->controls['_justifyContent'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align main axis', 'bricks' ),
			'group'   => 'inner_layout',
			'tooltip' => array(
				'content'  => 'justify-content',
				'position' => 'top-left',
			),
			'type'    => 'justify-content',
			'css'     => array(
				array(
					'property' => 'justify-content',
					'selector' => $inner_content,
				),
			),
		);

		$this->controls['_alignItems'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align cross axis', 'bricks' ),
			'group'   => 'inner_layout',
			'tooltip' => array(
				'content'  => 'align-items',
				'position' => 'top-left',
			),
			'type'    => 'align-items',
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => $inner_content,
				),
			),
		);

		$this->controls['_columnGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Column gap', 'bricks' ),
			'group' => 'inner_layout',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'column-gap',
					'selector' => $inner_content,
				),
			),
		);

		$this->controls['_rowGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Row gap', 'bricks' ),
			'group' => 'inner_layout',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'row-gap',
					'selector' => $inner_content,
				),
			),
		);

		$this->controls['content_padding'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Content padding', 'bricks' ),
			'type'        => 'spacing',
			'group'       => 'inner_layout',
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => '.gslide-inline .ginlined-content',
				),
			),
			'placeholder' => array(
				'top'    => '40px',
				'right'  => '40px',
				'bottom' => '40px',
				'left'   => '40px',
			),
		);

		$this->controls['slide_padding'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Padding', 'bricks' ) . ' (' . esc_html__( 'Slide', 'bricks' ) . ')',
			'type'    => 'spacing',
			'tooltip' => array(
				'content'  => 'To move the content away from the edges of the viewport',
				'position' => 'top-left',
			),
			'group'   => 'inner_layout',
			'css'     => array(
				array(
					'property' => 'padding',
					'selector' => '.gslide-inner-content',
				),
			),
		);

		$this->controls['contentBackground'] = array(
			'tab'      => 'content',
			'group'    => 'inner_layout',
			'type'     => 'background',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'background',
					'selector' => '.gslide-inline',
				),
			),
			'required' => array( 'lightboxContent', '=', array( 'inline' ) ),
		);

		$this->controls['contentBorder'] = array(
			'tab'   => 'content',
			'group' => 'inner_layout',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => '.ginner-container .gslide-inline',
				),
				array(
					'property' => 'border',
					'selector' => '.ginner-container .gslide-external',
				),
			),
		);

		$this->controls['contentOverflow'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Overflow', 'bricks' ),
			'type'        => 'select',
			'group'       => 'inner_layout',
			'options'     => array(
				'hidden' => esc_html__( 'Hidden', 'bricks' ),
				'Auto'   => esc_html__( 'Auto', 'bricks' ),
			),
			'css'         => array(
				array(
					'property' => 'overflow',
					'selector' => '.ginner-container',
				),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Auto', 'bricks' ),
		);

		/* styling ui */

		$this->controls['closeButtonSep'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'type'     => 'separator',
			'label'    => esc_html__( 'Close button', 'bricks' ),
			'required' => array( 'closeButton', '!=', 'false' ),
		);

		$button_selector = '.gcontainer .gclose';

		$this->controls['closeColor'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => $button_selector . ' path',
				),
			),
			'required' => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $button_selector,
				),
			),
			'required' => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'group'    => 'styling',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $button_selector,
				),
			),
			'required' => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'group'    => 'styling',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $button_selector,
				),
			),
			'required' => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeHeight'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '35', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => $button_selector,
				),
			),
			'required'    => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeWidth'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Button width', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '35', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => $button_selector,
				),
			),
			'required'    => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeiconSize'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '18', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => $button_selector . ' svg',
				),
			),
			'required'    => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['closeMargin'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Margin', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => $button_selector,
				),
			),
			'placeholder' => array(
				'top'    => '20px',
				'right'  => '20px',
				'bottom' => '20px',
				'left'   => '20px',
			),
			'required'    => array( 'closeButton', '!=', 'false' ),
		);

		$this->controls['navSep'] = array(
			'tab'      => 'content',
			'group'    => 'styling',
			'type'     => 'separator',
			'label'    => esc_html__( 'Arrows', 'bricks' ),
			'required' => array( 'maybeGrouping', '=', true ),
		);

		$nav_selector      = '.gcontainer .gbtn:not(.gclose)';
		$nav_prev_selector = '.gcontainer .gbtn.gprev';
		$nav_next_selector = '.gcontainer .gbtn.gnext';

		$this->controls['navHide'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Disable', 'bricks' ),
			'type'  => 'checkbox',
		);

		$this->controls['navColor'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => $nav_selector . ' path',
				),
			),
		);

		$this->controls['navBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Background color', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $nav_selector,
				),
			),
		);

		$this->controls['navBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'group' => 'styling',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $nav_selector,
				),
			),
		);

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

		$this->controls['navHeight'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Height', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '50', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'height',
					'selector' => $nav_selector,
				),
			),
		);

		$this->controls['navWidth'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Button width', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '40', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => $nav_selector,
				),
			),
		);

		$this->controls['naviconSize'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'type'        => 'number',
			'placeholder' => esc_html__( '25', 'bricks' ),
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => $nav_selector . ' svg',
				),
			),
		);

		$this->controls['navPrevMarginSeparator'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Previous', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['navPrevMargin'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Margin', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => $nav_prev_selector,
				),
			),
			'placeholder' => array(
				'top'    => '0',
				'right'  => '0',
				'bottom' => '0',
				'left'   => '20px',
			),
		);

		$this->controls['navNextMarginSeparator'] = array(
			'tab'   => 'content',
			'group' => 'styling',
			'label' => esc_html__( 'Next', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['navNextMargin'] = array(
			'tab'         => 'content',
			'group'       => 'styling',
			'label'       => esc_html__( 'Margin', 'bricks' ),
			'type'        => 'spacing',
			'css'         => array(
				array(
					'property' => 'margin',
					'selector' => $nav_next_selector,
				),
			),
			'placeholder' => array(
				'top'    => '0',
				'right'  => '20px',
				'bottom' => '0',
				'left'   => '0',
			),
		);

		/* captions */

		$captions_selector = '.gdesc-inner';

		$this->controls['maybeCaptions'] = array(
			'tab'    => 'content',
			'inline' => true,
			'small'  => true,
			'group'  => 'captions',
			'label'  => esc_html__( 'Enable', 'bricks' ),
			'type'   => 'checkbox',
		);

		$this->controls['captionPosition'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Position', 'bricks' ),
			'group'       => 'captions',
			'type'        => 'select',
			'options'     => array(
				'captionsBottomViewport' => esc_html__( 'Bottom of viewport', 'bricksextras' ),
				'captionsUnderContent'   => esc_html__( 'Under content', 'bricksextras' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Bottom of viewport', 'bricksextras' ),
		);

		$this->controls['moreLength'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Truncate length', 'bricksextras' ),
			'group'       => 'captions',
			'type'        => 'number',
			'inline'      => true,
			'placeholder' => '60',
		);

		$this->controls['moreText'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'More text', 'bricksextras' ),
			'group'       => 'captions',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'See more', 'bricksextras' ),
		);

		$this->controls['captionsTypography'] = array(
			'tab'   => 'content',
			'group' => 'captions',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'type'  => 'typography',
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => '.gdesc-inner .gslide-desc',
				),
			),
		);

		$this->controls['captionsBackground'] = array(
			'tab'   => 'content',
			'group' => 'captions',
			'label' => esc_html__( 'Background', 'bricks' ),
			'type'  => 'color',
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $captions_selector,
				),
			),
		);

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

		/* preview animations */

		$this->controls['preview_animation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Preview', 'bricks' ),
			'description' => esc_html__( 'Set the start / end positions to control the movement as the lightbox is revealed/closed', 'bricksextras' ),
			'group'       => 'animation',
			'type'        => 'select',
			'options'     => array(
				'x-lightbox_preview-start' => esc_html__( 'Start', 'bricks' ),
				'x-lightbox_preview-open'  => esc_html__( 'Open', 'bricks' ),
				'x-lightbox_preview-end'   => esc_html__( 'End', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Open', 'bricks' ),
		);

		$this->controls['start_translate_x'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Translate X', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'units'       => true,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-lightbox-translatex',
					'selector' => '.gcontainer',
				),
			),
			'placeholder' => esc_html__( '0%', 'bricksextras' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-start' ) ),
		);

		$this->controls['start_translate_y'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Translate Y', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'units'       => true,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-lightbox-translatey',
					'selector' => '.gcontainer',
				),
			),
			'placeholder' => esc_html__( '10%', 'bricksextras' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-start' ) ),
		);

		$this->controls['start_scale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'css'         => array(
				array(
					'selector' => '.gcontainer',
					'property' => '--x-lightbox-scale',
				),
			),
			'inline'      => true,
			'units'       => false,
			'placeholder' => esc_html__( '1', 'bricks' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-start' ) ),
		);

		$this->controls['end_translate_x'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Translate X', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'units'       => true,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-lightbox-close-translatex',
					'selector' => '.gcontainer',
				),
			),
			'placeholder' => esc_html__( '0%', 'bricksextras' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-end' ) ),
		);

		$this->controls['end_translate_y'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Translate Y', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'units'       => true,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-lightbox-close-translatey',
					'selector' => '.gcontainer',
				),
			),
			'placeholder' => esc_html__( '-5%', 'bricksextras' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-end' ) ),
		);

		$this->controls['end_scale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Scale', 'bricks' ),
			'type'        => 'number',
			'group'       => 'animation',
			'css'         => array(
				array(
					'selector' => '.gcontainer',
					'property' => '--x-lightbox-close-scale',
				),
			),
			'units'       => false,
			'min'         => 0,
			'max'         => 3,
			'step'        => '0.1',
			'placeholder' => esc_html__( '1', 'bricks' ),
			'required'    => array( 'preview_animation', '=', array( 'x-lightbox_preview-end' ) ),
		);

		$this->controls['reduce_motion'] = array(
			'tab'         => 'content',
			'group'       => 'animation',
			'placeholder' => esc_html__( 'Animation', 'bricks' ),
			'label'       => esc_html__( "If 'Reduce motion' enabled", 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'fade'         => esc_html__( 'Fade', 'bricks' ),
				'animate'      => esc_html__( 'Animation', 'bricks' ),
				'notransition' => esc_html__( 'Disable', 'bricks' ),
			),
		);
	}


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

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'glightbox', BRICKSEXTRAS_URL . 'components/assets/js/glightbox.min.js', array( 'bricks-scripts' ), '3.3.0', true );
		wp_enqueue_script( 'x-dynamic-lightbox', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'dynamiclightbox' ) . '.js', array( 'glightbox' ), \BricksExtras\Plugin::VERSION, true );

		if ( ! self::$script_localized ) {

			wp_localize_script(
				'x-dynamic-lightbox',
				'xDynamicLightbox',
				array(
					'Instances'       => array(),
					'plyrDir'         => BRICKSEXTRAS_URL . 'components/assets/plyr/',
					'ajaxurl'         => admin_url( 'admin-ajax.php' ),
					'bricksextrasURL' => BRICKSEXTRAS_URL,
				)
			);

			self::$script_localized = true;

		}

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

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

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

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

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

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

		if ( ! isset( $items['images'] ) ) {
			$images = ! empty( $items ) ? $items : array();

			unset( $items );

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

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

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

		$settings['imageGallery'] = $items;

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

		return $settings;
	}

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

		$gallery_settings        = $this->get_normalized_image_settings( $this->settings );
		$images                  = ! empty( $gallery_settings['imageGallery']['images'] ) ? $gallery_settings['imageGallery']['images'] : false;
		$size                    = ! empty( $gallery_settings['imageGallery']['size'] ) ? $gallery_settings['imageGallery']['size'] : \BRICKS_DEFAULT_IMAGE_SIZE;
		$lightbox_content_width  = isset( $this->settings['lightboxContentWidth'] ) ? esc_attr( $this->settings['lightboxContentWidth'] ) : false;
		$lightbox_content_height = isset( $this->settings['lightboxContentHeight'] ) ? esc_attr( $this->settings['lightboxContentHeight'] ) : false;
		$lightbox_content        = isset( $this->settings['lightboxContent'] ) ? $this->settings['lightboxContent'] : 'inline';

		$maybe_captions   = isset( $this->settings['maybeCaptions'] );
		$lazy_dom_loading = isset( $this->settings['lazyDOMLoading'] ) ? 'true' === $this->settings['lazyDOMLoading'] : true;

		$allow_id = isset( $this->settings['allowID'] ) ? $this->settings['allowID'] : 'true';

		/* allow to be changed globally via filter */
		$allow_id = apply_filters( 'bricksextras/dynamiclightbox/allow_id_styling', $allow_id );

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

		$lightbox_config = array(
			'contentType'        => $lightbox_content,
			'identifier'         => $identifier,
			'component'          => \BricksExtras\Helpers::is_component_instance( $this->element ),
			'parentComponent'    => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
			'grouping'           => isset( $this->settings['maybeGrouping'] ) ? 'true' : 'false',
			'groupingScope'      => isset( $this->settings['groupingScope'] ) ? $this->settings['groupingScope'] : 'global',
			'linkSelector'       => isset( $this->settings['linkSelector'] ) ? $this->settings['linkSelector'] : 'false',
			'contentSource'      => isset( $this->settings['contentSource'] ) ? bricks_render_dynamic_data( $this->settings['contentSource'] ) : 'false',
			'contentSelector'    => isset( $this->settings['contentSelector'] ) ? bricks_render_dynamic_data( $this->settings['contentSelector'] ) : 'false',
			'keyboardNavigation' => ! isset( $this->settings['keyboardNavigation'] ) ? true : 'false' !== $this->settings['keyboardNavigation'],
			'hashToClose'        => isset( $this->settings['hashToClose'] ) ? $this->settings['hashToClose'] : 'false',
			'componentScope'     => isset( $this->settings['componentScope'] ) ? $this->settings['componentScope'] : 'false',
			'returnFocus'        => isset( $this->settings['returnFocus'] ) ? $this->settings['returnFocus'] : 'true',
			'captionPosition'    => isset( $this->settings['captionPosition'] ) ? $this->settings['captionPosition'] : 'captionsBottomViewport',
			'allowID'            => $allow_id,
			'rawConfig'          => array(
				'loop'                => isset( $this->settings['maybeLoop'] ) ? true : false,
				'draggable'           => isset( $this->settings['draggable'] ) ? true : false,
				'slideEffect'         => isset( $this->settings['slideEffect'] ) ? $this->settings['slideEffect'] : 'slide',
				'closeButton'         => ! isset( $this->settings['closeButton'] ) ? true : 'false' !== $this->settings['closeButton'],
				'closeOnOutsideClick' => ! isset( $this->settings['closeOnOutsideClick'] ) ? true : 'false' !== $this->settings['closeOnOutsideClick'],
			),
		);

		if ( isset( $this->settings['reduce_motion'] ) ) {
			$lightbox_config += array( 'reduceMotion' => $this->settings['reduce_motion'] );
		}

		if ( isset( $this->settings['lightboxContentHeight'] ) ) {
			$lightbox_config += array( 'height' => $lightbox_content_height );
		}

		if ( isset( $this->settings['lightboxContentWidth'] ) ) {
			$lightbox_config += array( 'width' => $lightbox_content_width );
		}

		if ( isset( $this->settings['autoplayVideos'] ) ) {
			$lightbox_config['rawConfig'] += array( 'autoplayVideos' => 'false' !== $this->settings['autoplayVideos'] );
		}

		if ( isset( $this->settings['videosWidth'] ) ) {
			$lightbox_config['rawConfig'] += array( 'videosWidth' => $this->settings['videosWidth'] );
		}

		if ( isset( $this->settings['moreLength'] ) && '' !== $this->settings['moreLength'] ) {
			$lightbox_config['rawConfig'] += array( 'moreLength' => (int) $this->settings['moreLength'] );
		}

		if ( isset( $this->settings['moreText'] ) && '' !== $this->settings['moreText'] ) {
			$lightbox_config['rawConfig'] += array( 'moreText' => sanitize_text_field( bricks_render_dynamic_data( $this->settings['moreText'] ) ) );
		}

		$gallery_images = array();

		if ( $images ) {

			$gallery_images = array_map(
				function( $item ) use ( $size ) {
					if ( isset( $item['id'] ) ) {
						$mime_type = get_post_mime_type( $item['id'] );
						$caption   = wp_kses_post( wp_get_attachment_caption( $item['id'] ) );

						if ( $mime_type && 0 === strpos( $mime_type, 'video/' ) ) {
							return array(
								array( wp_get_attachment_url( $item['id'] ), 800, 600 ),
								$caption,
								'video',
							);
						}

						return array(
							wp_get_attachment_image_src( $item['id'], $size ),
							$caption,
							'image',
						);
					}

					if ( isset( $item['url'] ) ) {
						return array( array( $item['url'], 800, 600 ), '', 'image' );
					}

					return array( false, '', 'image' );
				},
				$images
			);
			
			

			$lightbox_config += array( 'galleryImages' => $gallery_images );
		}

		$count                       = 0;
		$lightbox_content_identifier = '';

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

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

			if ( $query_id ) {

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

				$lightbox_config += array( 'loopIndex' => $loop_index );

				$this->set_attribute( '_root', 'data-x-id', $identifier . '_' . $loop_index );
				$lightbox_content_identifier = 'x-dynamic-lightbox_content-' . $identifier . '-' . $loop_index;

				$count = $loop_index;

			} else {
				$this->set_attribute( '_root', 'data-x-id', $identifier );
				$lightbox_content_identifier = 'x-dynamic-lightbox_content-' . $identifier . '-0';
			}
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element ) ) {
			$lightbox_config += array( 'isLooping' => \BricksExtras\Helpers::get_parent_loop_id( $this->element ) );
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) ) {
			$lightbox_config += array( 'isLoopingComponent' => \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) );
		}

		$this->set_attribute( '_root', 'data-x-lightbox', wp_json_encode( $lightbox_config ) );

		if ( $maybe_captions ) {
			$this->set_attribute( '_root', 'class', 'x-dynamic-lightbox_captions' );
		}

		$content_source = get_permalink();

		if ( 'inline' === $lightbox_content ) {
			$content_source = '#' . $lightbox_content_identifier;
		} elseif ( 'iframe' === $lightbox_content ) {
			$content_source = isset( $this->settings['contentSource'] ) ? esc_attr( bricks_render_dynamic_data( $this->settings['contentSource'] ) ) : '/';
		}

		if ( isset( $this->settings['navHide'] ) ) {
			$this->set_attribute( '_root', 'class', 'x-dynamic-lightbox_nav-hide' );
		}

		$lightbox_content_width = isset( $this->settings['lightboxContentWidth'] ) ? $lightbox_content_width : '600px';

		$output = '';

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

		if ( 'iframe' === $lightbox_content ) {

			// Set up iframe link attributes.
			$this->set_attribute( 'x-dynamic-lightbox_link', 'data-type', 'external' );
			$this->set_attribute( 'x-dynamic-lightbox_link', 'href', esc_url( bricks_render_dynamic_data( $content_source ) ) );
			$this->set_attribute(
				'x-dynamic-lightbox_link',
				'class',
				array(
					'x-dynamic-lightbox_link',
					'x-dynamic-lightbox_link-' . esc_attr( $identifier ),
					'x-dynamic-lightbox_link-' . esc_attr( $identifier ) . '-' . esc_attr( $count ),
				)
			);

			if ( isset( $this->settings['lightboxContentWidth'] ) && $this->settings['lightboxContentWidth'] ) {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-width', esc_attr( $this->settings['lightboxContentWidth'] ) );
			} else {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-width', '600px' );
			}

			if ( isset( $this->settings['lightboxContentHeight'] ) && $this->settings['lightboxContentHeight'] ) {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-height', esc_attr( $this->settings['lightboxContentHeight'] ) );
			}

			$output .= "<a {$this->render_attributes( 'x-dynamic-lightbox_link' )}>";

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

			$output .= '</a>';

		}

		if ( 'gallery' === $lightbox_content ) {

			// Set up gallery button attributes.
			$this->set_attribute( 'x-dynamic-lightbox_link', 'tabindex', '0' );
			$this->set_attribute(
				'x-dynamic-lightbox_link',
				'class',
				array(
					'x-dynamic-lightbox_link',
					'x-dynamic-lightbox_link-' . esc_attr( $identifier ),
					'x-dynamic-lightbox_link-' . esc_attr( $identifier ) . '-' . esc_attr( $count ),
				)
			);
			if ( isset( $this->settings['lightboxContentWidth'] ) && $this->settings['lightboxContentWidth'] ) {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-width', esc_attr( $this->settings['lightboxContentWidth'] ) );
			} else {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-width', '600px' );
			}

			if ( isset( $this->settings['lightboxContentHeight'] ) && $this->settings['lightboxContentHeight'] ) {
				$this->set_attribute( 'x-dynamic-lightbox_link', 'data-height', esc_attr( $this->settings['lightboxContentHeight'] ) );
			}

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

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

			$output .= '</button>';

		}

		if ( 'inline' === $lightbox_content ) {

			// Set up inline content attributes.
			$this->set_attribute( 'x-dynamic-lightbox_content', 'class', 'x-dynamic-lightbox_content' );
			$this->set_attribute( 'x-dynamic-lightbox_content', 'tabindex', '0' );
			$this->set_attribute( 'x-dynamic-lightbox_content', 'id', esc_attr( $lightbox_content_identifier ) );

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

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

				if ( $lazy_dom_loading ) {
					$output .= '<template data-x-dynamic-lightbox-template="' . esc_attr( $lightbox_content_identifier ) . '">';
					$output .= \Bricks\Frontend::render_children( $this );
					$output .= '</template>';
				} else {
					$output .= \Bricks\Frontend::render_children( $this );
				}
			}

			$output .= '</div>';

		}

		$output .= '</div>';

		echo $output;
	}


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

		<script type="text/x-template" id="tmpl-bricks-element-xdynamiclightbox">
			
		<component 
			class="x-dynamic-lightbox"
			:class="[settings.captionPosition ? settings.captionPosition : 'captionsBottomViewport', settings.preview_animation]"
		>
			<bricks-element-children
				v-if="'iframe' === settings.lightboxContent || 'gallery' === settings.lightboxContent"
				:element="element"
			/>
			<div v-show="!settings.builderHidden" class="glightbox-container glightbox-clean" tabindex="-1" role="dialog" aria-hidden="false">
				<div class="gloader visible" style="display: none;"></div>
				<div class="goverlay"></div>
				<div class="gcontainer">
					<div id="glightbox-slider" class="gslider">
						<div class="gslide current loaded">
							<div class="gslide-inner-content">
								<div v-if="'slider' !== settings.lightboxContent" class="ginner-container desc-bottom">
									<div 
									v-if="'iframe' !== settings.lightboxContent && 'manual' !== settings.lightboxContent && 'gallery' !== settings.lightboxContent"
										class="gslide-inline"
										:style="{ height: settings.lightboxContentHeight }"
									>
										<div id="inline-example" class="ginlined-content">
											<div class="x-dynamic-lightbox_content">
												<bricks-element-children
													:element="element"
												/>
											</div>
										</div>
									</div>
									<div v-else class="gslide-media gslide-external">
										<div 
											v-if="'manual' !== settings.lightboxContent && 'gallery' !== settings.lightboxContent" 
											class="x_lightbox_dummy_content"
											:style="{ height: settings.lightboxContentHeight }"
										> <?php echo esc_html__( 'Content will appear here.', 'bricksextras' ); ?>	
										</div>
										<div 
											v-else-if="'gallery' === settings.lightboxContent" 
											class="x_lightbox_dummy_content x_lightbox_dummy_content_gallery"
										> <?php echo esc_html__( 'Images from gallery will appear here. Enable grouping for multiple images.', 'bricksextras' ); ?>	
										</div>
										<div 
											v-else 
											class="x_lightbox_dummy_content"
										> <?php echo esc_html__( 'Content from the link will appear here (images, videos or iFrame)', 'bricksextras' ); ?>
										</div>	
									</div>

									<div 
										v-if="settings.maybeCaptions && ( 'manual' === settings.lightboxContent || 'gallery' === settings.lightboxContent )"
										class="gslide-description description-bottom">
										<div class="gdesc-inner">
											<div class="gslide-desc"><?php echo esc_html__( 'Captions', 'bricksextras' ); ?></div>
										</div>
									</div>

								</div>

							</div>
						</div>
						<button v-if="'false' !== settings.closeButton" class="gclose gbtn" aria-label="Close" data-taborder="3"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><g><path d="M505.943,6.058c-8.077-8.077-21.172-8.077-29.249,0L6.058,476.693c-8.077,8.077-8.077,21.172,0,29.249C10.096,509.982,15.39,512,20.683,512c5.293,0,10.586-2.019,14.625-6.059L505.943,35.306C514.019,27.23,514.019,14.135,505.943,6.058z"></path></g></g><g><g><path d="M505.942,476.694L35.306,6.059c-8.076-8.077-21.172-8.077-29.248,0c-8.077,8.076-8.077,21.171,0,29.248l470.636,470.636c4.038,4.039,9.332,6.058,14.625,6.058c5.293,0,10.587-2.019,14.624-6.057C514.018,497.866,514.018,484.771,505.942,476.694z"></path></g></g></svg></button>
						<button v-if="settings.maybeGrouping && 'calendar' !== settings.lightboxContent && !settings.navHide" class="gprev gbtn" aria-label="Previous" data-taborder="2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"></path></g></svg></button>
						<button v-if="settings.maybeGrouping && 'calendar' !== settings.lightboxContent && !settings.navHide" class="gnext gbtn" aria-label="Next" data-taborder="1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"> <g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z"></path></g></svg></button>
					</div>
				</div>
			</div>
		</component>		

		</script>

		<?php
	}
}