<?php
namespace PowerpackElements\Modules\Gallery\Widgets;

use PowerpackElements\Base\Powerpack_Widget;
use PowerpackElements\Modules\Gallery\Module;
use PowerpackElements\Classes\PP_Config;
use PowerpackElements\Classes\PP_Helper;

// Elementor Classes.
use Elementor\Controls_Manager;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Modules\DynamicTags\Module as TagsModule;

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

/**
 * Image Gallery Widget
 */
class Image_Gallery extends Powerpack_Widget {

	/**
	 * Resolved gallery photos, keyed by attachment ID.
	 *
	 * Building this list hits the database once per attachment, and it is needed
	 * by render(), render_gallery_items() and render_pagination(), so it is
	 * resolved once per widget instance.
	 *
	 * @since 3.0.0
	 * @var array|null
	 */
	private $photos = null;

	/**
	 * Group class name of each attachment, keyed by attachment ID.
	 *
	 * @since 3.0.0
	 * @var array|null
	 */
	private $filter_labels = null;

	/**
	 * Rendered link icon markup.
	 *
	 * The icon is the same for every image, and rendering it can be expensive for
	 * SVG icons, so it is built once per widget instance.
	 *
	 * @since 3.0.0
	 * @var string|null
	 */
	private $link_icon_html = null;

	/**
	 * Retrieve image gallery widget name.
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return parent::get_widget_name( 'Image_Gallery' );
	}

	/**
	 * Retrieve image gallery widget title.
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return parent::get_widget_title( 'Image_Gallery' );
	}

	/**
	 * Retrieve image gallery widget icon.
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return parent::get_widget_icon( 'Image_Gallery' );
	}

	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the Image Gallery widget belongs to.
	 *
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return parent::get_widget_keywords( 'Image_Gallery' );
	}

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

	/**
	 * Whether the gallery renders filters.
	 *
	 * `filter_enable` is kept when the gallery type is switched back to standard,
	 * so both have to be checked. Everything that depends on filters being present
	 * asks here, to keep the markup, the classes and the enqueued assets in step.
	 *
	 * @since 3.0.0
	 * @access protected
	 * @param array $settings Widget settings.
	 * @return bool
	 */
	protected function has_filters( $settings ) {
		return 'filterable' === $settings['gallery_type'] && 'yes' === $settings['filter_enable'];
	}

	/**
	 * Retrieve the list of scripts the image gallery widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends() {
		if ( \Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
			return [
				'imagesloaded',
				'jquery-fancybox',
				'tilt',
				'pp-justified-gallery',
				'pp-image-gallery',
			];
		}

		$settings = $this->get_settings_for_display();
		$scripts = [];

		if ( 'masonry' === $settings['layout'] || $this->has_filters( $settings ) || 'yes' === $settings['pagination'] ) {
			array_push( $scripts, 'imagesloaded', 'pp-image-gallery' );
		}

		if ( 'file' === $settings['link_to'] && 'no' !== $settings['open_lightbox'] ) {
			if ( 'fancybox' !== $settings['lightbox_library'] ) {
				array_push( $scripts, 'swiper' );
			}

			if ( 'fancybox' === $settings['lightbox_library'] ) {
				array_push( $scripts, 'jquery-fancybox', 'pp-image-gallery' );
			}
		}

		if ( 'yes' === $settings['tilt'] ) {
			array_push( $scripts, 'tilt', 'pp-image-gallery' );
		}

		if ( 'justified' === $settings['layout'] ) {
			array_push( $scripts, 'pp-justified-gallery', 'imagesloaded', 'pp-image-gallery' );
		}

		return $scripts;
	}

	/**
	 * Retrieve the list of styles the image gallery widget depended on.
	 *
	 * Used to set styles dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_style_depends() {
		if ( \Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode() ) {
			return [
				'fancybox',
				'pp-filter-animations',
				'pp-image-filters',
				'widget-pp-image-gallery'
			];
		}

		$settings = $this->get_settings_for_display();
		$styles = [ 'widget-pp-image-gallery' ];

		if ( $this->has_filters( $settings ) && 'none' !== $settings['pointer'] ) {
			array_push( $styles, 'pp-filter-animations' );
		}

		$has_filter = ( ! empty( $settings['thumbnail_filter'] ) && 'normal' !== $settings['thumbnail_filter'] )
			|| ( ! empty( $settings['thumbnail_hover_filter'] ) && 'normal' !== $settings['thumbnail_hover_filter'] );

		if ( $has_filter ) {
			array_push( $styles, 'pp-image-filters' );
		}

		if ( 'file' === $settings['link_to'] && 'no' !== $settings['open_lightbox'] ) {
			if ( 'fancybox' !== $settings['lightbox_library'] ) {
				array_push( $styles, 'e-swiper' );
			}

			if ( 'fancybox' === $settings['lightbox_library'] ) {
				array_push( $styles, 'fancybox' );
			}
		}

		return $styles;
	}

	public function has_widget_inner_wrapper(): bool {
		return ! PP_Helper::is_feature_active( 'e_optimized_markup' );
	}


	/**
	 * Register image gallery widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 2.0.3
	 * @access protected
	 */
	protected function register_controls() {
		/* Content Tab */
		$this->register_content_gallery_controls();
		$this->register_content_filter_controls();
		$this->register_content_settings_controls();
		$this->register_content_pagination_controls();

		/* Style Tab */
		$this->register_style_layout_controls();
		$this->register_style_thumbnails_controls();
		$this->register_style_content_controls();
		$this->register_style_link_icon_controls();
		$this->register_style_overlay_controls();
		$this->register_style_lightbox_controls();
		$this->register_style_filter_controls();
		$this->register_style_pagination_controls();
	}

	/**
	 * Condition for controls that only apply to a filterable gallery with its filters enabled.
	 *
	 * @since 3.0.0
	 * @access protected
	 * @param array $extra Additional condition keys to merge in.
	 * @return array
	 */
	protected function filter_condition( $extra = [] ) {
		return array_merge(
			[
				'gallery_type'  => 'filterable',
				'filter_enable' => 'yes',
			],
			$extra
		);
	}

	/**
	 * Condition for controls that only apply when images open in the Fancybox lightbox.
	 *
	 * @since 3.0.0
	 * @access protected
	 * @param array $extra Additional condition keys to merge in.
	 * @return array
	 */
	protected function fancybox_condition( $extra = [] ) {
		return array_merge(
			[
				'link_to'          => 'file',
				'open_lightbox!'   => 'no',
				'lightbox_library' => 'fancybox',
			],
			$extra
		);
	}

	/**
	 * Register gallery controls for content tab
	 */
	protected function register_content_gallery_controls() {
		/**
		 * Content Tab: Gallery
		 */
		$this->start_controls_section(
			'section_gallery',
			[
				'label' => esc_html__( 'Gallery', 'powerpack' ),
			]
		);

		$this->add_control(
			'gallery_type',
			[
				'label'   => esc_html__( 'Gallery Type', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'filterable',
				'options' => [
					'standard'   => esc_html__( 'Standard', 'powerpack' ),
					'filterable' => esc_html__( 'Filterable', 'powerpack' ),
				],
			]
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'image_group',
			[
				'label'   => esc_html__( 'Add Images', 'powerpack' ),
				'type'    => Controls_Manager::GALLERY,
				'dynamic' => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'filter_label',
			[
				'label'       => esc_html__( 'Filter Label', 'powerpack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'placeholder' => '',
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'filter_id',
			[
				'label'       => esc_html__( 'Filter ID', 'powerpack' ),
				'description' => esc_html__( 'To filter the gallery using URL parameters, specify an ID here', 'powerpack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => '',
				'placeholder' => '',
				'ai'          => [
					'active' => false,
				],
			]
		);

		$this->add_control(
			'gallery_images',
			[
				'label'       => esc_html__( 'Gallery Images', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'title_field' => '',
				'separator'   => 'before',
				'condition'   => [
					'gallery_type' => 'filterable',
				],
			]
		);

		$this->add_control(
			'image_group_standard',
			[
				'label'     => esc_html__( 'Add Images', 'powerpack' ),
				'type'      => Controls_Manager::GALLERY,
				'dynamic'   => [
					'active' => true,
				],
				'separator' => 'before',
				'condition' => [
					'gallery_type' => 'standard',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'    => 'image',
				'label'   => esc_html__( 'Image Size', 'powerpack' ),
				'default' => 'full',
				'exclude' => [ 'custom' ],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register filter controls for content tab
	 */
	protected function register_content_filter_controls() {
		/**
		 * Content Tab: Filter
		 */
		$this->start_controls_section(
			'section_filter',
			[
				'label'     => esc_html__( 'Filter', 'powerpack' ),
				'condition' => [
					'gallery_type' => 'filterable',
				],
			]
		);

		$this->add_control(
			'filter_enable',
			[
				'label'     => esc_html__( 'Enable Filter', 'powerpack' ),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => '',
				'condition' => [
					'gallery_type' => 'filterable',
				],
			]
		);

		$this->add_control(
			'filter_all_label',
			[
				'label'     => esc_html__( '"All" Filter Label', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'All', 'powerpack' ),
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'default_filter_select',
			[
				'label'   => esc_html__( 'Default Filter', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'first',
				'options' => [
					'first'  => esc_html__( 'First', 'powerpack' ),
					'custom' => esc_html__( 'Custom', 'powerpack' ),
				],
				'condition'    => $this->filter_condition(),
			]
		);

		$this->add_control(
			'default_filter',
			[
				'label'     => esc_html__( 'Default Filter Name', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => '',
				'ai'        => [
					'active' => false,
				],
				'condition' => $this->filter_condition(
					[
						'default_filter_select' => 'custom',
					]
				),
			]
		);

		$this->add_control(
			'responsive_support',
			[
				'label'       => esc_html__( 'Responsive Support', 'powerpack' ),
				'description' => esc_html__( 'Enable this option to display filters in a dropdown on responsive devices.', 'powerpack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'none',
				'options'     => [
					'none'   => esc_html__( 'None', 'powerpack' ),
					'tablet' => esc_html__( 'Tablet & Mobile', 'powerpack' ),
					'mobile' => esc_html__( 'Mobile', 'powerpack' ),
				],
				'condition'   => $this->filter_condition(),
			]
		);

		$this->add_responsive_control(
			'filter_alignment',
			[
				'label'       => esc_html__( 'Align', 'powerpack' ),
				'label_block' => false,
				'type'        => Controls_Manager::CHOOSE,
				'default'     => 'left',
				'options'     => [
					'left'   => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'  => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'selectors'   => [
					'{{WRAPPER}} .pp-gallery-filters' => 'text-align: {{VALUE}};',
				],
				'condition'   => $this->filter_condition(),
			]
		);

		$this->add_control(
			'pointer',
			[
				'label'          => esc_html__( 'Pointer', 'powerpack' ),
				'type'           => Controls_Manager::SELECT,
				'default'        => 'underline',
				'options'        => [
					'none'        => esc_html__( 'None', 'powerpack' ),
					'underline'   => esc_html__( 'Underline', 'powerpack' ),
					'overline'    => esc_html__( 'Overline', 'powerpack' ),
					'double-line' => esc_html__( 'Double Line', 'powerpack' ),
					'framed'      => esc_html__( 'Framed', 'powerpack' ),
					'background'  => esc_html__( 'Background', 'powerpack' ),
					'text'        => esc_html__( 'Text', 'powerpack' ),
				],
				'style_transfer' => true,
				'condition'      => $this->filter_condition(),
			]
		);

		$this->add_control(
			'animation_line',
			[
				'label'     => esc_html__( 'Animation', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'fade',
				'options'   => [
					'fade'     => 'Fade',
					'slide'    => 'Slide',
					'grow'     => 'Grow',
					'drop-in'  => 'Drop In',
					'drop-out' => 'Drop Out',
					'none'     => 'None',
				],
				'condition' => $this->filter_condition(
					[
						'pointer' => [ 'underline', 'overline', 'double-line' ],
					]
				),
			]
		);

		$this->add_control(
			'animation_framed',
			[
				'label'     => esc_html__( 'Animation', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'fade',
				'options'   => [
					'fade'    => 'Fade',
					'grow'    => 'Grow',
					'shrink'  => 'Shrink',
					'draw'    => 'Draw',
					'corners' => 'Corners',
					'none'    => 'None',
				],
				'condition' => $this->filter_condition(
					[
						'pointer' => 'framed',
					]
				),
			]
		);

		$this->add_control(
			'animation_background',
			[
				'label'     => esc_html__( 'Animation', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'fade',
				'options'   => [
					'fade' => 'Fade',
					'grow' => 'Grow',
					'shrink' => 'Shrink',
					'sweep-left' => 'Sweep Left',
					'sweep-right' => 'Sweep Right',
					'sweep-up' => 'Sweep Up',
					'sweep-down' => 'Sweep Down',
					'shutter-in-vertical' => 'Shutter In Vertical',
					'shutter-out-vertical' => 'Shutter Out Vertical',
					'shutter-in-horizontal' => 'Shutter In Horizontal',
					'shutter-out-horizontal' => 'Shutter Out Horizontal',
					'none' => 'None',
				],
				'condition' => $this->filter_condition(
					[
						'pointer' => 'background',
					]
				),
			]
		);

		$this->add_control(
			'animation_text',
			[
				'label'     => esc_html__( 'Animation', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'grow',
				'options'   => [
					'grow'   => 'Grow',
					'shrink' => 'Shrink',
					'sink'   => 'Sink',
					'float'  => 'Float',
					'skew'   => 'Skew',
					'rotate' => 'Rotate',
					'none'   => 'None',
				],
				'condition' => $this->filter_condition(
					[
						'pointer' => 'text',
					]
				),
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_settings_controls() {
		/**
		 * Content Tab: Settings
		 */
		$this->start_controls_section(
			'section_settings',
			[
				'label' => esc_html__( 'Settings', 'powerpack' ),
			]
		);

		$this->add_control(
			'layout',
			[
				'label'   => esc_html__( 'Layout', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'grid',
				'options' => [
					'grid'      => esc_html__( 'Grid', 'powerpack' ),
					'masonry'   => esc_html__( 'Masonry', 'powerpack' ),
					'justified' => esc_html__( 'Justified', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'row_height',
			[
				'label'     => esc_html__( 'Row Height', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 50,
						'max' => 500,
					],
				],
				'default'   => [
					'size' => 120,
				],
				'condition' => [
					'layout' => 'justified',
				],
			]
		);

		$this->add_control(
			'last_row',
			[
				'label'     => esc_html__( 'Last Row', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'justify',
				'options'   => [
					'justify'   => esc_html__( 'Justify', 'powerpack' ),
					'nojustify' => esc_html__( 'No Justify', 'powerpack' ),
					'hide'      => esc_html__( 'Hide', 'powerpack' ),
				],
				'condition' => [
					'layout' => 'justified',
				],
			]
		);

		$this->add_responsive_control(
			'columns',
			[
				'label'              => esc_html__( 'Columns', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => '3',
				'tablet_default'     => '2',
				'mobile_default'     => '1',
				'options'            => [
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
					'7' => '7',
					'8' => '8',
				],
				'prefix_class'       => 'elementor-grid%s-',
				'selectors'          => [
					// Exposed as a CSS var so the masonry script can read the current-device
					// column count reliably (resolved by media queries, no layout timing issues).
					'{{WRAPPER}} .pp-image-gallery' => '--pp-gallery-columns: {{VALUE}};',
				],
				'condition'          => [
					'layout!' => 'justified',
				],
			]
		);

		$this->add_control(
			'equal_height',
			[
				'label'     => esc_html__( 'Equal Height', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'no',
				'options'   => [
					'yes' => esc_html__( 'Yes', 'powerpack' ),
					'no'  => esc_html__( 'No', 'powerpack' ),
				],
				'condition' => [
					'layout' => 'grid',
				],
			]
		);

		$this->add_responsive_control(
			'custom_height',
			[
				'label'      => esc_html__( 'Custom Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [
					'size' => 300,
					'unit' => 'px',
				],
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'step' => 1,
						'min'  => 100,
						'max' => 800,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-equal-height .pp-gallery-slide-image' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [
					'layout' => 'grid',
					'equal_height' => 'yes',
				],
			]
		);

		$this->add_control(
			'image_fit',
			[
				'label'     => esc_html__( 'Image Fit', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'cover',
				'options'   => [
					'cover'      => esc_html__( 'Cover', 'powerpack' ),
					'contain'    => esc_html__( 'Contain', 'powerpack' ),
					'scale-down' => esc_html__( 'Scale Down', 'powerpack' ),
					'fill'       => esc_html__( 'Fill', 'powerpack' ),
					'none'       => esc_html__( 'None', 'powerpack' ),
				],
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-equal-height .pp-gallery-slide-image' => 'object-fit: {{VALUE}};',
				],
				'condition' => [
					'layout' => 'grid',
					'equal_height' => 'yes',
				],
			]
		);

		$this->add_control(
			'ordering',
			[
				'label'   => esc_html__( 'Ordering', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					''       => esc_html__( 'Default', 'powerpack' ),
					'date'   => esc_html__( 'Date', 'powerpack' ),
					'random' => esc_html__( 'Random', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'heading_image_content',
			[
				'label'     => esc_html__( 'Image Content', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'caption',
			[
				'label'       => esc_html__( 'Image Content', 'powerpack' ),
				'description' => esc_html__( 'Show image caption, title or description', 'powerpack' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'show',
				'options'     => [
					'show' => esc_html__( 'Show', 'powerpack' ),
					'hide' => esc_html__( 'Hide', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'caption_type',
			[
				'label'     => esc_html__( 'Title', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'caption',
				'options'   => [
					'title'       => esc_html__( 'Title', 'powerpack' ),
					'caption'     => esc_html__( 'Caption', 'powerpack' ),
					'alt'         => esc_html__( 'Alt Text', 'powerpack' ),
					'description' => esc_html__( 'Description', 'powerpack' ),
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'description',
			[
				'label'     => esc_html__( 'Description', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'caption',
				'options'   => [
					''            => esc_html__( 'None', 'powerpack' ),
					'title'       => esc_html__( 'Title', 'powerpack' ),
					'caption'     => esc_html__( 'Caption', 'powerpack' ),
					'alt'         => esc_html__( 'Alt', 'powerpack' ),
					'description' => esc_html__( 'Description', 'powerpack' ),
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_position',
			[
				'label'     => esc_html__( 'Content Position', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'over_image',
				'options'   => [
					'over_image'  => esc_html__( 'Over Image', 'powerpack' ),
					'below_image' => esc_html__( 'Below Image', 'powerpack' ),
				],
				'condition' => [
					'layout!' => 'justified',
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'heading_link',
			[
				'label'     => esc_html__( 'Link', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'link_to',
			[
				'label'   => esc_html__( 'Link to', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'file',
				'options' => [
					'none'       => esc_html__( 'None', 'powerpack' ),
					'file'       => esc_html__( 'Media File', 'powerpack' ),
					'custom'     => esc_html__( 'Custom URL', 'powerpack' ),
					'attachment' => esc_html__( 'Attachment Page', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'important_note',
			[
				'label'           => '',
				'type'            => Controls_Manager::RAW_HTML,
				'raw'             => esc_html__( 'Add custom link in media uploader.', 'powerpack' ),
				'content_classes' => 'pp-editor-info',
				'condition'       => [
					'link_to' => 'custom',
				],
			]
		);

		$this->add_control(
			'link_target',
			[
				'label'      => esc_html__( 'Link Target', 'powerpack' ),
				'type'       => Controls_Manager::SELECT,
				'default'    => '_blank',
				'options'    => [
					'_self'  => esc_html__( 'Same Window', 'powerpack' ),
					'_blank' => esc_html__( 'New Window', 'powerpack' ),
				],
				'conditions' => [
					'relation' => 'or',
					'terms'    => [
						[
							'name'     => 'link_to',
							'operator' => '==',
							'value'    => 'custom',
						],
						[
							'name'     => 'link_to',
							'operator' => '==',
							'value'    => 'attachment',
						],
						[
							'relation' => 'and',
							'terms'    => [
								[
									'name'     => 'link_to',
									'operator' => '==',
									'value'    => 'file',
								],
								[
									'name'     => 'open_lightbox',
									'operator' => '==',
									'value'    => 'no',
								],
							],
						],
					],
				],
			]
		);

		$this->add_control(
			'select_link_icon',
			[
				'label'            => esc_html__( 'Link Icon', 'powerpack' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'link_icon',
				'condition'        => [
					'link_to!' => 'none',
				],
			]
		);

		$this->add_control(
			'heading_lightbox',
			[
				'label'     => esc_html__( 'Lightbox', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'link_to' => 'file',
				],
			]
		);

		$this->add_control(
			'open_lightbox',
			[
				'label'     => esc_html__( 'Lightbox', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'default',
				'options'   => [
					'default' => esc_html__( 'Default', 'powerpack' ),
					'yes'     => esc_html__( 'Yes', 'powerpack' ),
					'no'      => esc_html__( 'No', 'powerpack' ),
				],
				'condition' => [
					'link_to' => 'file',
				],
			]
		);

		$this->add_control(
			'lightbox_library',
			[
				'label'              => esc_html__( 'Lightbox Library', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => '',
				'options'            => [
					''         => esc_html__( 'Elementor', 'powerpack' ),
					'fancybox' => esc_html__( 'Fancybox', 'powerpack' ),
				],
				'frontend_available' => true,
				'condition'          => [
					'link_to'        => 'file',
					'open_lightbox!' => 'no',
				],
			]
		);

		$this->add_control(
			'lightbox_caption',
			[
				'type'      => Controls_Manager::SELECT,
				'label'     => esc_html__( 'Lightbox Title', 'powerpack' ),
				'default'   => '',
				'options'   => [
					''            => esc_html__( 'None', 'powerpack' ),
					'caption'     => esc_html__( 'Caption', 'powerpack' ),
					'title'       => esc_html__( 'Title', 'powerpack' ),
					'description' => esc_html__( 'Description', 'powerpack' ),
				],
				'condition' => [
					'link_to'        => 'file',
					'open_lightbox!' => 'no',
				],
			]
		);

		$this->add_control(
			'lightbox_description',
			[
				'type'      => Controls_Manager::SELECT,
				'label'     => esc_html__( 'Lightbox Description', 'powerpack' ),
				'default'   => '',
				'options'   => [
					''            => esc_html__( 'None', 'powerpack' ),
					'caption'     => esc_html__( 'Caption', 'powerpack' ),
					'title'       => esc_html__( 'Title', 'powerpack' ),
					'description' => esc_html__( 'Description', 'powerpack' ),
				],
				'condition' => [
					'link_to'           => 'file',
					'open_lightbox!'    => 'no',
					'lightbox_library!' => 'fancybox',
				],
			]
		);

		$this->add_control(
			'loop',
			[
				'label'              => esc_html__( 'Loop', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => 'yes',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'arrows',
			[
				'label'              => esc_html__( 'Arrows', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => 'yes',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'slides_counter',
			[
				'label'              => esc_html__( 'Slides Counter', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => 'yes',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'keyboard',
			[
				'label'              => esc_html__( 'Keyboard Navigation', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => 'yes',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'toolbar',
			[
				'label'              => esc_html__( 'Toolbar', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => 'yes',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'toolbar_buttons',
			[
				'label'              => esc_html__( 'Toolbar Buttons', 'powerpack' ),
				'type'               => Controls_Manager::SELECT2,
				'default'            => [ 'zoom', 'slideShow', 'thumbs', 'close' ],
				'options'            => [
					'zoom'       => esc_html__( 'Zoom', 'powerpack' ),
					'share'      => esc_html__( 'Share', 'powerpack' ),
					'slideShow'  => esc_html__( 'SlideShow', 'powerpack' ),
					'fullScreen' => esc_html__( 'Full Screen', 'powerpack' ),
					'download'   => esc_html__( 'Download', 'powerpack' ),
					'thumbs'     => esc_html__( 'Thumbs', 'powerpack' ),
					'close'      => esc_html__( 'Close', 'powerpack' ),
				],
				'multiple'           => true,
				'condition'          => $this->fancybox_condition(
					[
						'toolbar' => 'yes',
					]
				),
			]
		);

		$this->add_control(
			'thumbs_auto_start',
			[
				'label'              => esc_html__( 'Thumbs Auto Start', 'powerpack' ),
				'description'        => esc_html__( 'Display thumbnails on lightbox opening', 'powerpack' ),
				'type'               => Controls_Manager::SWITCHER,
				'default'            => '',
				'label_on'           => esc_html__( 'Yes', 'powerpack' ),
				'label_off'          => esc_html__( 'No', 'powerpack' ),
				'return_value'       => 'yes',
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'thumbs_position',
			[
				'label'              => esc_html__( 'Thumbs Position', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => '',
				'options'            => [
					''       => esc_html__( 'Default', 'powerpack' ),
					'bottom' => esc_html__( 'Bottom', 'powerpack' ),
				],
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_animation',
			[
				'label'              => esc_html__( 'Animation', 'powerpack' ),
				'description'        => esc_html__( 'Open/Close animation', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'zoom',
				'options'            => [
					''            => esc_html__( 'None', 'powerpack' ),
					'fade'        => esc_html__( 'Fade', 'powerpack' ),
					'zoom'        => esc_html__( 'Zoom', 'powerpack' ),
					'zoom-in-out' => esc_html__( 'Zoom in Out', 'powerpack' ),
				],
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'transition_effect',
			[
				'label'              => esc_html__( 'Transition Effect', 'powerpack' ),
				'description'        => esc_html__( 'Transition effect between slides', 'powerpack' ),
				'type'               => Controls_Manager::SELECT,
				'default'            => 'fade',
				'options'            => [
					''            => esc_html__( 'None', 'powerpack' ),
					'fade'        => esc_html__( 'Fade', 'powerpack' ),
					'slide'       => esc_html__( 'Slide', 'powerpack' ),
					'circular'    => esc_html__( 'Circular', 'powerpack' ),
					'tube'        => esc_html__( 'Tube', 'powerpack' ),
					'zoom-in-out' => esc_html__( 'Zoom in Out', 'powerpack' ),
					'rotate'      => esc_html__( 'Rotate', 'powerpack' ),
				],
				'condition'          => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'global_lightbox',
			[
				'type'        => Controls_Manager::SELECT,
				'label'       => esc_html__( 'Global Lightbox', 'powerpack' ),
				'description' => esc_html__( 'Enabling this option will show images from all image gallery widgets in lightbox', 'powerpack' ),
				'default'     => 'no',
				'options'     => [
					'yes' => esc_html__( 'Yes', 'powerpack' ),
					'no'  => esc_html__( 'No', 'powerpack' ),
				],
				'condition'   => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'heading_tilt',
			[
				'label'     => esc_html__( 'Tilt Effect', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'tilt',
			[
				'label'   => esc_html__( 'Tilt', 'powerpack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => '',
			]
		);

		$this->add_control(
			'tilt_axis',
			[
				'label'     => esc_html__( 'Axis', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => [
					''  => esc_html__( 'Both', 'powerpack' ),
					'x' => esc_html__( 'X Axis', 'powerpack' ),
					'y' => esc_html__( 'Y Axis', 'powerpack' ),
				],
				'condition' => [
					'tilt' => 'yes',
				],
			]
		);

		$this->add_control(
			'tilt_amount',
			[
				'label'     => esc_html__( 'Amount', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 10,
						'max' => 50,
					],
				],
				'default'   => [
					'size' => 20,
				],
				'condition' => [
					'tilt' => 'yes',
				],
			]
		);

		$this->add_control(
			'tilt_scale',
			[
				'label'     => esc_html__( 'Scale', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 1,
						'max'  => 1.4,
						'step' => 0.01,
					],
				],
				'default'   => [
					'size' => 1.06,
				],
				'condition' => [
					'tilt' => 'yes',
				],
			]
		);

		$this->add_control(
			'tilt_caption_depth',
			[
				'label'     => esc_html__( 'Depth', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'default'   => [
					'size' => 20,
				],
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-content' => 'transform: translateZ({{SIZE}}px);',
				],
				'condition' => [
					'tilt' => 'yes',
				],
			]
		);

		$this->add_control(
			'tilt_speed',
			[
				'label'     => esc_html__( 'Speed', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 100,
						'max'  => 1000,
						'step' => 20,
					],
				],
				'default'   => [
					'size' => 800,
				],
				'condition' => [
					'tilt' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_pagination_controls() {
		/**
		 * Content Tab: Load More Button
		 */
		$this->start_controls_section(
			'section_pagination',
			[
				'label' => esc_html__( 'Load More Button', 'powerpack' ),
			]
		);

		$this->add_control(
			'pagination',
			[
				'label'   => esc_html__( 'Load More Button', 'powerpack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => '',
			]
		);

		$this->add_control(
			'images_per_page',
			[
				'label'     => esc_html__( 'Images Per Page', 'powerpack' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 6,
				'min'       => 1,
				'step'      => 1,
				'condition' => [
					'pagination' => 'yes',
				],
			]
		);

		$this->add_control(
			'load_more_text',
			[
				'label'     => esc_html__( 'Button Text', 'powerpack' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'Load More', 'powerpack' ),
				'condition' => [
					'pagination' => 'yes',
				],
			]
		);

		$this->add_control(
			'select_load_more_icon',
			[
				'label'            => esc_html__( 'Button Icon', 'powerpack' ),
				'type'             => Controls_Manager::ICONS,
				'fa4compatibility' => 'load_more_icon',
				'condition'        => [
					'pagination' => 'yes',
				],
			]
		);

		$this->add_control(
			'button_icon_position',
			[
				'label'     => esc_html__( 'Icon Position', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'after',
				'options'   => [
					'after'  => esc_html__( 'After', 'powerpack' ),
					'before' => esc_html__( 'Before', 'powerpack' ),
				],
				'condition' => [
					'pagination' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'load_more_align',
			[
				'label'     => esc_html__( 'Alignment', 'powerpack' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'left'   => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'  => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default'   => 'center',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-pagination' => 'text-align: {{VALUE}};',
				],
				'condition' => [
					'pagination' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register layout controls for style tab
	 */
	protected function register_style_layout_controls() {
		/**
		 * Style Tab: Layout
		 */
		$this->start_controls_section(
			'section_layout_style',
			[
				'label' => esc_html__( 'Layout', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'columns_gap',
			[
				'label'          => esc_html__( 'Columns Gap', 'powerpack' ),
				'type'           => Controls_Manager::SLIDER,
				'size_units'     => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'default'        => [
					'size' => 20,
					'unit' => 'px',
				],
				'range'          => [
					'px' => [
						'max' => 100,
					],
				],
				'tablet_default' => [
					'unit' => 'px',
				],
				'mobile_default' => [
					'unit' => 'px',
				],
				'selectors'      => [
					'{{WRAPPER}} .pp-image-gallery' => '--grid-column-gap: {{SIZE}}{{UNIT}};',
				],
				'condition'      => [
					'layout!' => 'justified',
				],
			]
		);

		$this->add_responsive_control(
			'rows_gap',
			[
				'label'          => esc_html__( 'Rows Gap', 'powerpack' ),
				'type'           => Controls_Manager::SLIDER,
				'size_units'     => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'default'        => [
					'size' => 20,
					'unit' => 'px',
				],
				'range'          => [
					'px' => [
						'max' => 100,
					],
				],
				'tablet_default' => [
					'unit' => 'px',
				],
				'mobile_default' => [
					'unit' => 'px',
				],
				'selectors'      => [
					'{{WRAPPER}} .pp-image-gallery' => '--grid-row-gap: {{SIZE}}{{UNIT}};',
				],
				'condition'      => [
					'layout!' => 'justified',
				],
			]
		);

		$this->add_control(
			'image_spacing',
			[
				'label'          => esc_html__( 'Image Spacing', 'powerpack' ),
				'type'           => Controls_Manager::SLIDER,
				'default'        => [
					'size' => 10,
				],
				'range'          => [
					'px' => [
						'max' => 100,
					],
				],
				'condition'      => [
					'layout' => 'justified',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_thumbnails_controls() {
		/**
		 * Style Tab: Thumbnails
		 */
		$this->start_controls_section(
			'section_thumbnails_style',
			[
				'label' => esc_html__( 'Thumbnails', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'image_align',
			[
				'label'       => esc_html__( 'Alignment', 'powerpack' ),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,
				'options'     => [
					'left'    => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center'  => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'   => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default'     => '',
				'selectors'   => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_image_filter_style' );

		$this->start_controls_tab(
			'tab_image_filter_normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'image_border',
				'label'       => esc_html__( 'Border', 'powerpack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .pp-image-gallery-thumbnail-wrap',
			]
		);

		$this->add_control(
			'image_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'image_scale',
			[
				'label'     => esc_html__( 'Scale', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 1,
						'max'  => 2,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail img' => 'transform: scale({{SIZE}});',
				],
			]
		);

		$this->add_control(
			'image_opacity',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'max'  => 1,
						'min'  => 0,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail img' => 'opacity: {{SIZE}}',
				],
			]
		);

		$this->add_control(
			'thumbnail_filter',
			[
				'label'        => esc_html__( 'Image Filter', 'powerpack' ),
				'type'         => Controls_Manager::SELECT,
				'default'      => 'normal',
				'options'      => PP_Helper::get_image_filters(),
				'prefix_class' => 'pp-ins-',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_image_filter_hover',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_control(
			'image_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-image-gallery-thumbnail-wrap' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'image_hover_scale',
			[
				'label'     => esc_html__( 'Scale', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 1,
						'max'  => 2,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail-wrap:hover .pp-image-gallery-thumbnail img' => 'transform: scale({{SIZE}});',
				],
			]
		);

		$this->add_control(
			'image_hover_opacity',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'max'  => 1,
						'min'  => 0,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-gallery-thumbnail-wrap:hover .pp-image-gallery-thumbnail img' => 'opacity: {{SIZE}}',
				],
			]
		);

		$this->add_control(
			'thumbnail_hover_filter',
			[
				'label'        => esc_html__( 'Image Filter', 'powerpack' ),
				'type'         => Controls_Manager::SELECT,
				'default'      => '',
				'options'      => PP_Helper::get_image_filters( true ),
				'prefix_class' => 'pp-ins-hover-',
			]
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_style_content_controls() {
		/**
		 * Style Tab: Content
		 */
		$this->start_controls_section(
			'section_content_style',
			[
				'label'     => esc_html__( 'Content', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_vertical_align',
			[
				'label'                => esc_html__( 'Vertical Align', 'powerpack' ),
				'type'                 => Controls_Manager::CHOOSE,
				'label_block'          => false,
				'toggle'               => false,
				'default'              => 'bottom',
				'options'              => [
					'top'    => [
						'title' => esc_html__( 'Top', 'powerpack' ),
						'icon'  => 'eicon-v-align-top',
					],
					'middle' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-v-align-middle',
					],
					'bottom' => [
						'title' => esc_html__( 'Bottom', 'powerpack' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'selectors_dictionary' => [
					'top'    => 'flex-start',
					'middle' => 'center',
					'bottom' => 'flex-end',
				],
				'selectors'            => [
					'{{WRAPPER}} .pp-gallery-image-content'   => 'justify-content: {{VALUE}};',
				],
				'condition'            => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_horizontal_align',
			[
				'label'                => esc_html__( 'Horizontal Align', 'powerpack' ),
				'type'                 => Controls_Manager::CHOOSE,
				'label_block'          => false,
				'toggle'               => false,
				'options'              => [
					'left'    => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center'  => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'   => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-h-align-right',
					],
					'justify' => [
						'title' => esc_html__( 'Justify', 'powerpack' ),
						'icon'  => 'eicon-h-align-stretch',
					],
				],
				'default'              => 'left',
				'selectors_dictionary' => [
					'left'    => 'flex-start',
					'center'  => 'center',
					'right'   => 'flex-end',
					'justify' => 'stretch',
				],
				'selectors'            => [
					'{{WRAPPER}} .pp-gallery-image-content' => 'align-items: {{VALUE}};',
				],
				'condition'            => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_text_align',
			[
				'label'       => esc_html__( 'Text Align', 'powerpack' ),
				'type'        => Controls_Manager::CHOOSE,
				'label_block' => false,
				'options'     => [
					'left'   => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'default'     => 'center',
				'selectors'   => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'text-align: {{VALUE}};',
				],
				'condition'   => [
					'caption'                  => 'show',
					'caption_horizontal_align' => 'justify',
				],
			]
		);

		$this->add_responsive_control(
			'caption_margin',
			[
				'label'      => esc_html__( 'Margin', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'caption' => 'show',
				],
			]
		);

		$this->add_responsive_control(
			'caption_padding',
			[
				'label'      => esc_html__( 'Padding', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_hover_effect',
			[
				'label'        => esc_html__( 'Hover Effect', 'powerpack' ),
				'type'         => Controls_Manager::SELECT,
				'default'      => '',
				'options'      => [
					''                  => esc_html__( 'None', 'powerpack' ),
					'fade-in'           => esc_html__( 'Fade In', 'powerpack' ),
					'fade-out'          => esc_html__( 'Fade Out', 'powerpack' ),
					'fade-from-top'     => esc_html__( 'Fade From Top', 'powerpack' ),
					'fade-from-bottom'  => esc_html__( 'Fade From Bottom', 'powerpack' ),
					'fade-from-left'    => esc_html__( 'Fade From Left', 'powerpack' ),
					'fade-from-right'   => esc_html__( 'Fade From Right', 'powerpack' ),
					'slide-from-top'    => esc_html__( 'Slide From Top', 'powerpack' ),
					'slide-from-bottom' => esc_html__( 'Slide From Bottom', 'powerpack' ),
					'slide-from-left'   => esc_html__( 'Slide From Left', 'powerpack' ),
					'slide-from-right'  => esc_html__( 'Slide From Right', 'powerpack' ),
					'fade-to-top'       => esc_html__( 'Fade To Top', 'powerpack' ),
					'fade-to-bottom'    => esc_html__( 'Fade To Bottom', 'powerpack' ),
					'fade-to-left'      => esc_html__( 'Fade To Left', 'powerpack' ),
					'fade-to-right'     => esc_html__( 'Fade To Right', 'powerpack' ),
					'slide-to-top'      => esc_html__( 'Slide To Top', 'powerpack' ),
					'slide-to-bottom'   => esc_html__( 'Slide To Bottom', 'powerpack' ),
					'slide-to-left'     => esc_html__( 'Slide To Left', 'powerpack' ),
					'slide-to-right'    => esc_html__( 'Slide To Right', 'powerpack' ),
				],
				'prefix_class' => 'pp-caption-hover-effect-',
				'condition'    => [
					'caption'          => 'show',
					'caption_position' => 'over_image',
					'tilt!'            => 'yes',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_caption_style' );

		$this->start_controls_tab(
			'tab_caption_normal',
			[
				'label'     => esc_html__( 'Normal', 'powerpack' ),
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'caption_border',
				'label'       => esc_html__( 'Border', 'powerpack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .pp-gallery-image-caption',
				'condition'   => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_opacity_normal',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-image-caption' => 'opacity: {{SIZE}};',
				],
				'condition' => [
					'caption' => 'show',
					'tilt'    => 'yes',
				],
			]
		);

		$this->add_control(
			'heading_title',
			[
				'label'     => esc_html__( 'Title', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-image-title' => 'color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'caption_typography',
				'label'     => esc_html__( 'Typography', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-gallery-image-title',
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'      => 'caption_text_shadow',
				'label'     => esc_html__( 'Text Shadow', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-gallery-image-title',
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'heading_description',
			[
				'label'     => esc_html__( 'Description', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'caption' => 'show',
					'description!' => '',
				],
			]
		);

		$this->add_control(
			'description_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-image-description' => 'color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
					'description!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'description_typography',
				'label'     => esc_html__( 'Typography', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-gallery-image-description',
				'condition' => [
					'caption' => 'show',
					'description!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'      => 'description_text_shadow',
				'label'     => esc_html__( 'Text Shadow', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-gallery-image-description',
				'condition' => [
					'caption' => 'show',
					'description!' => '',
				],
			]
		);

		$this->add_control(
			'description_spacing',
			[
				'label'      => esc_html__( 'Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-image-description' => 'margin-top: {{SIZE}}{{UNIT}}',
				],
				'condition' => [
					'caption' => 'show',
					'description!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_caption_hover',
			[
				'label'     => esc_html__( 'Hover', 'powerpack' ),
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_bg_color_hover',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-caption' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_color_hover',
			[
				'label'     => esc_html__( 'Title Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-title' => 'color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'description_color_hover',
			[
				'label'     => esc_html__( 'Description Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-description' => 'color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-caption' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'      => 'caption_text_shadow_hover',
				'label'     => esc_html__( 'Text Shadow', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-caption',
				'condition' => [
					'caption' => 'show',
				],
			]
		);

		$this->add_control(
			'caption_opacity_hover',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-caption' => 'opacity: {{SIZE}};',
				],
				'condition' => [
					'caption' => 'show',
					'tilt'    => 'yes',
				],
			]
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_style_link_icon_controls() {
		/**
		 * Style Tab: Link Icon
		 */
		$this->start_controls_section(
			'section_link_icon_style',
			[
				'label'     => esc_html__( 'Link Icon', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_link_icon_style' );

		$this->start_controls_tab(
			'tab_link_icon_normal',
			[
				'label'     => esc_html__( 'Normal', 'powerpack' ),
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon svg' => 'fill: {{VALUE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'link_icon_border_normal',
				'label'       => esc_html__( 'Border', 'powerpack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon',
				'condition'   => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'link_icon_size',
			[
				'label'      => esc_html__( 'Icon Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min'  => 5,
						'max'  => 100,
						'step' => 1,
					],
				],
				'condition'  => [
					'icon_type' => 'icon',
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'font-size: {{SIZE}}{{UNIT}}',
				],
				'condition'  => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_opacity_normal',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'opacity: {{SIZE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'link_icon_padding',
			[
				'label'       => esc_html__( 'Padding', 'powerpack' ),
				'type'        => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'placeholder' => [
					'top'    => '',
					'right'  => '',
					'bottom' => '',
					'left'   => '',
				],
				'selectors'   => [
					'{{WRAPPER}} .pp-grid-item .pp-gallery-image-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'   => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_link_icon_hover',
			[
				'label'     => esc_html__( 'Hover', 'powerpack' ),
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_color_hover',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-icon svg' => 'fill: {{VALUE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_bg_color_hover',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-icon' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-icon' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->add_control(
			'link_icon_opacity_hover',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-gallery-image-icon' => 'opacity: {{SIZE}};',
				],
				'condition' => [
					'select_link_icon[value]!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_style_overlay_controls() {
		/**
		 * Style Tab: Overlay
		 */
		$this->start_controls_section(
			'section_overlay_style',
			[
				'label' => esc_html__( 'Overlay', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'overlay_blend_mode',
			[
				'label'     => esc_html__( 'Blend Mode', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'normal',
				'options'   => [
					'normal'      => esc_html__( 'Normal', 'powerpack' ),
					'multiply'    => esc_html__( 'Multiply', 'powerpack' ),
					'screen'      => esc_html__( 'Screen', 'powerpack' ),
					'overlay'     => esc_html__( 'Overlay', 'powerpack' ),
					'darken'      => esc_html__( 'Darken', 'powerpack' ),
					'lighten'     => esc_html__( 'Lighten', 'powerpack' ),
					'color-dodge' => esc_html__( 'Color Dodge', 'powerpack' ),
					'color'       => esc_html__( 'Color', 'powerpack' ),
					'hue'         => esc_html__( 'Hue', 'powerpack' ),
					'hard-light'  => esc_html__( 'Hard Light', 'powerpack' ),
					'soft-light'  => esc_html__( 'Soft Light', 'powerpack' ),
					'difference'  => esc_html__( 'Difference', 'powerpack' ),
					'exclusion'   => esc_html__( 'Exclusion', 'powerpack' ),
					'saturation'  => esc_html__( 'Saturation', 'powerpack' ),
					'luminosity'  => esc_html__( 'Luminosity', 'powerpack' ),
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-overlay' => 'mix-blend-mode: {{VALUE}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_overlay_style' );

		$this->start_controls_tab(
			'tab_overlay_normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'overlay_background_color_normal',
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .pp-image-overlay',
				'exclude'  => [
					'image',
				],
			]
		);

		$this->add_control(
			'overlay_margin_normal',
			[
				'label'      => esc_html__( 'Margin', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-image-overlay' => 'top: {{SIZE}}px; bottom: {{SIZE}}px; left: {{SIZE}}px; right: {{SIZE}}px;',
				],
			]
		);

		$this->add_control(
			'overlay_opacity_normal',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-image-overlay' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_overlay_hover',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'overlay_background_color_hover',
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .pp-grid-item:hover .pp-image-overlay',
				'exclude'  => [
					'image',
				],
			]
		);

		$this->add_control(
			'overlay_margin_hover',
			[
				'label'      => esc_html__( 'Margin', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-image-overlay' => 'top: {{SIZE}}px; bottom: {{SIZE}}px; left: {{SIZE}}px; right: {{SIZE}}px;',
				],
			]
		);

		$this->add_control(
			'overlay_opacity_hover',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .pp-grid-item:hover .pp-image-overlay' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * Register Lightbox Controls in Style Tab
	 *
	 * @access protected
	 */
	protected function register_style_lightbox_controls() {
		/**
		 * Style Tab: Lightbox
		 */
		$this->start_controls_section(
			'section_lightbox_style',
			[
				'label'     => esc_html__( 'Lightbox', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'lightbox_background',
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '.pp-gallery-fancybox-{{ID}} .fancybox-bg',
				'exclude'   => [
					'image',
				],
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_opacity',
			[
				'label'     => esc_html__( 'Opacity', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'max'  => 1,
						'min'  => 0,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'.pp-gallery-fancybox-{{ID}} .fancybox-bg' => 'opacity: {{SIZE}}',
				],
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_toolbar_buttons_heading',
			[
				'label'     => esc_html__( 'Toolbar Buttons', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_toolbar_icons_color',
			[
				'label'     => esc_html__( 'Icons Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'.pp-gallery-fancybox-{{ID}} .fancybox-toolbar .fancybox-button' => 'color: {{VALUE}};',
				],
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'lightbox_toolbar_buttons_background',
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '.pp-gallery-fancybox-{{ID}} .fancybox-toolbar .fancybox-button',
				'exclude'   => [
					'image',
				],
				'condition' => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_toolbar_buttons_size',
			[
				'label'      => esc_html__( 'Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'max'  => 70,
						'min'  => 30,
						'step' => 1,
					],
				],
				'selectors'  => [
					'.pp-gallery-fancybox-{{ID}} .fancybox-toolbar .fancybox-button' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
				'condition'  => $this->fancybox_condition(),
			]
		);

		$this->add_control(
			'lightbox_arrows_heading',
			[
				'label'     => esc_html__( 'Arrows', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => $this->fancybox_condition(
					[
						'arrows' => 'yes',
					]
				),
			]
		);

		$this->add_control(
			'lightbox_arrows_icons_color',
			[
				'label'     => esc_html__( 'Icons Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'.pp-gallery-fancybox-{{ID}} .fancybox-navigation .fancybox-button' => 'color: {{VALUE}};',
				],
				'condition' => $this->fancybox_condition(
					[
						'arrows' => 'yes',
					]
				),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'lightbox_arrows_icons_background',
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '.pp-gallery-fancybox-{{ID}} .fancybox-navigation .fancybox-button',
				'exclude'   => [
					'image',
				],
				'condition' => $this->fancybox_condition(
					[
						'arrows' => 'yes',
					]
				),
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_filter_controls() {
		/**
		 * Style Tab: Filter
		 */
		$this->start_controls_section(
			'section_filter_style',
			[
				'label'     => esc_html__( 'Filter', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'filter_typography',
				'label'     => esc_html__( 'Typography', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-gallery-filters',
				'condition' => $this->filter_condition(),
			]
		);

		$this->start_controls_tabs( 'tabs_filter_style' );

		$this->start_controls_tab(
			'tab_filter_normal',
			[
				'label'     => esc_html__( 'Normal', 'powerpack' ),
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_color_normal',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter' => 'color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_background_color_normal',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter' => 'background-color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'filter_border_normal',
				'label'       => esc_html__( 'Border', 'powerpack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter',
				'condition'   => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_border_radius_normal',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => $this->filter_condition(),
			]
		);

		$this->add_responsive_control(
			'filter_padding',
			[
				'label'       => esc_html__( 'Padding', 'powerpack' ),
				'type'        => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'placeholder' => [
					'top'    => '',
					'right'  => '',
					'bottom' => '',
					'left'   => '',
				],
				'selectors'   => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'   => $this->filter_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'filter_box_shadow',
				'selector'  => '{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter',
				'condition' => $this->filter_condition(),
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_filters_active',
			[
				'label'     => esc_html__( 'Active', 'powerpack' ),
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_color_active',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter.pp-active' => 'color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_background_color_active',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter.pp-active' => 'background-color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_border_color_active',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter.pp-active' => 'border-color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'filter_box_shadow_active',
				'selector'  => '{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter.pp-active',
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'galleries_pointer_color_active',
			[
				'label'     => esc_html__( 'Pointer Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'global'    => [
					'default' => Global_Colors::COLOR_ACCENT,
				],
				'selectors' => [
					'{{WRAPPER}}' => '--filters-pointer-bg-color-active: {{VALUE}}',
				],
				'condition' => [
					'pointer!' => [ 'none', 'text' ],
				],

			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_filters_hover',
			[
				'label'     => esc_html__( 'Hover', 'powerpack' ),
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_color_hover',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter:hover' => 'color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_background_color_hover',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter:hover' => 'background-color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'filter_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'filter_box_shadow_hover',
				'selector'  => '{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter:hover',
				'condition' => $this->filter_condition(),
			]
		);

		$this->add_control(
			'galleries_pointer_color_hover',
			[
				'label'     => esc_html__( 'Pointer Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'global'    => [
					'default' => Global_Colors::COLOR_ACCENT,
				],
				'selectors' => [
					'{{WRAPPER}}' => '--filters-pointer-bg-color-hover: {{VALUE}}',
				],
				'condition' => $this->filter_condition(
					[
						'pointer!' => [ 'none', 'text' ],
					]
				),
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_control(
			'pointer_width',
			[
				'label'      => esc_html__( 'Pointer Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'devices'    => [ self::RESPONSIVE_DESKTOP, self::RESPONSIVE_TABLET ],
				'range'      => [
					'px' => [
						'max' => 30,
					],
				],
				'selectors'  => [
					'{{WRAPPER}}' => '--filters-pointer-border-width: {{SIZE}}{{UNIT}}',
				],
				'separator'  => 'before',
				'condition'  => [
					'pointer' => [ 'underline', 'overline', 'double-line', 'framed' ],
				],
			]
		);

		$this->add_responsive_control(
			'filters_margin_bottom',
			[
				'label'      => esc_html__( 'Filters Bottom Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 80,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-filters .pp-gallery-filter, {{WRAPPER}} .pp-filters-dropdown' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
				'condition'  => $this->filter_condition(),
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_pagination_controls() {
		/**
		 * Style Tab: Load More Button
		 * -------------------------------------------------
		 */
		$this->start_controls_section(
			'section_load_more_button_style',
			[
				'label'     => esc_html__( 'Load More Button', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'button_size',
			[
				'label'     => esc_html__( 'Size', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'sm',
				'options'   => [
					'xs' => esc_html__( 'Extra Small', 'powerpack' ),
					'sm' => esc_html__( 'Small', 'powerpack' ),
					'md' => esc_html__( 'Medium', 'powerpack' ),
					'lg' => esc_html__( 'Large', 'powerpack' ),
					'xl' => esc_html__( 'Extra Large', 'powerpack' ),
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'button_margin_top',
			[
				'label'      => esc_html__( 'Top Spacing', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 80,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-pagination' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_load_more_button_style' );

		$this->start_controls_tab(
			'tab_load_more_button_normal',
			[
				'label'     => esc_html__( 'Normal', 'powerpack' ),
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'load_more_button_text_color_normal',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more' => 'color: {{VALUE}}',
					'{{WRAPPER}} .pp-gallery-load-more .pp-icon svg' => 'fill: {{VALUE}}',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'load_more_button_bg_color_normal',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'global'    => [
					'default' => Global_Colors::COLOR_ACCENT,
				],
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'load_more_button_border_normal',
				'label'       => esc_html__( 'Border', 'powerpack' ),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .pp-gallery-load-more',
				'condition'   => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'load_more_button_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-load-more' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'load_more_button_typography',
				'label'     => esc_html__( 'Typography', 'powerpack' ),
				'global'    => [
					'default' => Global_Typography::TYPOGRAPHY_ACCENT,
				],
				'selector'  => '{{WRAPPER}} .pp-gallery-load-more',
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'load_more_button_padding',
			[
				'label'      => esc_html__( 'Padding', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-gallery-load-more' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition'  => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'load_more_button_box_shadow',
				'selector'  => '{{WRAPPER}} .pp-gallery-load-more',
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'load_more_button_icon_heading',
			[
				'label'     => esc_html__( 'Button Icon', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'pagination'                    => 'yes',
					'select_load_more_icon[value]!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'load_more_button_icon_margin',
			[
				'label'       => esc_html__( 'Margin', 'powerpack' ),
				'type'        => Controls_Manager::DIMENSIONS,
				'size_units'  => [ 'px', '%', 'em', 'rem', 'custom' ],
				'placeholder' => [
					'top'    => '',
					'right'  => '',
					'bottom' => '',
					'left'   => '',
				],
				'selectors'   => [
					'{{WRAPPER}} .pp-gallery-pagination .pp-gallery-load-more-icon' => 'margin-top: {{TOP}}{{UNIT}}; margin-left: {{LEFT}}{{UNIT}}; margin-right: {{RIGHT}}{{UNIT}}; margin-bottom: {{BOTTOM}}{{UNIT}};',
				],
				'condition'   => [
					'pagination'                    => 'yes',
					'select_load_more_icon[value]!' => '',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_button_hover',
			[
				'label'     => esc_html__( 'Hover', 'powerpack' ),
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'button_text_color_hover',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more:hover' => 'color: {{VALUE}}',
					'{{WRAPPER}} .pp-gallery-load-more:hover .pp-icon svg' => 'fill: {{VALUE}}',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'button_bg_color_hover',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more:hover' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'button_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more:hover' => 'border-color: {{VALUE}}',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'button_box_shadow_hover',
				'selector'  => '{{WRAPPER}} .pp-gallery-load-more:hover',
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->add_control(
			'load_more_button_animation_heading',
			[
				'label'     => esc_html__( 'Loading Animation', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->add_control(
			'load_more_button_animation_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .pp-gallery-load-more.pp-loading .pp-button-loader:after' => 'border-top-color: {{VALUE}}; border-bottom-color: {{VALUE}};',
				],
				'condition' => [
					'pagination'      => 'yes',
					'load_more_text!' => '',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Fancybox Settings.
	 *
	 * @access public
	 */
	public function fancybox_settings() {
		$settings = $this->get_settings_for_display();

		$base_class = 'pp-gallery-fancybox pp-gallery-fancybox-' . esc_attr( $this->get_id() ) . ' ';

		if ( 'bottom' === $settings['thumbs_position'] ) {
			$base_class    .= ' pp-fancybox-thumbs-x';
			$fancybox_axis = 'x';
		} else {
			$base_class    .= ' pp-fancybox-thumbs-y';
			$fancybox_axis = 'y';
		}

		$fancybox_options = [
			'loop'             => ( 'yes' === $settings['loop'] ),
			'arrows'           => ( 'yes' === $settings['arrows'] ),
			'infobar'          => ( 'yes' === $settings['slides_counter'] ),
			'keyboard'         => ( 'yes' === $settings['keyboard'] ),
			'toolbar'          => ( 'yes' === $settings['toolbar'] ),
			'buttons'          => $settings['toolbar_buttons'],
			'animationEffect'  => $settings['lightbox_animation'],
			'transitionEffect' => $settings['transition_effect'],
			'baseClass'        => $base_class,
			'thumbs'           => [
				'autoStart' => ( 'yes' === $settings['thumbs_auto_start'] ),
				'axis'      => $fancybox_axis,
			],
		];

		return $fancybox_options;
	}

	protected function render() {
		$settings = $this->get_settings_for_display();

		$classes = [
			'pp-image-gallery',
		];

		if ( 'grid' === $settings['layout'] ) {
			$classes[] = 'elementor-grid';
		}

		if ( 'masonry' === $settings['layout'] ) {
			$classes[] = 'pp-image-gallery-masonry';
		}

		if ( 'justified' === $settings['layout'] ) {
			$classes[] = 'pp-image-gallery-justified';
		}

		if ( $this->has_filters( $settings ) ) {
			$classes[] = 'pp-image-gallery-filter-enabled';
		}

		if ( 'grid' === $settings['layout'] && 'yes' === $settings['equal_height'] ) {
			$classes[] = 'pp-gallery-equal-height';
		}

		$this->add_render_attribute(
			'gallery',
			[
				'class' => $classes,
				'id'    => 'pp-image-gallery-' . $this->get_id(),
			]
		);

		if ( 'fancybox' === $settings['lightbox_library'] ) {
			$fancybox_settings = $this->fancybox_settings();

			$this->add_render_attribute(
				'gallery',
				[
					'data-fancybox-settings' => wp_json_encode( $fancybox_settings ),
				]
			);
		}

		if ( 'yes' === $settings['tilt'] ) {
			$gallery_settings = [
				'tilt_enable' => 'yes',
				'tilt_axis'   => ! empty( $settings['tilt_axis'] ) ? $settings['tilt_axis'] : '',
				'tilt_amount' => ! empty( $settings['tilt_amount']['size'] ) ? $settings['tilt_amount']['size'] : '20',
				'tilt_scale'  => ! empty( $settings['tilt_scale']['size'] ) ? $settings['tilt_scale']['size'] : '1.06',
				'tilt_speed'  => ! empty( $settings['tilt_speed']['size'] ) ? $settings['tilt_speed']['size'] : '800',
			];
		} else {
			$gallery_settings = [
				'tilt_enable' => 'no',
			];
		}

		$gallery_settings['layout'] = $settings['layout'];

		if ( 'justified' === $settings['layout'] ) {
			$gallery_settings['image_spacing'] = ! empty( $settings['image_spacing']['size'] ) ? $settings['image_spacing']['size'] : 0;
			$gallery_settings['row_height']    = $settings['row_height']['size'];
			$gallery_settings['last_row']      = $settings['last_row'];
		}

		if ( 'yes' === $settings['pagination'] ) {
			$gallery_settings['pagination'] = $settings['pagination'];
			$gallery_settings['per_page']   = absint( $settings['images_per_page'] );
		}

		if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
			$gallery_settings['post_id'] = \Elementor\Plugin::$instance->editor->get_post_id();
		} else {
			$gallery_settings['post_id'] = get_the_ID();
		}

		if ( null !== \Elementor\Plugin::$instance->documents->get_current() ) {
			$gallery_settings['template_id'] = \Elementor\Plugin::$instance->documents->get_current()->get_main_id();
		} else {
			$gallery_settings['template_id'] = '';
		}

		$gallery_settings['widget_id'] = $this->get_id();

		$this->add_render_attribute( 'gallery-container', [
			'class'         => 'pp-image-gallery-container',
			'data-settings' => wp_json_encode( $gallery_settings ),
		] );

		$image_gallery = $this->get_wordpress_photos();
		?>
		<div <?php $this->print_render_attribute_string( 'gallery-container' ); ?>>
			<?php if ( ! empty( $image_gallery ) ) { ?>
				<?php $this->render_filters(); ?>
				<div <?php $this->print_render_attribute_string( 'gallery' ); ?>>
					<?php $this->render_gallery_items(); ?>
				</div>
				<?php
				$this->render_pagination();
			} else {
				$placeholder = sprintf(
					/* translators: %s: Widget title. */
					esc_html__( 'Click here to edit the "%s" settings and choose some images.', 'powerpack' ),
					esc_attr( $this->get_title() )
				);

				$this->render_editor_placeholder(
					[
						'title' => esc_html__( 'Gallery is empty!', 'powerpack' ),
						'body'  => $placeholder,
					]
				);
			}
			?>
		</div>
		<?php
	}

	/**
	 * Get the animation selected for the active filter pointer.
	 *
	 * Each pointer style has its own animation control, so the value is looked up
	 * by pointer rather than by scanning the settings for an `animation` prefix,
	 * which would break as soon as another control shares that prefix.
	 *
	 * @since 3.0.0
	 * @access protected
	 * @param array $settings Widget settings.
	 * @return string Animation name, empty when the pointer has no animation.
	 */
	protected function get_pointer_animation( $settings ) {
		$animation_controls = [
			'underline'   => 'animation_line',
			'overline'    => 'animation_line',
			'double-line' => 'animation_line',
			'framed'      => 'animation_framed',
			'background'  => 'animation_background',
			'text'        => 'animation_text',
		];

		$pointer = $settings['pointer'];

		if ( ! isset( $animation_controls[ $pointer ] ) ) {
			return '';
		}

		// 'none' is a real value here: it has styles of its own that switch the
		// pointer transitions off.
		return $settings[ $animation_controls[ $pointer ] ];
	}

	/**
	 * Render filters
	 */
	protected function render_filters() {
		$settings = $this->get_settings_for_display();

		if ( $this->has_filters( $settings ) ) {
			// Left unescaped here on purpose; each output point below escapes for its
			// own context. Escaping at assignment would double encode.
			$all_text = ( '' !== $settings['filter_all_label'] ) ? $settings['filter_all_label'] : __( 'All', 'powerpack' );
			$gallery  = $settings['gallery_images'];
			$default_filter_select = $settings['default_filter_select'];
			$default_filter = $settings['default_filter'];

			$this->add_render_attribute( 'filters-wrapper', 'class', 'pp-filters-wrapper' );
			$this->add_render_attribute( 'filters-container', 'class', 'pp-gallery-filters' );
			if ( $settings['pointer'] ) {
				if ( 'underline' === $settings['pointer'] || 'overline' === $settings['pointer'] || 'double-line' === $settings['pointer'] ) {
					$this->add_render_attribute( 'filters-container', 'class', 'pp-pointer-line' );
				}

				$this->add_render_attribute( 'filters-container', 'class', 'pp-pointer-' . $settings['pointer'] );

				$animation = $this->get_pointer_animation( $settings );

				if ( $animation ) {
					$this->add_render_attribute( 'filters-container', 'class', 'pp-animation-' . $animation );
				}
			}

			if ( 'tablet' === $settings['responsive_support'] || 'mobile' === $settings['responsive_support'] ) {
				$this->add_render_attribute( 'filters-wrapper', 'class', 'pp-filters-wrapper-' . $settings['responsive_support'] );
			}
			?>
			<div <?php $this->print_render_attribute_string( 'filters-wrapper' ); ?>>
				<div <?php $this->print_render_attribute_string( 'filters-container' ); ?>>
					<?php
					$this->add_render_attribute( 'all-filter', [
						'class'              => 'pp-gallery-filter',
						'data-filter'        => '*',
						'data-gallery-index' => 'all',
					]);

					if ( 'first' === $default_filter_select || '' === $default_filter ) {
						$this->add_render_attribute( 'all-filter', 'class', 'pp-active' );
					}
					?>
					<div <?php $this->print_render_attribute_string( 'all-filter' ); ?>>
						<?php echo wp_kses_post( $all_text ); ?>
					</div>
					<?php
					foreach ( $gallery as $index => $item ) {
						$filter_label = $item['filter_label'];
						$filter_id = $item['filter_id'];

						if ( empty( $filter_label ) ) {
							$filter_label  = __( 'Group ', 'powerpack' );
							$filter_label .= ( $index + 1 );
						}

						$filter_key = $this->get_repeater_setting_key( 'filter', 'gallery', $index );

						$this->add_render_attribute( $filter_key, [
							'class'              => 'pp-gallery-filter',
							'data-filter'        => '.pp-group-' . ( $index + 1 ),
							'data-gallery-index' => 'pp-group-' . ( $index + 1 ),
						]);

						if ( '' !== $filter_id ) {
							$this->add_render_attribute( $filter_key, 'id', $filter_id );
						}

						if ( 'custom' === $default_filter_select && $filter_label === $default_filter ) {
							$this->add_render_attribute( $filter_key, [
								'class'        => 'pp-active',
								'data-default' => '.pp-group-' . ( $index + 1 ),
							]);
						}
						?>
						<div <?php $this->print_render_attribute_string( $filter_key ); ?>><?php echo wp_kses_post( $filter_label ); ?></div>
					<?php } ?>
				</div>

				<?php if ( 'tablet' === $settings['responsive_support'] || 'mobile' === $settings['responsive_support'] ) { ?>
					<select class="pp-gallery-filters pp-filters-dropdown">
						<?php // Markup cannot render inside an option, so tags are stripped rather than kept as literal text. ?>
						<option value="*"><?php echo esc_html( wp_strip_all_tags( $all_text ) ); ?></option>
						<?php
						foreach ( $gallery as $index => $item ) {
							$filter_label = $item['filter_label'];
							if ( empty( $filter_label ) ) {
								$filter_label  = __( 'Group ', 'powerpack' );
								$filter_label .= ( $index + 1 );
							}

							$responsive_filter_key = $this->get_repeater_setting_key( 'mobile_filter', 'gallery', $index );

							$this->add_render_attribute( $responsive_filter_key, [
								'value'              => '.pp-group-' . ( $index + 1 ),
								'data-gallery-index' => 'pp-group-' . ( $index + 1 ),
							]);

							if ( 'custom' === $default_filter_select && $filter_label === $default_filter ) {
								$this->add_render_attribute( $responsive_filter_key, [
									'selected' => 'selected',
								]);
							}
							?>
							<option <?php $this->print_render_attribute_string( $responsive_filter_key ); ?>><?php echo esc_html( wp_strip_all_tags( $filter_label ) ); ?></option>
						<?php } ?>
					</select>
				<?php } ?>
			</div>
			<?php
		}
	}

	/**
	 * Render gallery items
	 */
	protected function render_gallery_items() {
		$settings = $this->get_settings_for_display();
		$photos   = $this->get_photos();
		$count    = 0;

		foreach ( $photos as $photo ) {
			$grid_item_key  = $this->get_repeater_setting_key( 'gallery_item', 'gallery_images', $count );
			$thumb_wrap_key = $this->get_repeater_setting_key( 'thumb-wrap', 'gallery_images', $count );
			// Already translated in get_wordpress_photos().
			$image_id       = $photo->id;

			$this->add_render_attribute( $grid_item_key, 'class', [ 'pp-grid-item', 'pp-image' ] );
			$this->add_render_attribute( $thumb_wrap_key, 'class', [ 'pp-image-gallery-thumbnail-wrap', 'pp-ins-filter-hover' ] );

			if ( 'yes' === $settings['tilt'] ) {
				$this->add_render_attribute( $thumb_wrap_key, 'class', 'pp-gallery-tilt' );
			}

			if ( 'filterable' === $settings['gallery_type'] ) {
				$filter_labels      = $this->get_filter_labels();
				$filter_label       = isset( $filter_labels[ $image_id ] ) ? $filter_labels[ $image_id ] : '';
				$final_filter_label = preg_replace( '/[^\sA-Za-z0-9]/', '-', $filter_label );
			} else {
				$final_filter_label = '';
			}
			?>
			<div class="pp-grid-item-wrap <?php echo esc_attr( $final_filter_label ); ?>" data-item-id="<?php echo esc_attr( $image_id ); ?>">
				<div <?php $this->print_render_attribute_string( $grid_item_key ); ?>>
					<div <?php $this->print_render_attribute_string( $thumb_wrap_key ); ?>>
						<?php
						$img_attrs = [
							'class'        => 'pp-gallery-slide-image',
							'src'          => $photo->src,
							'alt'          => $photo->alt,
							'data-no-lazy' => 1,
						];

						// Reserve each image's height up-front so the masonry script can lay out
						// items before images finish loading (prevents a layout shift on load).
						if ( 'masonry' === $settings['layout'] && $photo->width && $photo->height ) {
							$img_attrs['width']  = $photo->width;
							$img_attrs['height'] = $photo->height;
							$img_attrs['style']  = sprintf( 'aspect-ratio: %d / %d;', $photo->width, $photo->height );
						}

						/**
						 * Filters whether a srcset attribute is printed on gallery images.
						 *
						 * Off by default because the gallery layouts size images through CSS,
						 * which the browser cannot account for when picking a candidate.
						 *
						 * @since 3.0.0
						 * @param bool $output_srcset Whether to print the srcset attribute.
						 */
						if ( apply_filters( 'pp_gallery_output_image_srcset', false ) ) {
							$srcset = wp_get_attachment_image_srcset( $image_id, $settings['image_size'] );

							if ( ! empty( $srcset ) ) {
								$img_attrs['srcset'] = $srcset;
							}
						}

						/**
						 * Filters the HTML attributes printed on each gallery image.
						 *
						 * @since 3.0.0
						 * @param array     $img_attrs Attribute name => value pairs. Values are escaped after filtering.
						 * @param \stdClass $photo     Photo data object for the current image.
						 * @param array     $settings  Widget settings.
						 */
						$img_attrs = apply_filters( 'pp_gallery_image_html_attrs', $img_attrs, $photo, $settings );

						$img_attrs_str = '';

						foreach ( $img_attrs as $key => $value ) {
							$img_attrs_str .= sprintf( ' %s="%s"', esc_attr( $key ), esc_attr( $value ) );
						}

						$link       = '';
						$link_attr  = '';
						$image_html = '';

						if ( 'none' !== $settings['link_to'] ) {
							$link_key  = $this->get_repeater_setting_key( 'link', 'gallery_images', $count );

							if ( 'file' === $settings['link_to'] ) {

								$lightbox_library     = $settings['lightbox_library'];
								$lightbox_caption     = $settings['lightbox_caption'];
								$lightbox_description = $settings['lightbox_description'];

								$link = wp_get_attachment_url( $image_id );

								if ( 'fancybox' === $lightbox_library ) {
									$this->add_render_attribute( $link_key, 'data-elementor-open-lightbox', 'no' );

									if ( 'yes' === $settings['global_lightbox'] ) {
										$this->add_render_attribute( $link_key, 'data-fancybox', 'pp-image-gallery' );
									} else {
										$this->add_render_attribute( $link_key, 'data-fancybox', 'pp-image-gallery-' . $this->get_id() );
									}

									if ( '' !== $lightbox_caption ) {
										// Fancybox injects this with .html(), so markup in the
										// attachment reaches the DOM. Captions are allowed to
										// carry formatting, so it is filtered rather than escaped.
										$caption = wp_kses_post( Module::get_image_caption( $image_id, $settings['lightbox_caption'] ) );

										$this->add_render_attribute( $link_key, 'data-caption', $caption );
									}

									$link_attr = 'href';

								} else {
									$this->add_lightbox_data_attributes( $link_key, $image_id, $settings['open_lightbox'], $this->get_id() );

									if ( '' !== $lightbox_caption ) {
										$caption = Module::get_image_caption( $image_id, $settings['lightbox_caption'] );

										$this->add_render_attribute( $link_key, 'data-elementor-lightbox-title', $caption );
									}

									if ( '' !== $lightbox_description ) {
										$description = Module::get_image_caption( $image_id, $settings['lightbox_description'] );

										$this->add_render_attribute( $link_key, 'data-elementor-lightbox-description', $description );
									}

									$link_attr = 'href';

									$this->add_render_attribute( $link_key, 'class', 'elementor-clickable' );
								}
							} elseif ( 'custom' === $settings['link_to'] ) {

								// Values stored before the field was sanitized on save may
								// still hold an unsafe protocol, so the URL is filtered on
								// the way out too. Not esc_url(), which would be double
								// encoded by the attribute escaping applied downstream.
								$link = esc_url_raw( get_post_meta( $image_id, 'pp-custom-link', true ) );

								if ( '' !== $link ) {
									$link_attr = 'href';
								}
							} elseif ( 'attachment' === $settings['link_to'] ) {

								$link      = get_attachment_link( $image_id );
								$link_attr = 'href';

							}

							if ( 'attachment' === $settings['link_to'] || ( 'custom' === $settings['link_to'] && '' !== $link ) || ( 'file' === $settings['link_to'] && 'no' === $settings['open_lightbox'] ) ) {

								$link_target = $settings['link_target'];

								$this->add_render_attribute( $link_key, 'target', $link_target );
							}

							if ( '' !== $link && '' !== $link_attr ) {

								$this->add_render_attribute(
									$link_key,
									[
										$link_attr => $link,
										'class'    => 'pp-image-gallery-item-link',
									]
								);
							}
						}

						if ( '' !== $link && '' !== $link_attr ) {
							$image_html .= '<a ' . $this->get_render_attribute_string( $link_key ) . '>';
						}

						$image_html .= '<div class="pp-ins-filter-target pp-image-gallery-thumbnail">';
						$image_html .= '<img ' . trim( $img_attrs_str ) . '/>';
						$image_html .= '</div>';

						$image_html .= $this->render_image_overlay();

						$image_html .= '<div class="pp-gallery-image-content pp-media-content">';

						// Link Icon.
						$image_html .= $this->render_link_icon();

						if ( 'over_image' === $settings['caption_position'] || 'justified' === $settings['layout'] ) {
							// Image Caption.
							$image_html .= $this->render_image_caption( $image_id );
						}

						$image_html .= '</div>';

						if ( '' !== $link && '' !== $link_attr ) {
							$image_html .= '</a>';
						}

						// Every part of $image_html is escaped as it is built above.
						echo $image_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

						if ( 'below_image' === $settings['caption_position'] && 'justified' !== $settings['layout'] ) {
							?>
							<div class="pp-gallery-image-content">
								<?php
									// Image Caption. Escaped in render_image_caption().
									echo $this->render_image_caption( $image_id ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
								?>
							</div>
							<?php
						}
						?>
					</div>
				</div>
			</div>
			<?php
			$count++;
		}
	}

	/**
	 * Render pagination
	 */
	protected function render_pagination() {
		$settings = $this->get_settings_for_display();

		$image_count = count( $this->get_wordpress_photos() );
		$per_page    = absint( $settings['images_per_page'] );

		if ( 'yes' === $settings['pagination'] && $per_page && $image_count > $per_page ) {

			if ( ! isset( $settings['load_more_icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
				// add old default.
				$settings['load_more_icon'] = '';
			}

			$has_icon = ! empty( $settings['load_more_icon'] );

			if ( $has_icon ) {
				// Keyed per icon, otherwise this inherits the link icon classes.
				$this->add_render_attribute( 'load-more-icon', 'class', $settings['load_more_icon'] );
				$this->add_render_attribute( 'load-more-icon', 'aria-hidden', 'true' );
			}

			if ( ! $has_icon && ! empty( $settings['select_load_more_icon']['value'] ) ) {
				$has_icon = true;
			}
			$migrated = isset( $settings['__fa4_migrated']['select_load_more_icon'] );
			$is_new   = ! isset( $settings['load_more_icon'] ) && Icons_Manager::is_migration_allowed();

			$this->add_render_attribute(
				'load-more-button',
				'class',
				[
					'pp-gallery-load-more',
					'elementor-button',
					'elementor-size-' . $settings['button_size'],
				]
			);
			?>
		<div class="pp-gallery-pagination">
			<a href="#" <?php $this->print_render_attribute_string( 'load-more-button' ); ?>>
				<span class="pp-button-loader"></span>
				<?php if ( $has_icon && 'before' === $settings['button_icon_position'] ) { ?>
					<span class="pp-gallery-load-more-icon pp-icon pp-no-trans">
						<?php
						if ( $is_new || $migrated ) {
							Icons_Manager::render_icon( $settings['select_load_more_icon'], [ 'aria-hidden' => 'true' ] );
						} elseif ( ! empty( $settings['load_more_icon'] ) ) {
							?>
							<i <?php $this->print_render_attribute_string( 'load-more-icon' ); ?>></i>
							<?php
						}
						?>
					</span>
				<?php } ?>
				<span class="pp-gallery-load-more-text">
					<?php echo wp_kses_post( $settings['load_more_text'] ); ?>
				</span>
				<?php if ( $has_icon && 'after' === $settings['button_icon_position'] ) { ?>
					<span class="pp-gallery-load-more-icon pp-icon pp-no-trans">
						<?php
						if ( $is_new || $migrated ) {
							Icons_Manager::render_icon( $settings['select_load_more_icon'], [ 'aria-hidden' => 'true' ] );
						} elseif ( ! empty( $settings['load_more_icon'] ) ) {
							?>
							<i <?php $this->print_render_attribute_string( 'load-more-icon' ); ?>></i>
							<?php
						}
						?>
					</span>
				<?php } ?>
			</a>
		</div>
			<?php
		}
	}

	/**
	 * Render image caption
	 *
	 * @param  int $id image ID.
	 * @return $html
	 */
	protected function render_image_caption( $id ) {
		$settings = $this->get_settings_for_display();

		if ( 'hide' === $settings['caption'] ) {
			return '';
		}

		$title       = Module::get_image_caption( $id, $settings['caption_type'] );
		$description = Module::get_image_caption( $id, $settings['description'] );

		if ( '' === $title && '' === $description ) {
			return '';
		}

		ob_start();
		?>
		<div class="pp-gallery-image-caption">
			<?php if ( '' !== $title ) { ?>
				<div class="pp-gallery-image-title">
					<?php echo wp_kses_post( $title ); ?>
				</div>
			<?php } ?>
			<?php if ( '' !== $description ) { ?>
				<div class="pp-gallery-image-description">
					<?php echo wp_kses_post( $description ); ?>
				</div>
			<?php } ?>
		</div>
		<?php
		return ob_get_clean();
	}

	/**
	 * Render link icon
	 *
	 * @return $html
	 */
	protected function render_link_icon() {
		// Identical for every image in the gallery, so it is only built once.
		if ( null !== $this->link_icon_html ) {
			return $this->link_icon_html;
		}

		$settings = $this->get_settings_for_display();

		if ( ! isset( $settings['link_icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
			// add old default
			$settings['link_icon'] = '';
		}

		$has_link_icon = ! empty( $settings['link_icon'] );

		if ( $has_link_icon ) {
			// Keyed per icon, otherwise the load more button icon inherits these classes.
			$this->add_render_attribute( 'link-icon', 'class', $settings['link_icon'] );
			$this->add_render_attribute( 'link-icon', 'aria-hidden', 'true' );
		}

		if ( ! $has_link_icon && ! empty( $settings['select_link_icon']['value'] ) ) {
			$has_link_icon = true;
		}
		$migrated_link_icon = isset( $settings['__fa4_migrated']['select_link_icon'] );
		$is_new_link_icon   = ! isset( $settings['link_icon'] ) && Icons_Manager::is_migration_allowed();

		if ( ! $has_link_icon ) {
			$this->link_icon_html = '';

			return $this->link_icon_html;
		}

		ob_start();
		?>
		<div class="pp-gallery-image-icon-wrap pp-media-content">
			<span class="pp-gallery-image-icon pp-icon">
				<?php
				if ( $is_new_link_icon || $migrated_link_icon ) {
					Icons_Manager::render_icon( $settings['select_link_icon'], [ 'aria-hidden' => 'true' ] );
				} elseif ( ! empty( $settings['link_icon'] ) ) {
					?>
					<i <?php $this->print_render_attribute_string( 'link-icon' ); ?>></i>
					<?php
				}
				?>
			</span>
		</div>
		<?php
		$this->link_icon_html = ob_get_clean();

		return $this->link_icon_html;
	}

	/**
	 * Render image overlay
	 *
	 * @return string
	 */
	protected function render_image_overlay() {
		return '<div class="pp-image-overlay pp-media-overlay"></div>';
	}

	/**
	 * Get filter ids
	 *
	 * @param  array $items gallery items array.
	 * @param  bool $get_labels get labels or not.
	 * @return $unique_ids
	 */
	protected function get_filter_ids( $items = [], $get_labels = false ) {
		$ids    = [];
		$labels = [];

		if ( empty( $items ) || ! is_array( $items ) ) {
			return $ids;
		}

		foreach ( $items as $index => $item ) {
			$image_group = $item['image_group'];

			if ( empty( $image_group ) ) {
				continue;
			}

			$filter_ids   = [];
			$filter_label = 'pp-group-' . ( $index + 1 );

			foreach ( $image_group as $group ) {
				$ids[]        = $group['id'];
				$filter_ids[] = $group['id'];
			}

			$labels[ $filter_label ] = $filter_ids;
		}

		if ( ! count( $ids ) ) {
			return $ids;
		}

		$unique_ids = array_unique( $ids );

		if ( $get_labels ) {
			$filter_labels = [];

			foreach ( $unique_ids as $unique_id ) {
				if ( empty( $unique_id ) ) {
					continue;
				}

				// The last argument must match the one render_gallery_items() uses,
				// otherwise untranslated images are keyed differently here than they
				// are looked up and lose their group class.
				$translated_id = apply_filters( 'wpml_object_id', $unique_id, 'attachment', true );

				if ( empty( $translated_id ) ) {
					continue;
				}

				foreach ( $labels as $key => $filter_ids ) {
					if ( in_array( $unique_id, $filter_ids ) ) {
						$class_name = str_replace( ' ', '-', strtolower( $key ) );

						if ( isset( $filter_labels[ $translated_id ] ) ) {
							$filter_labels[ $translated_id ] .= ' ' . $class_name;
						} else {
							$filter_labels[ $translated_id ] = $class_name;
						}
					}
				}
			}

			return $filter_labels;
		}

		return $unique_ids;
	}

	/**
	 * Get the group class name of every image in a filterable gallery.
	 *
	 * Memoized, since the map is the same for every item of the render loop.
	 *
	 * @since 3.0.0
	 * @access protected
	 * @return array Group class names, keyed by attachment ID.
	 */
	protected function get_filter_labels() {
		if ( null === $this->filter_labels ) {
			$settings = $this->get_settings_for_display();

			$this->filter_labels = $this->get_filter_ids( $settings['gallery_images'], true );
		}

		return $this->filter_labels;
	}

	/**
	 * Get WordPress photos
	 *
	 * The result is memoized because this runs a query per attachment and is
	 * needed by several render methods within the same request.
	 *
	 * @return $photos
	 */
	protected function get_wordpress_photos() {
		if ( null !== $this->photos ) {
			return $this->photos;
		}

		$settings   = $this->get_settings_for_display();
		$image_size = $settings['image_size'];
		$photos     = [];
		$ids        = [];
		$photo_ids  = [];

		if ( 'standard' === $settings['gallery_type'] ) {
			if ( empty( $settings['image_group_standard'] ) ) {
				$this->photos = $photos;

				return $this->photos;
			}

			$photos_arr = $settings['image_group_standard'];

			foreach ( $photos_arr as $ids ) {
				$photo_ids[] = $ids['id'];
			}
		} else {

			if ( empty( $settings['gallery_images'] ) ) {
				$this->photos = $photos;

				return $this->photos;
			}

			$photo_ids = $this->get_filter_ids( $settings['gallery_images'] );
		}

		// Resolve translations once, so every attachment lookup below and every
		// render method downstream works with the same ID.
		$photo_ids = array_map(
			function ( $id ) {
				return absint( apply_filters( 'wpml_object_id', $id, 'attachment', true ) );
			},
			$photo_ids
		);

		$photo_ids = array_filter( $photo_ids );

		if ( empty( $photo_ids ) ) {
			$this->photos = $photos;

			return $this->photos;
		}

		// Load every attachment and its meta in two queries. Without this each
		// image costs a query of its own here, and more again in the render loop
		// for its caption, custom link and attachment link.
		_prime_post_caches( $photo_ids, false, true );

		if ( 'date' === $settings['ordering'] ) {
			$photo_ids = array_values( $photo_ids );

			// Sort by upload date, newest first. Upload timestamps are not unique,
			// so images are compared rather than keyed by date, which would drop
			// every image but one whenever two were uploaded in the same second.
			usort(
				$photo_ids,
				function ( $a, $b ) {
					return get_post_time( 'U', '', $b ) <=> get_post_time( 'U', '', $a );
				}
			);
		}

		foreach ( $photo_ids as $id ) {
			$attachment = get_post( $id );

			if ( ! $attachment ) {
				continue;
			}

			// Resolving the src here doubles as the "is this a displayable image"
			// check the sizes lookup used to perform, and saves render() from
			// resolving the same attachment a second time.
			$image_src = wp_get_attachment_image_src( $id, $image_size );

			if ( empty( $image_src[0] ) ) {
				continue;
			}

			$data = new \stdClass();

			// Photo data object.
			$data->id          = $id;
			$data->alt         = get_post_meta( $id, '_wp_attachment_image_alt', true );
			$data->caption     = $attachment->post_excerpt;
			$data->description = $attachment->post_content;
			$data->title       = $attachment->post_title;

			// Photo src.
			$data->src    = $image_src[0];
			$data->width  = ! empty( $image_src[1] ) ? (int) $image_src[1] : 0;
			$data->height = ! empty( $image_src[2] ) ? (int) $image_src[2] : 0;

			// Photo Link.
			$data->link = wp_get_attachment_image_url( $id, 'large' );

			$photos[ $id ] = $data;
		}

		$this->photos = $photos;

		return $this->photos;
	}

	/**
	 * Get photos
	 *
	 * @return $ordered
	 */
	protected function get_photos() {
		$settings = $this->get_settings_for_display();
		$photos   = $this->get_wordpress_photos();
		$ordered  = $photos;

		if ( 'random' === $settings['ordering'] ) {
			$keys = array_keys( $photos );
			shuffle( $keys );

			$ordered = [];

			foreach ( $keys as $key ) {
				$ordered[ $key ] = $photos[ $key ];
			}
		}

		// The load more request returns every image; the script appends only the
		// ones that are not on the page yet, matching them by attachment ID.
		if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
			return $ordered;
		}

		if ( 'yes' !== $settings['pagination'] ) {
			return $ordered;
		}

		$per_page = absint( $settings['images_per_page'] );

		if ( ! $per_page || $per_page >= count( $ordered ) ) {
			return $ordered;
		}

		return array_slice( $ordered, 0, $per_page, true );
	}

	/**
	 * Get ajax images
	 *
	 * @return $html
	 */
	public function ajax_get_images() {
		if ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) {
			return;
		}

		ob_start();
		$this->render_gallery_items();

		return trim( ob_get_clean() );
	}

}
