<?php
namespace ElementorPro\Modules\VideoPlaylist\Widgets;

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Repeater;
use Elementor\Utils;
use ElementorPro\Base\Base_Widget;
use Elementor\Modules\DynamicTags\Module as TagsModule;
use Elementor\Icons_Manager;
use ElementorPro\Plugin;

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

class Video_Playlist extends Base_Widget {

	public function get_name() {
		return 'video-playlist';
	}

	public function get_title() {
		return esc_html__( 'Video Playlist', 'elementor-pro' );
	}

	public function get_icon() {
		return 'eicon-video-playlist';
	}

	protected function is_dynamic_content(): bool {
		return false;
	}

	public function has_widget_inner_wrapper(): bool {
		return ! Plugin::elementor()->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Get style dependencies.
	 *
	 * Retrieve the list of style dependencies the widget requires.
	 *
	 * @since 3.24.0
	 * @access public
	 *
	 * @return array Widget style dependencies.
	 */
	public function get_style_depends(): array {
		return [ 'widget-video-playlist' ];
	}

	protected function register_controls() {
		$start = is_rtl() ? 'right' : 'left';
		$end = is_rtl() ? 'left' : 'right';

		$this->start_controls_section(
			'section_playlist',
			[
				'label' => esc_html__( 'Playlist', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'tabs_direction',
			[
				'label' => esc_html__( 'Position', 'elementor-pro' ),
				'type' => Controls_Manager::HIDDEN,
				'default' => 'vertical',
				'options' => [
					'horizontal' => esc_html__( 'Horizontal', 'elementor-pro' ),
					'vertical' => esc_html__( 'Vertical', 'elementor-pro' ),
				],
				'prefix_class' => 'e-tabs-view-',
			]
		);

		$this->add_control(
			'playlist_title',
			[
				'label' => esc_html__( 'Playlist Name', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Playlist', 'elementor-pro' ),
				'placeholder' => esc_html__( 'Playlist', 'elementor-pro' ),
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'playlist_title_tag',
			[
				'label' => esc_html__( 'HTML Tag', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'h1' => 'H1',
					'h2' => 'H2',
					'h3' => 'H3',
					'h4' => 'H4',
					'h5' => 'H5',
					'h6' => 'H6',
					'div' => 'div',
					'span' => 'span',
				],
				'default' => 'h2',
				'condition' => [
					'playlist_title!' => '',
				],
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'type',
			[
				'label' => esc_html__( 'Type', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'youtube',
				'options' => [
					'youtube' => esc_html__( 'YouTube', 'elementor-pro' ),
					'vimeo' => esc_html__( 'Vimeo', 'elementor-pro' ),
					'hosted' => esc_html__( 'Self Hosted', 'elementor-pro' ),
					'section' => esc_html__( 'Section', 'elementor-pro' ),
				],
			]
		);

		$repeater->add_control(
			'youtube_url',
			[
				'label' => esc_html__( 'Link', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Paste URL', 'elementor-pro' ) . ' (YouTube)',
				'label_block' => true,
				'condition' => [
					'type' => 'youtube',
				],
			]
		);

		$repeater->add_control(
			'vimeo_url',
			[
				'label' => esc_html__( 'Link', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::URL_CATEGORY,
					],
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ) . ' (Vimeo)',
				'default' => 'https://vimeo.com/235215203',
				'label_block' => true,
				'condition' => [
					'type' => 'vimeo',
				],
			]
		);

		$repeater->add_control(
			'vimeo_fetch_data',
			[
				'type' => Controls_Manager::BUTTON,
				'label_block' => true,
				'text' => esc_html__( 'Get Video Data', 'elementor-pro' ),
				'event' => 'elementorPlaylistWidget:fetchVideoData',
				'condition' => [
					'type' => [ 'youtube', 'vimeo' ],
				],
			]
		);

		$repeater->add_control(
			'is_external_url',
			[
				'label' => esc_html__( 'External URL', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'condition' => [
					'type' => 'hosted',
				],
			]
		);

		$repeater->add_control(
			'hosted_url',
			[
				'label' => esc_html__( 'Choose File', 'elementor-pro' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
					'categories' => [
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'media_types' => [ 'video' ],
				'condition' => [
					'type' => 'hosted',
					'is_external_url' => '',
				],
			]
		);

		$repeater->add_control(
			'external_url',
			[
				'label' => esc_html__( 'URL', 'elementor-pro' ),
				'type' => Controls_Manager::URL,
				'autocomplete' => false,
				'options' => false,
				'label_block' => true,
				'show_label' => false,
				'dynamic' => [
					'active' => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::URL_CATEGORY,
					],
				],
				'media_types' => [ 'video' ],
				'placeholder' => esc_html__( 'Enter your URL', 'elementor-pro' ),
				'condition' => [
					'type' => 'hosted',
					'is_external_url' => 'yes',
				],
			]
		);

		$repeater->add_control(
			'title',
			[
				'label' => esc_html__( 'Title', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'default' => esc_html__( 'Title', 'elementor-pro' ),
				'placeholder' => esc_html__( 'Add Your Text Here', 'elementor-pro' ),
				'label_block' => true,
			]
		);

		$repeater->add_control(
			'section_html_tag',
			[
				'label' => esc_html__( 'Title HTML Tag', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'h1' => 'H1',
					'h2' => 'H2',
					'h3' => 'H3',
					'h4' => 'H4',
					'h5' => 'H5',
					'h6' => 'H6',
					'div' => 'div',
					'span' => 'span',
				],
				'default' => 'h3',
				'condition' => [
					'type' => 'section',
				],
			]
		);

		$repeater->add_control(
			'video_html_tag',
			[
				'label' => esc_html__( 'Title HTML Tag', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'options' => [
					'h1' => 'H1',
					'h2' => 'H2',
					'h3' => 'H3',
					'h4' => 'H4',
					'h5' => 'H5',
					'h6' => 'H6',
					'div' => 'div',
					'span' => 'span',
				],
				'default' => 'h4',
				'condition' => [
					'type!' => 'section',
				],
			]
		);

		$repeater->add_control(
			'duration',
			[
				'label' => esc_html__( 'Duration', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'placeholder' => '1:05',
				'default' => '',
				'ai' => [
					'active' => false,
				],
				'condition' => [
					'type!' => 'section',
				],
			]
		);

		$repeater->add_control(
			'thumbnail',
			[
				'label' => esc_html__( 'Thumbnail', 'elementor-pro' ),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
				],
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'type!' => 'section',
				],
			]
		);

		$repeater->add_control(
			'inner_tab_is_content_visible',
			[
				'label' => esc_html__( 'Contents Tabs ', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'return_value' => 'show',
				'default' => '',
				'condition' => [
					'type' => [ 'youtube', 'hosted', 'vimeo' ],
				],
			]
		);

		$repeater->start_controls_tabs( 'video_tabs' );

		$repeater->start_controls_tab(
			'inner_tab_1',
			[
				'label' => esc_html__( 'Tab #1', 'elementor-pro' ),
				'condition' => [
					'type' => [ 'youtube', 'hosted', 'vimeo' ],
					'inner_tab_is_content_visible' => 'show',
				],
			]
		);

		$repeater->add_control(
			'inner_tab_content_1',
			[
				'label' => '',
				'type' => Controls_Manager::WYSIWYG,
				'default' => '<p>' . esc_html__( 'Add some content for each one of your videos, like a description, transcript or external links.To add, remove or edit tab names, go to Tabs.', 'elementor-pro' ) . '</p>',
				'condition' => [
					'type' => [ 'youtube', 'hosted', 'vimeo' ],
					'inner_tab_is_content_visible' => 'show',
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'inner_tab_2',
			[
				'label' => esc_html__( 'Tab #2', 'elementor-pro' ),
				'condition' => [
					'type' => [ 'youtube', 'hosted', 'vimeo' ],
					'inner_tab_is_content_visible' => 'show',
				],
			]
		);

		$repeater->add_control(
			'inner_tab_content_2',
			[
				'label' => '',
				'type' => Controls_Manager::WYSIWYG,
				'condition' => [
					'type' => [ 'youtube', 'hosted', 'vimeo' ],
					'inner_tab_is_content_visible' => 'show',
				],
			]
		);

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'tabs',
			[
				'label' => esc_html__( 'Playlist Items', 'elementor-pro' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
						'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
						'duration' => '0:16',
						'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
					],
					[
						'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
						'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
						'duration' => '0:16',
						'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
					],
					[
						'title' => esc_html__( 'Sample Video', 'elementor-pro' ),
						'youtube_url' => 'https://www.youtube.com/watch?v=XHOmBV4js_E',
						'duration' => '0:16',
						'thumbnail' => [ 'url' => 'https://img.youtube.com/vi/XHOmBV4js_E/maxresdefault.jpg' ],
					],
				],
				'frontend_available' => true,
				'title_field' => '{{{ title }}}',
				'separator' => 'before',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_inner_tab',
			[
				'label' => esc_html__( 'Tabs', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'inner_tab_title_1',
			[
				'label' => esc_html__( 'Tab 1 Name', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Tab #1', 'elementor-pro' ),
				'dynamic' => [
					'active' => true,
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Name', 'elementor-pro' ),
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'inner_tab_title_2',
			[
				'label' => esc_html__( 'Tab 2 Name', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Tab #2', 'elementor-pro' ),
				'dynamic' => [
					'active' => true,
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Name', 'elementor-pro' ),
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'inner_tab_is_content_collapsible',
			[
				'label' => esc_html__( 'Collapsible', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'return_value' => 'collapsible',
				'default' => '',
				'separator' => 'before',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'inner_tab_label_show_more',
			[
				'label' => esc_html__( 'Read More Label', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Show More', 'elementor-pro' ),
				'default' => esc_html__( 'Show More', 'elementor-pro' ),
				'condition' => [
					'inner_tab_is_content_collapsible' => 'collapsible',
				],
			]
		);

		$this->add_control(
			'inner_tab_label_show_less',
			[
				'label' => esc_html__( 'Read Less Label', 'elementor-pro' ),
				'type' => Controls_Manager::TEXT,
				'dynamic' => [
					'active' => true,
				],
				'ai' => [
					'active' => false,
				],
				'placeholder' => esc_html__( 'Show Less', 'elementor-pro' ),
				'default' => esc_html__( 'Show Less', 'elementor-pro' ),
				'condition' => [
					'inner_tab_is_content_collapsible' => 'collapsible',
				],
			]
		);

		$this->add_responsive_control(
			'inner_tab_collapsible_height',
			[
				'label' => esc_html__( 'Height', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
				'default' => [
					'size' => 54,
				],
				'range' => [
					'px' => [
						'min' => 50,
						'max' => 500,
					],
					'em' => [
						'min' => 5,
						'max' => 50,
					],
					'rem' => [
						'min' => 5,
						'max' => 50,
					],
				],
				'render_type' => 'template',
				'selectors' => [
					'{{WRAPPER}} .e-inner-tabs-content-wrapper .collapsible .e-inner-tab-text' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'inner_tab_is_content_collapsible' => 'collapsible',
				],
				'frontend_available' => true,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_image_overlay',
			[
				'label' => esc_html__( 'Image Overlay', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'show_image_overlay',
			[
				'label' => esc_html__( 'Image Overlay', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'image_overlay',
			[
				'label' => esc_html__( 'Choose Image', 'elementor-pro' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'dynamic' => [
					'active' => true,
				],
				'condition' => [
					'show_image_overlay' => 'yes',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'image_overlay',
				'default' => 'full',
				'condition' => [
					'show_image_overlay' => 'yes',
				],
			]
		);

		$this->add_control(
			'show_play_icon',
			[
				'label' => esc_html__( 'Play Icon', 'elementor-pro' ),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'default' => [
					'value' => 'far fa-play-circle',
					'library' => 'fa-regular',
				],
				'label_block' => false,
				'skin' => 'inline',
				'condition' => [
					'show_image_overlay' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_additional_options',
			[
				'label' => esc_html__( 'Additional Options', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'heading_autoplay',
			[
				'label' => esc_html__( 'Autoplay', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'autoplay_on_load',
			[
				'label' => esc_html__( 'On Load', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'autoplay_next',
			[
				'label' => esc_html__( 'Next Up', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'show_watched_indication',
			[
				'label' => esc_html__( 'Indicate Watched', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'separator' => 'before',
				'frontend_available' => true,
			]
		);

		$this->add_control(
			'show_video_count',
			[
				'label' => esc_html__( 'Video Count', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_duration',
			[
				'label' => esc_html__( 'Duration', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'default' => 'yes',
			]
		);

		$this->add_control(
			'show_thumbnail',
			[
				'label' => esc_html__( 'Thumbnails', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'elementor-pro' ),
				'label_off' => esc_html__( 'Hide', 'elementor-pro' ),
				'default' => 'yes',
			]
		);

		$this->add_control(
			'play_icon',
			[
				'label' => esc_html__( 'Play Icon', 'elementor-pro' ),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'default' => [
					'value' => 'fas fa-play-circle',
					'library' => 'fa-solid',
				],
				'label_block' => false,
				'skin' => 'inline',
			]
		);

		$this->add_control(
			'watched_icon',
			[
				'label' => esc_html__( 'Watched Icon', 'elementor-pro' ),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'default' => [
					'value' => 'fas fa-check-circle',
					'library' => 'fa-solid',
				],
				'label_block' => false,
				'skin' => 'inline',
			]
		);

		$this->add_control(
			'lazy_load',
			[
				'label' => esc_html__( 'Lazy Load', 'elementor-pro' ),
				'type' => Controls_Manager::SWITCHER,
				'separator' => 'before',
				'frontend_available' => true,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_layout',
			[
				'label' => esc_html__( 'Layout', 'elementor-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'tabs_alignment',
			[
				'label' => esc_html__( 'Video Position', 'elementor-pro' ),
				'type' => Controls_Manager::CHOOSE,
				'default' => 'end',
				'options' => [
					'start' => [
						'title' => esc_html__( 'Start', 'elementor-pro' ),
						'icon' => "eicon-h-align-$start",
					],
					'end' => [
						'title' => esc_html__( 'End', 'elementor-pro' ),
						'icon' => "eicon-h-align-$end",
					],
				],
				'prefix_class' => 'elementor-layout-',
			]
		);

		$this->add_responsive_control(
			'layout_height',
			[
				'label' => esc_html__( 'Height', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
				'range' => [
					'px' => [
						'min' => 200,
						'max' => 1200,
					],
					'em' => [
						'min' => 20,
						'max' => 120,
					],
					'rem' => [
						'min' => 20,
						'max' => 120,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-main-area' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_top_bar',
			[
				'label' => esc_html__( 'Top Bar', 'elementor-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'heading_playlist_name',
			[
				'label' => esc_html__( 'Playlist Name', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'playlist_name_background',
			[
				'label' => esc_html__( 'Background', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'playlist_name_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-title' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'playlist_name_typography',
				'selector' => '{{WRAPPER}} .e-tabs-header .e-tabs-title',
			]
		);

		$this->add_control(
			'heading_videos_amount',
			[
				'label' => esc_html__( 'Video Count', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'videos_amount_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-videos-count' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-header-right-side i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-header .e-tabs-header-right-side svg' => 'fill: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'videos_amount_typography',
				'selector' => '{{WRAPPER}} .e-tabs-header .e-tabs-videos-count',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_videos',
			[
				'label' => esc_html__( 'Videos', 'elementor-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'playlist_tabs' );

		$this->start_controls_tab(
			'playlist_tabs_normal',
			[
				'label' => esc_html__( 'Normal', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'heading_tab_normal',
			[
				'label' => esc_html__( 'Item', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'normal_background',
			[
				'label' => esc_html__( 'Background', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items .e-tab-title:not(:where( .e-active ))' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper .shadow-bottom' => 'background: linear-gradient(180deg, transparent 0%, {{VALUE}} 100%)',
					'{{WRAPPER}} .e-tabs-wrapper .e-tabs-items-wrapper .shadow-top' => 'background: linear-gradient(0deg, transparent 0%, {{VALUE}} 100%);',
				],
			]
		);

		$this->add_control(
			'normal_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text a' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'normal_typography',
				'selector' => '{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-title-text',
				'global' => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);

		$this->add_control(
			'heading_duration_normal',
			[
				'label' => esc_html__( 'Duration', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'normal_duration_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items .e-tab-title .e-tab-duration' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'normal_duration_typography',
				'selector' => '{{WRAPPER}} .e-tab-title .e-tab-duration',
			]
		);

		$this->add_control(
			'heading_icon_normal',
			[
				'label' => esc_html__( 'Icon', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'normal_icon_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg' => 'fill: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg path' => 'fill: {{VALUE}};',
				],
			]
		);

		// Default shadow values for the icon.
		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'normal_icon_top_text_shadow',
				'fields_options' => [
					'text_shadow_type' => [
						'label' => _x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ),
					],
					'text_shadow' => [
						'selectors' => [
							'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title i' => 'text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};',
							'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title svg' => 'filter: drop-shadow({{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}});',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'normal_icon_size',
			[
				'label' => esc_html__( 'Size', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 30,
					],
					'em' => [
						'min' => 1,
						'max' => 3,
					],
					'rem' => [
						'min' => 1,
						'max' => 3,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--playlist-item-icon-size: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
			'heading_separator_normal',
			[
				'label' => esc_html__( 'Separator', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'normal_separator_style',
			[
				'label' => esc_html__( 'Style', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					'' => esc_html__( 'None', 'elementor-pro' ),
					'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
					'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
					'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
					'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
					'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'normal_separator_weight',
			[
				'label' => esc_html__( 'Weight', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
				'range' => [
					'px' => [
						'max' => 10,
					],
					'em' => [
						'max' => 1,
					],
					'rem' => [
						'max' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
				],
				'condition' => [
					'normal_separator_style!' => '',
				],
			]
		);

		$this->add_control(
			'normal_separator_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'normal_separator_style!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'playlist_tabs_active',
			[
				'label' => esc_html__( 'Active', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'heading_tab_active',
			[
				'label' => esc_html__( 'Item', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'active_background',
			[
				'label' => esc_html__( 'Background', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover )' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'active_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#556068',
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text a' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'active_typography',
				'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-title-text',
				'global' => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);

		$this->add_control(
			'heading_duration_active',
			[
				'label' => esc_html__( 'Duration', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'active_duration_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-duration' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'active_duration_typography',
				'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) .e-tab-duration',
			]
		);

		$this->add_control(
			'heading_icon_active',
			[
				'label' => esc_html__( 'Icon', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'active_icon_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) i' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) svg' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) svg path' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'active_icon_top_text_shadow',
				'fields_options' => [
					'text_shadow_type' => [
						'label' => _x( 'Shadow', 'Text Shadow Control', 'elementor-pro' ),
					],
				],
				'selector' => '{{WRAPPER}} .e-tab-title:where( .e-active, :hover ) i, {{WRAPPER}} .e-tab-title:where( .e-active, :hover ) svg',
			]
		);

		$this->add_responsive_control(
			'active_icon_size',
			[
				'label' => esc_html__( 'Size', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 30,
					],
					'em' => [
						'min' => 1,
						'max' => 3,
					],
					'rem' => [
						'min' => 1,
						'max' => 3,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) span i' => 'font-size: {{SIZE}}{{UNIT}}',
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title:where( .e-active, :hover ) span svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'heading_separator_active',
			[
				'label' => esc_html__( 'Separator', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'active_separator_style',
			[
				'label' => esc_html__( 'Style', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					'' => esc_html__( 'None', 'elementor-pro' ),
					'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
					'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
					'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
					'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
					'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'active_separator_weight',
			[
				'label' => esc_html__( 'Weight', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
				'range' => [
					'px' => [
						'max' => 10,
					],
					'em' => [
						'max' => 1,
					],
					'rem' => [
						'max' => 1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
				],
				'condition' => [
					'active_separator_style!' => '',
				],
			]
		);

		$this->add_control(
			'active_separator_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-tab-title.e-active' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'active_separator_style!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_sections',
			[
				'label' => esc_html__( 'Sections', 'elementor-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'heading_section',
			[
				'label' => esc_html__( 'Section', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'section_background',
			[
				'label' => esc_html__( 'Background', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'section_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'section_typography',
				'selector' => '{{WRAPPER}} .e-tabs-items-wrapper .e-section-title',
			]
		);

		$this->add_control(
			'section_border_type',
			[
				'label' => esc_html__( 'Border Type', 'elementor-pro' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => [
					'' => esc_html__( 'None', 'elementor-pro' ),
					'solid' => _x( 'Solid', 'Border Control', 'elementor-pro' ),
					'double' => _x( 'Double', 'Border Control', 'elementor-pro' ),
					'dotted' => _x( 'Dotted', 'Border Control', 'elementor-pro' ),
					'dashed' => _x( 'Dashed', 'Border Control', 'elementor-pro' ),
					'groove' => _x( 'Groove', 'Border Control', 'elementor-pro' ),
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'section_border_width',
			[
				'label' => esc_html__( 'Width', 'elementor-pro' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'section_border_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-items-wrapper .e-section-title' => 'border-color: {{VALUE}};',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_inner_tab_style',
			[
				'label' => esc_html__( 'Tabs', 'elementor-pro' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'inner_tab_border_width',
			[
				'label' => esc_html__( 'Border Width', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'range' => [
					'px' => [
						'max' => 20,
					],
					'em' => [
						'max' => 2,
					],
					'rem' => [
						'max' => 2,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper' => '--inner-tabs-border-height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active' => 'border-width: 0 0 {{SIZE}}{{UNIT}} 0;',
				],
			]
		);

		$this->add_control(
			'inner_tab_border_color',
			[
				'label' => esc_html__( 'Border Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper' => '--inner-tabs-border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inner_tab_background_color',
			[
				'label' => esc_html__( 'Background Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-active' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-title' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'heading_inner_tab_title',
			[
				'label' => esc_html__( 'Title', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'inner_tab_title_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'inner_tab_active_title_color',
			[
				'label' => esc_html__( 'Active Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active a' => 'color: {{VALUE}};',
					'{{WRAPPER}} .e-tabs .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title.e-inner-tab-active' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'inner_tab_title_typography',
				'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-wrapper .e-inner-tab-title a',
				'global' => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);

		$this->add_control(
			'heading_inner_tab_content',
			[
				'label' => esc_html__( 'Content', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'inner_tab_content_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content .e-inner-tab-text' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'inner_tab_content_typography',
				'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content .e-inner-tab-text',
				'global' => [
					'default' => Global_Typography::TYPOGRAPHY_TEXT,
				],
			]
		);

		$this->add_responsive_control(
			'inner_tab_content_padding',
			[
				'label' => esc_html__( 'Padding', 'elementor-pro' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'heading_inner_tab_show_more',
			[
				'label' => esc_html__( 'Show More', 'elementor-pro' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->start_controls_tabs( 'inner_tab_show_more_color' );

		$this->start_controls_tab(
			'inner_tab_normal_show_more',
			[
				'label' => esc_html__( 'Normal', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'inner_tab_normal_show_more_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'inner_tab_hover_show_more',
			[
				'label' => esc_html__( 'Hover', 'elementor-pro' ),
			]
		);

		$this->add_control(
			'inner_tab_hover_show_more_color',
			[
				'label' => esc_html__( 'Color', 'elementor-pro' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button:hover' => 'color: {{VALUE}};',
				],
				'global' => [
					'default' => Global_Colors::COLOR_TEXT,
				],
			]
		);

		$this->add_control(
			'inner_tab_hover_show_more_color_transition_duration',
			[
				'label' => esc_html__( 'Transition Duration', 'elementor-pro' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 's', 'ms', 'custom' ],
				'default' => [
					'unit' => 'ms',
				],
				'selectors' => [
					'{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button' => 'transition-duration: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'inner_tab_show_more_typography',
				'selector' => '{{WRAPPER}} .e-tabs-inner-tabs .e-inner-tabs-content-wrapper .e-inner-tab-content button',
				'global' => [
					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
				],
			]
		);

		$this->end_controls_section();
	}

	private function create_playlist_item_tabs_array( $playlist_item, $playlist_item_index, $tab_1_title, $tab_2_title ) {
		$playlist_item_tabs_array = [];
		$is_already_activated_tab = false;

		$playlist_item_tabs_content = [
			$playlist_item['inner_tab_content_1'],
			$playlist_item['inner_tab_content_2'],
		];

		$playlist_item_tabs_title = [
			$tab_1_title,
			$tab_2_title,
		];

		foreach ( $playlist_item_tabs_content as $index => $playlist_item_tab_content ) {
			$playlist_item_tab_content_object = new \stdClass();
			$playlist_item_tab_content_object->tab_title = $playlist_item_tabs_title[ $index ];
			$playlist_item_tab_content_object->tab_content = $playlist_item_tab_content;

			$tab_index = $index + 1;
			$playlist_item_tab_content_object->tab_content_setting_key = $this->get_repeater_setting_key( 'inner_tab_content_' . $tab_index, 'tabs', $playlist_item_index );

			if ( $playlist_item_tab_content ) {
				$playlist_item_tab_content_object->tab_attribute = ! $is_already_activated_tab ? '' : 'hidden';
				$playlist_item_tab_content_object->tab_class = ! $is_already_activated_tab ? 'e-inner-tab-active' : '';
				$is_already_activated_tab = true;
			}

			$playlist_item_tabs_array [] = $playlist_item_tab_content_object;
		}

		return $playlist_item_tabs_array;
	}

	private function create_playlist_item_video_attributes( $index, $id_int, $playlist_item, $video_url = '' ) {
		$html_attributes_object = new \stdClass();
		$tab_count = $index + 1;

		// The first tab will be activated and not hidden like the second tab.
		$hidden = 1 === $tab_count ? false : 'hidden';

		$html_attributes_object->attributes = [
			'id' => 'e-tab-content-' . $id_int . $tab_count,
			'class' => [ 'e-tab-content', 'elementor-clearfix' ],
			'data-tab' => $tab_count,
			'role' => 'tabpanel',
			'aria-labelledby' => 'e-tab-title-' . $id_int . $tab_count,
			'tabindex' => '0',
			'data-video-url' => $video_url,
			'data-video-type' => $playlist_item['type'],
			'data-video-title' => $playlist_item['title'],
			'data-video-duration' => $playlist_item['duration'],
		];

		if ( $hidden ) {
			$html_attributes_object->attributes['hidden'] = $hidden;
		}

		return $html_attributes_object;
	}

	private function create_playlist_item_title_attributes( $index, $id_int ) {
		$html_attributes_object = new \stdClass();
		$tab_count = $index + 1;

		$html_attributes_object->attributes = [
			'id' => 'e-tab-title-' . $id_int . $tab_count,
			'class' => [ 'e-tab-title', 'e-tab-desktop-title' ],
			'aria-selected' => 1 === $tab_count ? 'true' : 'false',
			'data-tab' => $tab_count,
			'role' => 'tab',
			'tabindex' => 1 === $tab_count ? '0' : '-1',
			'aria-controls' => 'e-tab-content-' . $id_int . $tab_count,
		];

		return $html_attributes_object;
	}

	private function create_playlist_items_array( $playlist_items ) {
		$playlist_items_array = [];
		$id_int = substr( $this->get_id_int(), 0, 3 );

		foreach ( $playlist_items as $index => $playlist_item ) {
			$playlist_item_object = new \stdClass();
			$playlist_item_object->video_url = '';
			$playlist_item_object->show_overlay_image = false;
			$playlist_item_object->is_inner_tabs_visible = $playlist_item['inner_tab_is_content_visible'];

			switch ( $playlist_item['type'] ) {
				case 'youtube':
				case 'vimeo':
				case 'hosted':
					$playlist_item_object->type = $playlist_item['type'];
					$playlist_item_object->video_title = $playlist_item['title'];
					$playlist_item_object->video_html_tag = Utils::validate_html_tag( $playlist_item['video_html_tag'] );

					if ( $playlist_item['youtube_url'] && 'youtube' === $playlist_item['type'] ) {
						$playlist_item_object->video_url = $playlist_item['youtube_url'];
					} elseif ( $playlist_item['vimeo_url'] && 'vimeo' === $playlist_item['type'] ) {
						$playlist_item_object->video_url = $playlist_item['vimeo_url'];
					} elseif ( $playlist_item['external_url'] && 'hosted' === $playlist_item['type'] && 'yes' === $playlist_item['is_external_url'] ) {
						$playlist_item_object->video_url = $playlist_item['external_url']['url'];
					} elseif ( $playlist_item['hosted_url'] && 'hosted' === $playlist_item['type'] && 'yes' !== $playlist_item['is_external_url'] ) {
						$playlist_item_object->video_url = $playlist_item['hosted_url']['url'];
					}

					$playlist_item_object->tab_collapsible = $this->get_settings_for_display( 'inner_tab_is_content_collapsible' );
					$playlist_item_object->read_more_label = $this->get_settings_for_display( 'inner_tab_label_show_more' );
					$playlist_item_object->read_less_label = $this->get_settings_for_display( 'inner_tab_label_show_less' );

					$playlist_item_object->video_duration = '';
					if ( $this->get_settings_for_display( 'show_duration' ) ) {
						$playlist_item_object->video_duration = $playlist_item['duration'];
					}

					$playlist_item_object->video_thumbnail = '';
					if ( $this->get_settings_for_display( 'show_thumbnail' ) ) {
						$playlist_item_object->video_thumbnail = $playlist_item['thumbnail']['url'];
					}

					$playlist_item_object->html_attributes_title = $this->create_playlist_item_title_attributes( $index, $id_int );

					$playlist_item_object->tabs = [];
					if ( $playlist_item['inner_tab_content_1'] || $playlist_item['inner_tab_content_2'] ) {
						$tab_1_title = $this->get_settings_for_display( 'inner_tab_title_1' );
						$tab_2_title = $this->get_settings_for_display( 'inner_tab_title_2' );
						if ( $playlist_item_object->is_inner_tabs_visible ) {
							$playlist_item_object->tabs = $this->create_playlist_item_tabs_array( $playlist_item, $index, $tab_1_title, $tab_2_title );
						}
					}

					if ( 0 === $index && 'yes' !== $this->get_settings_for_display( 'autoplay_on_load' ) && $this->get_settings_for_display( 'show_image_overlay' ) ) {
						$playlist_item_object->show_overlay_image = true;
					}

					break;
				case 'section':
					$playlist_item_object->type = $playlist_item['type'];
					$playlist_item_object->section_title = $playlist_item['title'];
					$playlist_item_object->section_html_tag = Utils::validate_html_tag( $playlist_item['section_html_tag'] );
					$playlist_item_object->video_title = '';
					break;
			}

			$playlist_item_object->html_attributes_video = $this->create_playlist_item_video_attributes( $index, $id_int, $playlist_item, $playlist_item_object->video_url );

			$playlist_items_array [] = $playlist_item_object;
		}

		return $playlist_items_array;
	}

	private function count_video_items( $playlist_items ) {
		$filtered_playlist_items = $playlist_items;
		foreach ( $filtered_playlist_items as $key => $tab ) {
			if ( 'section' === $tab['type'] ) {
				unset( $filtered_playlist_items[ $key ] );
			}
		}
		return count( $filtered_playlist_items );
	}

	private function prepare_video_playlist_data_object() {
		$settings = $this->get_settings_for_display();
		$playlist_items = $settings['tabs'];

		$playlist_object = new \stdClass();
		$playlist_object->playlist_name = $settings['playlist_title'];
		$playlist_object->playlist_title_tag = Utils::validate_html_tag( $settings['playlist_title_tag'] );
		$playlist_object->is_show_video_count = $settings['show_video_count'];

		if ( $playlist_object->is_show_video_count ) {
			$playlist_object->video_count = $this->count_video_items( $playlist_items );
		}

		$playlist_object->show_thumbnails = $settings['show_thumbnail'];
		$playlist_object->play_icon = $settings['play_icon'];
		$playlist_object->watched_icon = $settings['watched_icon'];
		$playlist_object->playlist_items = $this->create_playlist_items_array( $playlist_items );
		$playlist_object->is_image_overlay = $settings['show_image_overlay'];
		$playlist_object->image_overlay_icon = $settings['show_play_icon'];

		$image_overlay = $settings['image_overlay'];
		if ( ! empty( $image_overlay['url'] ) ) {
			$playlist_object->image_overlay_image = Group_Control_Image_Size::get_attachment_image_src( $image_overlay['id'], 'image_overlay', $settings );
			if ( ! $playlist_object->image_overlay_image[1] ) {
				$playlist_object->image_overlay_image = $image_overlay['url'];
			}
		}

		return $playlist_object;
	}

	protected function render() {
		$playlist_object = $this->prepare_video_playlist_data_object();
		?>

		<div class="e-tabs">
			<div class="e-tabs-main-area">
				<div class="e-tabs-wrapper">
					<div class="e-tabs-header">
						<<?php Utils::print_validated_html_tag( $playlist_object->playlist_title_tag ); ?> class="e-tabs-title"><?php
							// PHPCS - the main text of a widget should not be escaped.
							echo $playlist_object->playlist_name; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
						?></<?php Utils::print_validated_html_tag( $playlist_object->playlist_title_tag ); ?>>
						<div class="e-tabs-header-right-side">
							<?php if ( $playlist_object->is_show_video_count ) : ?>
								<span class="e-tabs-videos-count"><?php echo esc_attr( $playlist_object->video_count ); ?> <?php echo esc_html__( 'Videos', 'elementor-pro' ); ?></span>
							<?php endif; ?>
							<?php
								Icons_Manager::render_icon(
									[
										'library' => 'eicons',
										'value' => 'eicon-caret-down',
									],
									[
										'aria-hidden' => 'true',
										'class' => [
											'e-tabs-toggle-videos-display-button',
											'rotate-down',
										],
									]
								);
							?>
						</div>
					</div>
					<div class="e-tabs-items-wrapper">
						<div class="e-tabs-items" role="tablist">
							<?php
							foreach ( $playlist_object->playlist_items as $item ) : ?>
								<?php if ( 'section' === $item->type ) : ?>
									<<?php Utils::print_validated_html_tag( $item->section_html_tag ); ?> class="e-section-title"><?php
										// PHPCS - the main text of a widget should not be escaped.
										echo $item->section_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
									?></<?php Utils::print_validated_html_tag( $item->section_html_tag ); ?>>
								<?php else : ?>
									<div <?php Utils::print_html_attributes( $item->html_attributes_title->attributes ); ?>>
										<?php if ( $playlist_object->show_thumbnails ) : ?>
											<div class="e-tab-thumbnail">
												<?php if ( $item->video_thumbnail ) : ?>
													<img src="<?php echo esc_url( $item->video_thumbnail ); ?>" alt="<?php echo esc_attr( $item->video_title ); ?>" loading="lazy" />
												<?php endif; ?>
												<span class="icon-play"><?php Icons_Manager::render_icon( $playlist_object->play_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
												<span class="icon-watched"><?php Icons_Manager::render_icon( $playlist_object->watched_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
											</div>
										<?php else : ?>
											<span class="icon-play"><?php Icons_Manager::render_icon( $playlist_object->play_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
											<span class="icon-watched"><?php Icons_Manager::render_icon( $playlist_object->watched_icon, [ 'aria-hidden' => 'true' ] ); ?></span>
										<?php endif; ?>
										<<?php Utils::print_validated_html_tag( $item->video_html_tag ); ?> class="e-tab-title-text">
											<a tabindex="0"><?php
												// PHPCS - the main text of a widget should not be escaped.
												echo $item->video_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
											?></a>
										</<?php Utils::print_validated_html_tag( $item->video_html_tag ); ?>>
										<?php if ( $item->video_duration ) : ?>
											<span class="e-tab-duration"><?php echo esc_html( $item->video_duration ); ?></span>
										<?php endif; ?>
									</div>
								<?php endif; ?>
							<?php endforeach; ?>
						</div>
						<div class="shadow shadow-top" aria-hidden="true"></div>
						<div class="shadow shadow-bottom" aria-hidden="true"></div>
					</div>
				</div>

				<div class="e-tabs-content-wrapper" role="tablist" aria-orientation="vertical">
					<?php foreach ( $playlist_object->playlist_items as $item ) : ?>
						<div <?php Utils::print_html_attributes( $item->html_attributes_video->attributes ); ?>>
							<div></div>
							<?php if ( $item->show_overlay_image ) : ?>
								<div class="elementor-custom-embed-image-overlay elementor-clickable" style="background-image: url('<?php echo esc_url( $playlist_object->image_overlay_image ); ?>');">
									<?php if ( ! empty( $playlist_object->image_overlay_icon['value'] ) ) : ?>
										<div class="elementor-custom-embed-play" role="button" tabindex="0" aria-label="<?php echo esc_attr__( 'Play Video', 'elementor-pro' ); ?>">
											<?php Icons_Manager::render_icon( $playlist_object->image_overlay_icon, [ 'aria-hidden' => 'true' ] ); ?>
										</div>
									<?php endif; ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endforeach; ?>
				</div>
			</div>

			<div class="e-tabs-inner-tabs" >
				<?php foreach ( $playlist_object->playlist_items as $item ) : ?>
					<?php if ( $item->is_inner_tabs_visible ) : ?>
						<div <?php Utils::print_html_attributes( $item->html_attributes_video->attributes ); ?>>
							<?php if ( count( $item->tabs ) > 0 ) : ?>
								<div class="e-inner-tabs-wrapper">
									<?php foreach ( $item->tabs as $tab ) :
										if ( $tab->tab_content ) { ?>
											<div class="e-inner-tab-title <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?>">
												<a class="e-inner-tab-title-text" tabindex="0"><?php Utils::print_unescaped_internal_string( $tab->tab_title ); ?></a>
											</div>
										<?php } ?>
									<?php endforeach; ?>
								</div>
								<div class="e-inner-tabs-content-wrapper">
									<?php foreach ( $item->tabs as $tab ) :
										if ( $tab->tab_content ) { ?>
											<div class="e-inner-tab-title e-tab-mobile-title <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?>">
												<?php // PHPCS - the main text of a widget should not be escaped. ?>
												<?php echo $tab->tab_title; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
											</div>
											<div <?php Utils::print_unescaped_internal_string( $tab->tab_attribute ); ?> class="e-inner-tab-content <?php Utils::print_unescaped_internal_string( $tab->tab_class ); ?> <?php echo esc_attr( $item->tab_collapsible ); ?>">
												<div class="e-inner-tab-text">
													<?php $this->add_inline_editing_attributes( $tab->tab_content_setting_key, 'advanced' ); ?>
													<div <?php $this->print_render_attribute_string( $tab->tab_content_setting_key ); ?>>
														<?php // PHPCS - the main text of a widget should not be escaped. ?>
														<?php echo $this->parse_text_editor( $tab->tab_content ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
													</div>
												</div>
												<div class="e-inner-tab-buttons">
													<?php // PHPCS - the main text of a widget should not be escaped. ?>
													<button class="show-button"><?php echo $item->read_more_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button>
													<button><?php echo $item->read_less_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button>
												</div>
											</div>
										<?php } ?>
									<?php endforeach; ?>
								</div>
							<?php endif; ?>
						</div>
					<?php endif; ?>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

	protected function content_template() {
		?>
		<#

		function createPlaylistItemTabsArray( playlistItem, playlistItemIndex, tab1Title, tab2Title ) {
			var playlistItemTabsArray = [];
			var isAlreadyActivatedTab = false;

			var playlistItemTabsContent = [
				playlistItem.inner_tab_content_1,
				playlistItem.inner_tab_content_2,
			];

			var playlistItemTabsTitle = [
				tab1Title,
				tab2Title,
			];

			playlistItemTabsContent.forEach( function( playlistItemTabContent, index ) {
				var playlistItemTabContentObject = {};
				playlistItemTabContentObject.tab_title = playlistItemTabsTitle[ index ];
				playlistItemTabContentObject.tab_content = playlistItemTabContent;

				var tabIndex = index + 1;
				playlistItemTabContentObject.tabContentSettingKey = view.getRepeaterSettingKey( 'inner_tab_content_' + tabIndex, 'tabs', playlistItemIndex );

				if ( playlistItemTabContent ) {
					playlistItemTabContentObject.tabAttribute = ! isAlreadyActivatedTab ? '' : 'hidden';
					playlistItemTabContentObject.tabClass = ! isAlreadyActivatedTab ? 'e-inner-tab-active' : '';
					isAlreadyActivatedTab = true;
				}

				playlistItemTabsArray.push(playlistItemTabContentObject);
			} );

			return playlistItemTabsArray;
		}

		function createPlaylistItemVideoAttributes( index, id, playlistItem, videoUrl ) {
			var videoUrl = videoUrl ? videoUrl : '';
			var htmlAttributesObject = {};
			var tabCount = index + 1;

			// The first tab will be activated and not hidden like the second tab.
			var hidden = 1 === tabCount ? false : 'hidden';

			htmlAttributesObject.attributes = {
				'id' : 'e-tab-content-' + id + tabCount,
				'class' : [ 'e-tab-content', 'elementor-clearfix' ],
				'data-tab' : tabCount,
				'role' : 'tabpanel',
				'aria-labelledby' : 'e-tab-title-' + id + tabCount,
				'tabindex' : '0',
				'data-video-url' : videoUrl,
				'data-video-type' : playlistItem.type,
				'data-video-title' : playlistItem.title,
				'data-video-duration' : playlistItem.duration,
			};

			if ( hidden ) {
				htmlAttributesObject.attributes.hidden = hidden;
			}

			return htmlAttributesObject;
		}

		function createPlaylistItemTitleAttributes( index, id ) {
			var htmlAttributesObject = {};
			var tabCount = index + 1;

			htmlAttributesObject.attributes = {
				'id' : 'e-tab-title-' + id + tabCount,
				'class' : [ 'e-tab-title', 'e-tab-desktop-title' ],
				'aria-selected' : 1 === tabCount ? 'true' : 'false',
				'data-tab' : tabCount,
				'role' : 'tab',
				'tabindex' : 1 === tabCount ? '0' : '-1',
				'aria-controls' : 'e-tab-content-' + id + tabCount,
			};

			return htmlAttributesObject;
		}

		function createPlaylistItemsArray( playlistItems ) {
			var playlistItemsArray = [];
			id = view.getIDInt().toString().substr( 0, 3 )

			playlistItems.forEach( function( playlistItem, index ) {
				var playlistItemObject = {};
				playlistItemObject.videoUrl = '';
				playlistItemObject.showOverlayImage = false;
				playlistItemObject.isInnerTabsVisible = playlistItem.inner_tab_is_content_visible;

				switch ( playlistItem.type ) {
					case 'youtube':
					case 'vimeo':
					case 'hosted':
						playlistItemObject.type = playlistItem.type;
						playlistItemObject.videoTitle = playlistItem.title;
						playlistItemObject.videoHtmlTag = elementor.helpers.validateHTMLTag( playlistItem.video_html_tag );

						if ( playlistItem.youtube_url && 'youtube' === playlistItem.type ) {
							playlistItemObject.videoUrl = playlistItem.youtube_url;
						} else if ( playlistItem.vimeo_url && 'vimeo' === playlistItem.type ) {
							playlistItemObject.videoUrl = playlistItem.vimeo_url;
						} else if ( playlistItem.external_url && 'hosted' === playlistItem.type && 'yes' === playlistItem.is_external_url ) {
							playlistItemObject.videoUrl = playlistItem.external_url.url;
						} else if ( playlistItem.hosted_url && 'hosted' === playlistItem.type && 'yes' !== playlistItem.is_external_url ) {
							playlistItemObject.videoUrl = playlistItem.hosted_url.url;
						}

						playlistItemObject.tabCollapsible = settings.inner_tab_is_content_collapsible;
						playlistItemObject.readMoreLabel = settings.inner_tab_label_show_more;
						playlistItemObject.readLessLabel = settings.inner_tab_label_show_less;

						playlistItemObject.videoDuration = '';
						if ( settings.show_duration ) {
							playlistItemObject.videoDuration = playlistItem.duration;
						}

						playlistItemObject.videoThumbnail = '';
						if ( settings.show_thumbnail ) {
							playlistItemObject.videoThumbnail = playlistItem.thumbnail.url;
						}

						playlistItemObject.htmlAttributesTitle = createPlaylistItemTitleAttributes( index, id );

						playlistItemObject.tabs = [];
						if ( playlistItem.inner_tab_content_1 || playlistItem.inner_tab_content_2 ) {
							var tab1Title = settings.inner_tab_title_1;
							var tab2Title = settings.inner_tab_title_2;
							if ( playlistItemObject.isInnerTabsVisible ) {
								playlistItemObject.tabs = createPlaylistItemTabsArray( playlistItem, index, tab1Title, tab2Title );
							}
						}

						if ( (0 === index) && (settings.autoplay_on_load !== 'yes') && settings.show_image_overlay ) {
							playlistItemObject.showOverlayImage = true;
						}

					break;
					case 'section':
						playlistItemObject.type = playlistItem.type;
						playlistItemObject.sectionTitle = playlistItem.title;
						playlistItemObject.sectionHtmlTag = elementor.helpers.validateHTMLTag( playlistItem.section_html_tag );
						playlistItemObject.isInnerTabsVisible = false;
					break;
				}

				playlistItemObject.htmlAttributesVideo = createPlaylistItemVideoAttributes( index, id, playlistItem, elementor.helpers.sanitizeUrl( playlistItemObject.videoUrl ) );

				playlistItemsArray.push(playlistItemObject);
			} );

			return playlistItemsArray;
		}

		function countVideoItems( playlistItems ) {
			var filteredPlaylistItems = playlistItems.filter(function(playlistItem) {
				return 'section' !== playlistItem.type
			});

			return filteredPlaylistItems.length;
		}

		function prepare_video_playlist_data_object() {
			var playlistItems = settings.tabs

			playlistObject = {};
			playlistObject.playlistName = settings.playlist_title;
			playlistObject.playlistNameHTMLTag = elementor.helpers.validateHTMLTag( settings.playlist_title_tag );
			playlistObject.isShowVideoCount = settings.show_video_count;

			if( playlistObject.isShowVideoCount ) {
				playlistObject.videoCount = countVideoItems( playlistItems );
			}

			playlistObject.showThumbnails = settings.show_thumbnail;
			playlistObject.playIcon = settings.play_icon;
			playlistObject.watchedIcon = settings.watched_icon;
			playlistObject.playlistItems = createPlaylistItemsArray( playlistItems );
			playlistObject.isImageOverlay = !settings.autoplay_on_load && settings.show_image_overlay ? true : false;
			playlistObject.imageOverlayIcon = settings.show_play_icon;

			playlistObject.imageOverlayImage = '';
			imageOverlay = settings.image_overlay;
			if ( imageOverlay.url && settings.image_overlay.id && playlistObject.isImageOverlay ) {
				var image_overlay_object = {
				id: settings.image_overlay.id,
				url: settings.image_overlay.url,
				size: settings.image_overlay_size,
				dimension: settings.image_overlay_custom_dimension,
				model: view.getEditModel()
				};

				playlistObject.imageOverlayImage = elementor.imagesManager.getImageUrl( image_overlay_object );
			} else {
				playlistObject.imageOverlayImage = imageOverlay.url;
			}

			return playlistObject;
		}

		var playlistObject = prepare_video_playlist_data_object();

		var watchedIconHTML = elementor.helpers.renderIcon( view, playlistObject.watchedIcon, { 'aria-hidden': true }, 'i' , 'object' );
		var playIconHTML = elementor.helpers.renderIcon( view, playlistObject.playIcon, { 'aria-hidden': true }, 'i' , 'object' );
		var overlayImagePlayIconHTML = elementor.helpers.renderIcon( view, playlistObject.imageOverlayIcon, { 'aria-hidden': true }, 'i' , 'object' );
		#>
		<div class="e-tabs" role="tablist" aria-orientation="vertical">
			<div class="e-tabs-main-area">
				<div class="e-tabs-wrapper">
					<div class="e-tabs-header">
						<{{ playlistObject.playlistNameHTMLTag }} class="e-tabs-title">
							{{{ playlistObject.playlistName }}}
						</{{ playlistObject.playlistNameHTMLTag }}>
						<div class="e-tabs-header-right-side">
							<# if ( playlistObject.isShowVideoCount ) { #>
								<span class="e-tabs-videos-count">{{{ playlistObject.videoCount }}} Videos</span>
							<# } #>
							<i class="e-tabs-toggle-videos-display-button eicon-caret-down rotate-down" aria-hidden="true"></i>
						</div>
					</div>
					<div class="e-tabs-items-wrapper">
						<div class="e-tabs-items" role="tablist">
							<# _.each( playlistObject.playlistItems, function( item, index ) { #>
								<# if ( 'section' === item.type ) { #>
									<{{ item.sectionHtmlTag }} class="e-section-title">
										{{{ item.sectionTitle }}}
									</{{ item.sectionHtmlTag }}>
								<# } else { #>
									<#
										var tabTitleKey = item.htmlAttributesTitle.attributes.id;
										view.addRenderAttribute(tabTitleKey, item.htmlAttributesTitle.attributes);
									#>
									<div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
										<# if ( playlistObject.showThumbnails ) { #>
											<div class="e-tab-thumbnail">
												<# if ( item.videoThumbnail ) { #>
													<img src="{{ item.videoThumbnail }}" />
												<# } #>
												<span class="icon-play">{{{ playIconHTML.value }}}</span>
												<span class="icon-watched">{{{ watchedIconHTML.value }}}</span>
											</div>
										<# } else { #>
										<span class="icon-play">{{{ playIconHTML.value }}}</span>
										<span class="icon-watched">{{{ watchedIconHTML.value }}}</span>
										<# } #>
										<{{ item.videoHtmlTag }} class="e-tab-title-text">
											<a tabindex="0">{{{ item.videoTitle }}}</a>
										</{{ item.videoHtmlTag }}>
										<# if ( item.videoDuration ) { #>
										<span class="e-tab-duration">{{{ item.videoDuration }}}</span>
										<# } #>
									</div>
								<# } #>
							<# } ); #>
						</div>
						<div class="shadow shadow-top" aria-hidden="true"></div>
						<div class="shadow shadow-bottom" aria-hidden="true"></div>
					</div>
				</div>

				<div class="e-tabs-content-wrapper">
					<# _.each( playlistObject.playlistItems, function( item, index ) { #>
					<div class="e-tab-title e-tab-mobile-title" role="tab">{{{ item.title }}}</div>
					<#
						var tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'tabs', index );
						view.addRenderAttribute(tabContentKey, item.htmlAttributesVideo.attributes);
					#>
					<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
						<div></div>
						<# if ( item.showOverlayImage ) { #>
						<div class="elementor-custom-embed-image-overlay elementor-clickable" style="background-image: url( {{ playlistObject.imageOverlayImage }} );">
							<# if ( playlistObject.imageOverlayIcon.value ) { #>
							<div class="elementor-custom-embed-play" role="button">
								{{{ overlayImagePlayIconHTML.value }}}
							</div>
							<# } #>
						</div>
						<# } #>
					</div>
					<# } ); #>
				</div>
			</div>

			<div class="e-tabs-inner-tabs">
				<# _.each( playlistObject.playlistItems, function( item, index ) { #>
					<# if ( item.isInnerTabsVisible ) { #>
					<#
						var tabContentKey = view.getRepeaterSettingKey( 'tab_content', 'inner-tabs', index );
						view.addRenderAttribute(tabContentKey, item.htmlAttributesVideo.attributes);
					#>
						<div {{{ view.getRenderAttributeString( tabContentKey ) }}}>
							<# if ( item.tabs.length > 0 ) { #>
								<div class="e-inner-tabs-wrapper">
									<# _.each( item.tabs, function( tab ) { #>
										<# if ( tab.tab_content ) { #>
											<div class="e-inner-tab-title {{{ tab.tabClass }}}">
												<a class="e-inner-tab-title-text" tabindex="0"> {{{ tab.tab_title }}} </a>
											</div>
										<# } #>
									<# }); #>
								</div>
								<div class="e-inner-tabs-content-wrapper">
									<# _.each( item.tabs, function( tab ) { #>
										<div class="e-inner-tab-title e-tab-mobile-title {{{ tab.tabClass }}}">
											{{{ tab.tab_title }}}
										</div>
										<div {{{ tab.tabAttribute }}} class="e-inner-tab-content {{{ tab.tabClass }}} {{{ item.tabCollapsible }}}">
											<div class="e-inner-tab-text">
												<# view.addInlineEditingAttributes( tab.tabContentSettingKey, 'advanced' ); #>
												<div {{{ view.getRenderAttributeString( tab.tabContentSettingKey ) }}}>
													{{{ tab.tab_content }}}
												</div>
											</div>
											<div class="e-inner-tab-buttons">
												<button class="show-button">{{{ item.readMoreLabel }}}</button>
												<button>{{{ item.readLessLabel }}}</button>
											</div>
										</div>
									<# } ); #>
								</div>
							<# } #>
						</div>
					<# } #>
				<# } ); #>
			</div>
		</div>
		<?php
	}
}