<?php

namespace ElementPack\Modules\HoverVideo\Widgets;

use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Utils;

use ElementPack\Modules\HoverVideo\Skins;
use Elementor\Modules\DynamicTags\Module as TagsModule;

if ( ! defined( 'ABSPATH' ) ) {
	exit();
}

class Hover_Video extends Module_Base {

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

	public function get_title() {
		return BDTEP . esc_html__( 'Hover Video', 'bdthemes-element-pack' );
	}

	public function get_icon() {
		return 'bdt-wi-hover-video';
	}

	public function get_categories() {
		return [ 
			'element-pack',
		];
	}

	public function get_keywords() {
		return [ 'hover', 'insta', 'video', 'player' ];
	}

	public function get_style_depends() {
		return $this->ep_is_edit_mode() ? [ 'ep-styles' ] : [ 'ep-hover-video' ];
	}

	public function get_script_depends() {
		return $this->ep_is_edit_mode() ? [ 'ep-scripts' ] : [ 'ep-hover-video' ];
	}

	public function get_custom_help_url() {
		return 'https://youtu.be/RgoWlIm5KOo';
	}

	public function register_skins() {
		$this->add_skin( new Skins\Skin_Accordion( $this ) );
		$this->add_skin( new Skins\Skin_Vertical( $this ) );
	}

	public function has_widget_inner_wrapper(): bool {
        return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
    }
	
	protected function is_dynamic_content(): bool {
		return false;
	}

	protected function register_controls() {

		$this->start_controls_section(
			'section_layouts',
			[ 
				'label' => esc_html__( 'Hover Video', 'bdthemes-element-pack' ),
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'source_type',
			[ 
				'label'       => esc_html__( 'Video Type', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'hosted_url',
				'label_block' => true,
				'options'     => [ 
					'remote_url' => esc_html__( 'Remote Video', 'bdthemes-element-pack' ),
					'hosted_url' => esc_html__( 'Local Video', 'bdthemes-element-pack' ),
				],
			]
		);

		$repeater->add_control(
			'remote_url',
			[ 
				'type'          => Controls_Manager::URL,
				'label'         => __( 'Video Source', 'bdthemes-element-pack' ),
				'label_block'   => true,
				'show_external' => false,
				'placeholder'   => __( 'https://exmaple.com/sample.mp4', 'bdthemes-element-pack' ),
				'dynamic'       => [ 'active' => true ],
				'condition'     => [ 
					'source_type' => 'remote_url',
				],
				'default'       => [ 
					'url' => '//test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_1MB.mp4',
				],
			]
		);

		$repeater->add_control(
			'hosted_url',
			[ 
				'label'      => __( 'Select Video', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::MEDIA,
				'dynamic'    => [ 
					'active'     => true,
					'categories' => [ 
						TagsModule::POST_META_CATEGORY,
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'media_type' => 'video',
				'condition'  => [ 
					'source_type' => 'hosted_url'
				],
			]
		);

		$repeater->add_control(
			'hover_video_poster',
			[ 
				'label'       => __( 'Select Poster', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::MEDIA,
				'dynamic'     => [ 
					'active' => true,
				],
				'label_block' => true,
				'default'     => [ 
					'url' => Utils::get_placeholder_image_src(),
				],

			]
		);

		$repeater->add_control(
			'hover_video_title',
			[ 
				'label'       => __( 'Title', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::TEXT,
				'label_block' => true,
				'placeholder' => __( 'Title Item', 'bdthemes-element-pack' ),
				'default'     => __( 'Title Item', 'bdthemes-element-pack' ),
				'dynamic'     => [ 
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'hover_item_icon_type',
			[ 
				'label'        => esc_html__( 'Icon Type', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::CHOOSE,
				'toggle'       => false,
				'default'      => 'icon',
				'prefix_class' => 'bdt-icon-type-',
				'render_type'  => 'template',
				'options'      => [ 
					'icon'  => [ 
						'title' => esc_html__( 'Icon', 'bdthemes-element-pack' ),
						'icon'  => 'fas fa-star'
					],
					'image' => [ 
						'title' => esc_html__( 'Image', 'bdthemes-element-pack' ),
						'icon'  => 'far fa-image'
					]
				]
			]
		);

		$repeater->add_control(
			'hover_item_icon',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => [ 
					'value'   => 'fas fa-star',
					'library' => 'fa-solid',
				],
				'condition' => [ 
					'hover_item_icon_type' => 'icon',
				]
			]
		);

		$repeater->add_control(
			'hover_selected_image',
			[ 
				'label'       => __( 'Image Icon', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::MEDIA,
				'dynamic'     => [ 'active' => true ],
				'render_type' => 'template',
				'default'     => [ 
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition'   => [ 
					'hover_item_icon_type' => 'image'
				]
			]
		);

		$repeater->add_control(
			'video_wrapper_link',
			[ 
				'label'       => __( 'Wrapper Link', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::URL,
				'dynamic'     => [ 
					'active' => true,
				],
				'label_block' => true,
				'placeholder' => __( 'https://your-link.com', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'hover_video_list',
			[ 
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [ 
					[ 
						'hover_video_title' => __( 'Hover Video 01', 'bdthemes-element-pack' ),
						'hover_item_icon'   => [ 'value' => 'far fa-laugh', 'library' => 'fa-regular' ],
					],
					[ 
						'hover_video_title' => __( 'Hover Video 02', 'bdthemes-element-pack' ),
						'hover_item_icon'   => [ 'value' => 'far fa-laugh', 'library' => 'fa-regular' ],
					],
				],
				'title_field' => '{{{ hover_video_title }}}',
			]
		);

		$this->add_responsive_control(
			'hover_video_height',
			[ 
				'label'     => __( 'Video Height', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 200,
						'max' => 1000,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-wrapper-list' => 'height: {{SIZE}}{{UNIT}};',
				],
				'separator' => 'before'
			]
		);

		$this->add_control(
			'aspect_ratio',
			[ 
				'label'        => esc_html__( 'Aspect Ratio', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SELECT,
				'default'      => '',
				'options'      => [ 
					''    => esc_html__( 'Select Aspect Ratio', 'bdthemes-element-pack' ),
					'11'  => '1:1',
					'21'  => '2:1',
					'32'  => '3:2',
					'43'  => '4:3',
					'85'  => '8:5',
					'169' => '16:9',
					'219' => '21:9',
					'916' => '9:16',
				],
				'prefix_class' => 'bdt-hv-ratio-yes bdt-hv-ratio-',
				'render_type'  => 'template',
				'description'  => esc_html__( 'Note: We recommend you choose only one from "Video Height" or "Aspect Ratio". Please don\'t use both.', 'bdthemes-element-pack' )
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_additional',
			[ 
				'label' => esc_html__( 'Additional', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'progress_visibility',
			[ 
				'label'   => __( 'Show Progress Bar', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'icon_visibility',
			[ 
				'label' => __( 'Show Icon', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'video_preload',
			[ 
				'label'   => __( 'Video Preload', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'video_autoplay',
			[ 
				'label' => __( 'Autoplay', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'video_replay',
			[ 
				'label'       => __( 'Video Replay', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'description' => __( 'Note: If you will activate this option, the video will play from the beginning.', 'bdthemes-element-pack' )
			]
		);

		$this->add_control(
			'poster_show_again',
			[ 
				'label'       => __( 'Show Poster Again', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'description' => __( 'Note: If you will activate this option, the video will play from the beginning and also visible your poster again.', 'bdthemes-element-pack' )
			]
		);

		$this->add_control(
			'btn_progress_visibility',
			[ 
				'label'     => __( 'Progress On Button', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [ 
					'_skin' => [ '' ]
				]
			]
		);

		$this->end_controls_section();

		//Style
		$this->start_controls_section(
			'hover_video',
			[ 
				'label' => __( 'Video', 'bdthemes-element-pack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'hover_video_border',
				'label'    => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-wrapper-list video',
			]
		);

		$this->add_responsive_control(
			'hover_video_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-wrapper-list video, {{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list'                                                              => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',

				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'      => 'hover_video_shadow',
				'selector'  => '{{WRAPPER}} .bdt-hover-video .bdt-hover-wrapper-list video',
				'condition' => [ 
					'_skin' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[ 
				'name'     => 'hover_video_css_filters_active',
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-wrapper-list video',
			]
		);

		$this->add_control(
			'hr',
			[ 
				'type'      => Controls_Manager::DIVIDER,
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'hover_video_item_heading',
			[ 
				'label'     => __( 'Hover Item', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->start_controls_tabs( 'mask_content_tabs' );

		$this->start_controls_tab(
			'mask_content_normal',
			[ 
				'label'     => __( 'Normal', 'bdthemes-element-pack' ),
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'mask_content_color',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask, {{WRAPPER}} .bdt-hover-video.skin-vertical  .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask'                                  => 'color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video.skin-accordion  .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text, {{WRAPPER}} .bdt-hover-video.skin-vertical  .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text' => 'color: {{VALUE}}',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'      => 'mask_content_bg',
				'selector'  => '{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group, {{WRAPPER}}  .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group',
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[ 
				'name'      => 'accrordion_text_shadow',
				'label'     => __( 'Text Shadow', 'bdthemes-element-pack' ),
				'selector'  => '{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text',
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_responsive_control(
			'mask_content_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'      => 'mask_content_text',
				'selector'  => '{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-text',
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'mask_content_align',
			[ 
				'label'       => __( 'Alignment', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::CHOOSE,
				'toggle'      => false,
				'default'     => 'left',
				'options'     => [ 
					'left'   => [ 
						'title' => __( 'Left', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => __( 'Center', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => __( 'Right', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors'   => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group' => 'text-align: {{VALUE}};',
				],
				'condition'   => [ 
					'_skin!' => '',
				],
				'render_type' => 'template'
			]
		);

		$this->add_control(
			'mask_alignment',
			[ 
				'label'        => __( 'Vertical Alignment', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::CHOOSE,
				'default'      => 'top',
				'options'      => [ 
					'top'    => [ 
						'title' => __( 'Top', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-v-align-top',
					],
					'middle' => [ 
						'title' => __( 'Middle', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-v-align-middle',
					],
					'bottom' => [ 
						'title' => __( 'Bottom', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'prefix_class' => 'bdt-hover-video-position-',
				'toggle'       => false,
				'condition'    => [ 
					'_skin!' => '',
				],
			]
		);

		$this->add_control(
			'accr_mask_opacity',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min'  => 0,
						'step' => 0.1,
						'max'  => 1,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-mask-text-group' => 'opacity: {{SIZE}}',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'mask_content_active',
			[ 
				'label'     => __( 'Active', 'bdthemes-element-pack' ),
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'mask_content_color_active',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active'                                 => 'color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-text, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-text' => 'color: {{VALUE}}',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'      => 'mask_content_bg_active',
				'selector'  => '{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-mask-text-group, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-mask-text-group',
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'      => 'mask_content_text_active',
				'selector'  => '{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-text, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-text',
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'accr_mask_opacity_active',
			[ 
				'label'     => __( 'Opacity', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min'  => 0,
						'step' => 0.1,
						'max'  => 1,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-mask-text-group, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask.active .bdt-hover-mask-text-group' => 'opacity: {{SIZE}}',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_control(
			'mask_hover_svg_img_heading',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [ 
					'_skin!'          => '',
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->add_responsive_control(
			'mask_hover_svg_img_size',
			[ 
				'label'     => __( 'Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 15,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-icon, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-icon'     => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask img, {{WRAPPER}} .bdt-hover-video.skin-vertical .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask img'   => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'_skin!'          => '',
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->add_responsive_control(
			'mask_hover_svg_img_spacing',
			[ 
				'label'     => __( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 15,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-accordion .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-icon, {{WRAPPER}} .bdt-hover-video.skin-vertical  .bdt-hover-wrapper-list .bdt-hover-mask-list .bdt-hover-mask .bdt-hover-icon' => 'padding-bottom: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'_skin!'          => '',
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'hover_progress_style',
			[ 
				'label'      => __( 'Progress Bar', 'bdthemes-element-pack' ),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [ 
					'relation' => 'or',
					'terms'    => [ 
						[ 
							'name'  => 'progress_visibility',
							'value' => 'yes',
						],
						[ 
							'name'  => 'btn_progress_visibility',
							'value' => 'yes',
						],
					],
				],
			]
		);


		$this->add_control(
			'hover_progress_bg',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-bar'                     => 'background-color: {{VALUE}}',

				],
			]
		);

		$this->add_control(
			'hover_progress_fill',
			[ 
				'label'     => __( 'Fill Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar .bdt-hover-progress' => 'background-color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-bar .bdt-hover-progress'                     => 'background-color: {{VALUE}}',

				],
			]
		);

		$this->add_responsive_control(
			'hover_progress_height',
			[ 
				'label'     => __( 'Height', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 20,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar'                             => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar .bdt-hover-progress'         => 'height: {{SIZE}}{{UNIT}};',

					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-bar'                     => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-bar .bdt-hover-progress' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'hover_progress_width',
			[ 
				'label'     => __( 'Width', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->add_control(
			'hover_progress_border_radius',
			[ 
				'label'      => esc_html__( 'Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar'                             => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list .bdt-hover-bar-wrapper .bdt-hover-bar .bdt-hover-progress'         => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',

					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-bar'                     => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-bar .bdt-hover-progress' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'hover_progress_spacing',
			[ 
				'label'     => __( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-bar-list' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'_skin!' => '',
				]
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'hover_button_style',
			[ 
				'label'     => __( 'Button', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'_skin' => [ '' ]
				]
			]
		);

		$this->add_responsive_control(
			'hover_button_spacing',
			[ 
				'label'     => __( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs( 'hover_button_tabs' );

		$this->start_controls_tab(
			'hover_button_normal',
			[ 
				'label' => __( 'Normal  ', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'hover_button_color',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn, {{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-btn-text' => 'color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn svg'                                                                                     => 'fill: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'hover_button_bg',
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'hover_button_border',
				'label'    => esc_html__( 'Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn',
			]
		);


		$this->add_responsive_control(
			'hover_button_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'hover_button_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_responsive_control(
			'hover_button_margin',
			[ 
				'label'      => esc_html__( 'Margin', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'hover_button_shadow',
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn'
			]
		);


		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'hover_button_text_size',
				'selector' => '{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-btn-text',
			]
		);

		$this->add_responsive_control(
			'hover_button_align',
			[ 
				'label'       => __( 'Alignment', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::CHOOSE,
				'toggle'      => false,
				'default'     => 'center',
				'options'     => [ 
					'left'   => [ 
						'title' => __( 'Left', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => __( 'Center', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => __( 'Right', 'bdthemes-element-pack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors'   => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper' => 'text-align: {{VALUE}};',
				],
				'render_type' => 'template'
			]
		);

		$this->add_control(
			'mask_icon',
			[ 
				'label'     => __( 'Icon', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [ 
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->add_responsive_control(
			'hover_svg_img_size',
			[ 
				'label'     => __( 'Size', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 15,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-icon' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn img' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [ 
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->add_responsive_control(
			'hover_svg_img_spacing',
			[ 
				'label'     => __( 'Spacing', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 20,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn .bdt-hover-icon-wrapper' => 'margin-right: {{SIZE}}{{UNIT}}',
				],
				'condition' => [ 
					'icon_visibility' => 'yes'
				]
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'hover_button_active',
			[ 
				'label' => __( 'Active', 'bdthemes-element-pack' ),
			]
		);

		$this->add_control(
			'hover_button_color_active',
			[ 
				'label'     => __( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn.active, {{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn.active .bdt-hover-btn-text' => 'color: {{VALUE}}',
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn.active svg'                                                                                            => 'fill: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'hover_button_border_active',
			[ 
				'label'     => __( 'Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn.active' => 'border-color: {{VALUE}};',
				],
				'condition' => [ 
					'hover_button_border_border!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'hover_button_bg_active',
				'selector' => '{{WRAPPER}} .bdt-hover-video .bdt-hover-btn-wrapper .bdt-hover-btn.active',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$hover_video_list = isset( $settings['hover_video_list'] ) && is_array( $settings['hover_video_list'] ) ? $settings['hover_video_list'] : [];

		$id = 'default-' . esc_attr( $this->get_id() );
		$id = $id . '-' . wp_rand( 10, 500 );

		$video_replay = ( ! empty( $settings['video_replay'] ) && $settings['video_replay'] === 'yes' ) ? 'yes' : 'no';
		$poster_again = ( ! empty( $settings['poster_show_again'] ) && $settings['poster_show_again'] === 'yes' ) ? 'yes' : 'no';

		$this->add_render_attribute(
			[
				'hover_video_attr' => [
					'id'            => esc_attr( $id ),
					'class'         => 'bdt-hover-video skin-default',
					'data-settings' => [
						wp_json_encode( array_filter( [
							'id'          => $id,
							'videoReplay' => $video_replay,
							'posterAgain' => $poster_again,
						] ) ),
					],
				],
			]
		);

		$video_preload = ( ! empty( $settings['video_preload'] ) && $settings['video_preload'] === 'yes' ) ? 'auto' : 'none';
		$autoplay_class = ( ! empty( $settings['video_autoplay'] ) && $settings['video_autoplay'] === 'yes' ) ? 'bdt-hover-wrapper-list autoplay' : 'bdt-hover-wrapper-list';
		$this->add_render_attribute( 'hover_video_wrapper', 'class', $autoplay_class );

		?>

		<div <?php $this->print_render_attribute_string( 'hover_video_attr' ); ?>>
			<span class="hover-video-loader"></span>
			<div <?php $this->print_render_attribute_string( 'hover_video_wrapper' ); ?>>
				<?php
				$i = 0;
				foreach ( $hover_video_list as $index => $item ) :
					$i++;
					$item_id = isset( $item['_id'] ) ? $item['_id'] : '';
					$this->add_render_attribute( 'bdt_hover_video_attr', 'id', esc_attr( $id . '-' . $item_id ), true );
					$active_class = ( $i === 1 ) ? 'active' : '';
					$this->add_render_attribute( 'bdt_hover_video_attr', 'class', $active_class, true );
					$this->add_render_attribute( 'bdt_hover_video_attr', 'preload', esc_attr( $video_preload ), true );

					$video_source = '';
					$source_type = isset( $item['source_type'] ) ? $item['source_type'] : '';
					if ( $source_type === 'hosted_url' && isset( $item['hosted_url']['url'] ) ) {
						$video_source = $item['hosted_url']['url'];
					} elseif ( $source_type === 'remote_url' && isset( $item['remote_url']['url'] ) ) {
						$video_source = $item['remote_url']['url'];
					}

					if ( $video_source !== '' ) {
						$this->add_render_attribute( 'bdt_hover_video_attr', 'src', esc_url( $video_source ), true );
						$video_poster = isset( $item['hover_video_poster']['url'] ) ? $item['hover_video_poster']['url'] : '';
					} else {
						$video_poster = BDTEP_ASSETS_URL . 'images/no-video.svg';
					}

					if ( $video_poster !== '' ) {
						$this->add_render_attribute( 'bdt_hover_video_attr', 'poster', esc_url( $video_poster ), true );
					}
					?>
					<video <?php $this->print_render_attribute_string( 'bdt_hover_video_attr' ); ?> oncontextmenu="return false;" muted></video>
				<?php endforeach; ?>
			</div>
			<?php if ( ! empty( $settings['progress_visibility'] ) && $settings['progress_visibility'] === 'yes' ) : ?>
				<div class="bdt-hover-bar-list">
					<?php
					$i = 0;
					foreach ( $hover_video_list as $index => $item ) :
						$i++;
						$item_id = isset( $item['_id'] ) ? $item['_id'] : '';
						$this->add_render_attribute( 'bdt_hover_pro_attr', 'class', 'bdt-hover-progress', true );
						$this->add_render_attribute( 'bdt_hover_pro_attr', 'data-id', esc_attr( $id . '-' . $item_id ), true );
						if ( $i === 1 ) {
							$this->add_render_attribute( 'bdt_hover_pro_attr', 'class', 'active' );
						}
						?>
						<div class="bdt-hover-bar-wrapper">
							<div class="bdt-hover-bar">
								<div <?php $this->print_render_attribute_string( 'bdt_hover_pro_attr' ); ?>></div>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
			<div class="bdt-hover-btn-wrapper">
				<?php
				$i = 0;
				foreach ( $hover_video_list as $index => $item ) :
					$i++;
					$item_id = isset( $item['_id'] ) ? $item['_id'] : '';
					$this->add_render_attribute( 'bdt_hover_btn_attr', 'class', 'bdt-hover-btn', true );
					$this->add_render_attribute( 'bdt_hover_btn_attr', 'data-id', esc_attr( $id . '-' . $item_id ), true );

					$this->add_render_attribute( 'button_pro_attr', 'class', 'bdt-hover-progress', true );
					$this->add_render_attribute( 'button_pro_attr', 'data-id', esc_attr( $id . '-' . $item_id ), true );

					if ( $i === 1 ) {
						$this->add_render_attribute( 'bdt_hover_btn_attr', 'class', 'active' );
						$this->add_render_attribute( 'button_pro_attr', 'class', 'active' );
					}

					$link_url = isset( $item['video_wrapper_link']['url'] ) ? $item['video_wrapper_link']['url'] : '';
					if ( $link_url !== '' ) {
						$target = ( isset( $item['video_wrapper_link']['is_external'] ) && $item['video_wrapper_link']['is_external'] ) ? '_blank' : '_self';
						$this->add_render_attribute( 'bdt_hover_btn_attr', 'onclick', "window.open('" . esc_url( $link_url ) . "', '" . esc_attr( $target ) . "')", true );
					}

					$icon_visibility = ! empty( $settings['icon_visibility'] ) && $settings['icon_visibility'] === 'yes';
					$has_title = ! empty( $item['hover_video_title'] );
					$btn_progress_visibility = ! empty( $settings['btn_progress_visibility'] ) && $settings['btn_progress_visibility'] === 'yes';

					if ( $icon_visibility || $has_title || $btn_progress_visibility ) :
						?>
						<div <?php $this->print_render_attribute_string( 'bdt_hover_btn_attr' ); ?>>
							<?php if ( $icon_visibility ) : ?>
								<div class="bdt-hover-icon-wrapper">
									<span class="bdt-hover-icon">
										<?php
										$has_icon  = ! empty( $item['hover_item_icon']['value'] );
										$has_image = ! empty( $item['hover_selected_image']['url'] );
										$icon_type = isset( $item['hover_item_icon_type'] ) ? $item['hover_item_icon_type'] : '';

										if ( $has_icon && $icon_type === 'icon' ) {
											Icons_Manager::render_icon( $item['hover_item_icon'], [ 'aria-hidden' => 'true' ] );
										} elseif ( $has_image && $icon_type === 'image' ) {
											$img_src = esc_url( $item['hover_selected_image']['url'] );
											$img_alt = isset( $item['hover_video_title'] ) ? esc_attr( $item['hover_video_title'] ) : '';
											?>
											<img src="<?php echo $img_src; ?>" alt="<?php echo $img_alt; ?>">
										<?php } ?>
									</span>
								</div>
							<?php endif; ?>

							<?php if ( $has_title ) : ?>
								<div class="bdt-hover-btn-text">
									<?php echo wp_kses_post( $item['hover_video_title'] ); ?>
								</div>
							<?php endif; ?>

							<?php if ( $btn_progress_visibility ) : ?>
								<div class="bdt-hover-bar">
									<div <?php $this->print_render_attribute_string( 'button_pro_attr' ); ?>></div>
								</div>
							<?php endif; ?>
						</div>
					<?php endif; ?>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

	protected function content_template() {
		$no_video_placeholder = BDTEP_ASSETS_URL . 'images/no-video.svg';
		?>
		<#
		var list = settings.hover_video_list || [];
		var skinId = settings._skin || '';
		var videoReplay = ( settings.video_replay === 'yes' ) ? 'yes' : 'no';
		var posterAgain = ( settings.poster_show_again === 'yes' ) ? 'yes' : 'no';
		var videoPreload = ( settings.video_preload === 'yes' ) ? 'auto' : 'none';
		var noVideoPoster = '<?php echo esc_js( $no_video_placeholder ); ?>';

		var isSkinMask = ( skinId === 'accordion' || skinId === 'vertical' );
		var skinClass = 'skin-default';
		var idPrefix = 'default';
		if ( skinId === 'accordion' ) {
			skinClass = 'skin-accordion';
			idPrefix = 'accordion';
		} else if ( skinId === 'vertical' ) {
			skinClass = 'skin-vertical';
			idPrefix = 'vertical';
		}

		var containerId = idPrefix + '-' + view.getID() + '-0';
		var dataSettings = JSON.stringify({ id: containerId, videoReplay: videoReplay, posterAgain: posterAgain });

		var autoplayClassDefault = ( settings.video_autoplay === 'yes' ) ? 'bdt-hover-wrapper-list autoplay' : 'bdt-hover-wrapper-list';
		var autoplayClassMaskSkin = ( settings.video_autoplay === 'yes' ) ? 'hover-video-list autoplay' : 'hover-video-list';
		#>
		<div id="{{ containerId }}" class="bdt-hover-video {{ skinClass }}" data-settings='{{{ dataSettings }}}'>
			<span class="hover-video-loader"></span>
			<# if ( isSkinMask ) { #>
			<div class="bdt-hover-wrapper-list">
				<div class="{{ autoplayClassMaskSkin }}">
					<# _.each( list, function( item, index ) {
						var itemId = item._id || index;
						var videoId = containerId + '-' + itemId;
						var videoSrc = '';
						if ( item.source_type === 'hosted_url' && item.hosted_url && item.hosted_url.url ) {
							videoSrc = item.hosted_url.url;
						} else if ( item.source_type === 'remote_url' && item.remote_url && item.remote_url.url ) {
							videoSrc = item.remote_url.url;
						}
						var videoPoster = '';
						if ( videoSrc ) {
							videoPoster = ( item.hover_video_poster && item.hover_video_poster.url ) ? item.hover_video_poster.url : '';
						} else {
							videoPoster = noVideoPoster;
						}
						var activeClass = ( index === 0 ) ? 'active' : '';
					#>
					<video id="{{ videoId }}" class="{{ activeClass }}" src="{{ videoSrc }}" poster="{{ videoPoster }}" preload="{{ videoPreload }}" oncontextmenu="return false;" muted></video>
					<# } ); #>
				</div>
				<div class="bdt-hover-mask-list">
					<# _.each( list, function( item, index ) {
						var itemId = item._id || index;
						var videoId = containerId + '-' + itemId;
						var maskClass = ( index === 0 ) ? 'bdt-hover-mask active' : 'bdt-hover-mask';
						var linkUrl = ( item.video_wrapper_link && item.video_wrapper_link.url ) ? item.video_wrapper_link.url : '';
						var linkTarget = ( item.video_wrapper_link && item.video_wrapper_link.is_external ) ? '_blank' : '_self';
						var iconHTML = elementor.helpers.renderIcon( view, item.hover_item_icon, { 'aria-hidden': true }, 'i', 'object' );
						var showIcon = settings.icon_visibility === 'yes';
					#>
					<div class="{{ maskClass }}" data-id="{{ videoId }}" <# if ( linkUrl ) { #>onclick="window.open('{{ linkUrl }}', '{{ linkTarget }}')"<# } #>>
						<div class="bdt-hover-mask-text-group">
							<# if ( showIcon ) { #>
							<span class="bdt-hover-icon">
								<# if ( item.hover_item_icon_type === 'image' && item.hover_selected_image && item.hover_selected_image.url ) { #>
									<img src="{{ item.hover_selected_image.url }}" alt="{{ item.hover_video_title }}">
								<# } else if ( iconHTML && iconHTML.rendered ) { #>
									{{{ iconHTML.value }}}
								<# } #>
							</span>
							<# } #>
							<div class="bdt-hover-text">{{{ item.hover_video_title }}}</div>
						</div>
					</div>
					<# } ); #>
				</div>
			</div>
			<# } else { #>
			<div class="{{ autoplayClassDefault }}">
				<# _.each( list, function( item, index ) {
					var itemId = item._id || index;
					var videoId = containerId + '-' + itemId;
					var videoSrc = '';
					if ( item.source_type === 'hosted_url' && item.hosted_url && item.hosted_url.url ) {
						videoSrc = item.hosted_url.url;
					} else if ( item.source_type === 'remote_url' && item.remote_url && item.remote_url.url ) {
						videoSrc = item.remote_url.url;
					}
					var videoPoster = '';
					if ( videoSrc ) {
						videoPoster = ( item.hover_video_poster && item.hover_video_poster.url ) ? item.hover_video_poster.url : '';
					} else {
						videoPoster = noVideoPoster;
					}
					var activeClass = ( index === 0 ) ? 'active' : '';
				#>
				<video id="{{ videoId }}" class="{{ activeClass }}" src="{{ videoSrc }}" poster="{{ videoPoster }}" preload="{{ videoPreload }}" oncontextmenu="return false;" muted></video>
				<# } ); #>
			</div>
			<# } #>
			<# if ( settings.progress_visibility === 'yes' ) { #>
			<div class="bdt-hover-bar-list">
				<# _.each( list, function( item, index ) {
					var itemId = item._id || index;
					var videoId = containerId + '-' + itemId;
					var progClass = ( index === 0 ) ? 'bdt-hover-progress active' : 'bdt-hover-progress';
				#>
				<div class="bdt-hover-bar-wrapper">
					<div class="bdt-hover-bar">
						<div class="{{ progClass }}" data-id="{{ videoId }}"></div>
					</div>
				</div>
				<# } ); #>
			</div>
			<# } #>
			<# if ( ! isSkinMask ) { #>
			<div class="bdt-hover-btn-wrapper">
				<# _.each( list, function( item, index ) {
					var itemId = item._id || index;
					var videoId = containerId + '-' + itemId;
					var btnClass = ( index === 0 ) ? 'bdt-hover-btn active' : 'bdt-hover-btn';
					var iconHTML = elementor.helpers.renderIcon( view, item.hover_item_icon, { 'aria-hidden': true }, 'i', 'object' );
					var showIcon = settings.icon_visibility === 'yes';
					var hasTitle = item.hover_video_title;
					var showProgress = settings.btn_progress_visibility === 'yes';
					var linkUrl = ( item.video_wrapper_link && item.video_wrapper_link.url ) ? item.video_wrapper_link.url : '';
					var linkTarget = ( item.video_wrapper_link && item.video_wrapper_link.is_external ) ? '_blank' : '_self';
					var btnProgClass = ( index === 0 ) ? 'bdt-hover-progress active' : 'bdt-hover-progress';
				#>
				<# if ( showIcon || hasTitle || showProgress ) { #>
				<div class="{{ btnClass }}" data-id="{{ videoId }}" <# if ( linkUrl ) { #>onclick="window.open('{{ linkUrl }}', '{{ linkTarget }}')"<# } #>>
					<# if ( showIcon ) { #>
					<div class="bdt-hover-icon-wrapper">
						<span class="bdt-hover-icon">
							<# if ( item.hover_item_icon_type === 'image' && item.hover_selected_image && item.hover_selected_image.url ) { #>
								<img src="{{ item.hover_selected_image.url }}" alt="{{ item.hover_video_title }}">
							<# } else if ( iconHTML && iconHTML.rendered ) { #>
								{{{ iconHTML.value }}}
							<# } #>
						</span>
					</div>
					<# } #>
					<# if ( hasTitle ) { #>
					<div class="bdt-hover-btn-text">{{{ item.hover_video_title }}}</div>
					<# } #>
					<# if ( showProgress ) { #>
					<div class="bdt-hover-bar">
						<div class="{{ btnProgClass }}" data-id="{{ videoId }}"></div>
					</div>
					<# } #>
				</div>
				<# } #>
				<# } ); #>
			</div>
			<# } #>
		</div>
		<?php
	}
}