<?php

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

$client_id = ! empty( $attributes['clientId'] ) ? str_replace( array( ';', '=', '(', ')', ' ' ), '', wp_strip_all_tags( $attributes['clientId'] ) ) : '';
$block_id  = 'vidplex_' . str_replace( '-', '_', esc_attr( $client_id ) );

$attributes['ajaxURL']     = admin_url( 'admin-ajax.php' );
$attributes['isPremium']   = vidplex_premium_access();
$attributes['loaderNonce'] = wp_create_nonce( 'vidplex-videos-loader' );

$styles = array(
	'padding' => array(
		'desktop' => isset( $attributes['padding']['desktop'] ) ? vidplex_render_trbl( 'padding', $attributes['padding']['desktop'] ) : '',
		'tablet'  => isset( $attributes['padding']['tablet'] ) ? vidplex_render_trbl( 'padding', $attributes['padding']['tablet'] ) : '',
		'mobile'  => isset( $attributes['padding']['mobile'] ) ? vidplex_render_trbl( 'padding', $attributes['padding']['mobile'] ) : '',
	),
	'margin'  => isset( $attributes['margin'] ) ? vidplex_render_trbl( 'margin', $attributes['margin'] ) : '',
);

$grid = array(
	'cols'    => array(
		'desktop' => isset( $attributes['grid']['cols']['desktop'] ) ? esc_attr( $attributes['grid']['cols']['desktop'] ) : '3',
		'tablet'  => isset( $attributes['grid']['cols']['tablet'] ) ? esc_attr( $attributes['grid']['cols']['tablet'] ) : '2',
		'mobile'  => isset( $attributes['grid']['cols']['mobile'] ) ? esc_attr( $attributes['grid']['cols']['mobile'] ) : '1',
	),
	'gap'     => array(
		'desktop' => isset( $attributes['grid']['gap']['desktop'] ) ? esc_attr( $attributes['grid']['gap']['desktop'] ) : '26px',
		'tablet'  => isset( $attributes['grid']['gap']['tablet'] ) ? esc_attr( $attributes['grid']['gap']['tablet'] ) : '',
		'mobile'  => isset( $attributes['grid']['gap']['mobile'] ) ? esc_attr( $attributes['grid']['gap']['mobile'] ) : '',
	),
	'row_gap' => array(
		'desktop' => isset( $attributes['grid']['rowGap']['desktop'] ) ? esc_attr( $attributes['grid']['rowGap']['desktop'] ) : '26px',
		'tablet'  => isset( $attributes['grid']['rowGap']['tablet'] ) ? esc_attr( $attributes['grid']['rowGap']['tablet'] ) : '',
		'mobile'  => isset( $attributes['grid']['rowGap']['mobile'] ) ? esc_attr( $attributes['grid']['rowGap']['mobile'] ) : '',
	),
);

$list = array(
	'gap' => isset( $attributes['list']['gap'] ) ? esc_attr( $attributes['list']['gap'] ) : '',
);

$gallery = array(
	'player_col'           => array(
		'desktop' => isset( $attributes['gallery']['playerCol']['desktop'] ) ? esc_attr( $attributes['gallery']['playerCol']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['playerCol']['tablet'] ) ? esc_attr( $attributes['gallery']['playerCol']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['playerCol']['mobile'] ) ? esc_attr( $attributes['gallery']['playerCol']['mobile'] ) : '',
	),
	'player_height'        => array(
		'desktop' => isset( $attributes['gallery']['playerHeight']['desktop'] ) ? esc_attr( $attributes['gallery']['playerHeight']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['playerHeight']['tablet'] ) ? esc_attr( $attributes['gallery']['playerHeight']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['playerHeight']['mobile'] ) ? esc_attr( $attributes['gallery']['playerHeight']['mobile'] ) : '',
	),
	'list_col'             => array(
		'desktop' => isset( $attributes['gallery']['listCol']['desktop'] ) ? esc_attr( $attributes['gallery']['listCol']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['listCol']['tablet'] ) ? esc_attr( $attributes['gallery']['listCol']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['listCol']['mobile'] ) ? esc_attr( $attributes['gallery']['listCol']['mobile'] ) : '',
	),
	'grid_cols'            => array(
		'desktop' => isset( $attributes['gallery']['gridCols']['desktop'] ) ? esc_attr( $attributes['gallery']['gridCols']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['gridCols']['tablet'] ) ? esc_attr( $attributes['gallery']['gridCols']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['gridCols']['mobile'] ) ? esc_attr( $attributes['gallery']['gridCols']['mobile'] ) : '',
	),
	'gap'                  => isset( $attributes['gallery']['gap'] ) ? esc_attr( $attributes['gallery']['gap'] ) : '',
	'row_gap'              => isset( $attributes['gallery']['rowGap'] ) ? esc_attr( $attributes['gallery']['rowGap'] ) : '',
	'item_gap'             => isset( $attributes['gallery']['itemGap'] ) ? esc_attr( $attributes['gallery']['itemGap'] ) : '',
	'item_padding'         => array(
		'desktop' => isset( $attributes['gallery']['itemPadding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['gallery']['itemPadding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['gallery']['itemPadding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['gallery']['itemPadding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['gallery']['itemPadding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['gallery']['itemPadding']['mobile'] ) ) : '',
	),
	'item_radius'          => isset( $attributes['gallery']['itemRadius'] ) ? esc_attr( $attributes['gallery']['itemRadius'] ) : '',
	'item_bg_color_active' => isset( $attributes['gallery']['itemBgColorActive'] ) ? esc_attr( $attributes['gallery']['itemBgColorActive'] ) : '',
	'thumbnail_width'      => array(
		'desktop' => isset( $attributes['gallery']['thumbnailWidth']['desktop'] ) ? esc_attr( $attributes['gallery']['thumbnailWidth']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['thumbnailWidth']['tablet'] ) ? esc_attr( $attributes['gallery']['thumbnailWidth']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['thumbnailWidth']['mobile'] ) ? esc_attr( $attributes['gallery']['thumbnailWidth']['mobile'] ) : '',
	),
	'thumbnail_height'     => array(
		'desktop' => isset( $attributes['gallery']['thumbnailHeight']['desktop'] ) ? esc_attr( $attributes['gallery']['thumbnailHeight']['desktop'] ) : '',
		'tablet'  => isset( $attributes['gallery']['thumbnailHeight']['tablet'] ) ? esc_attr( $attributes['gallery']['thumbnailHeight']['tablet'] ) : '',
		'mobile'  => isset( $attributes['gallery']['thumbnailHeight']['mobile'] ) ? esc_attr( $attributes['gallery']['thumbnailHeight']['mobile'] ) : '',
	),
	'thumbnail_radius'     => isset( $attributes['gallery']['thumbnailRadius'] ) ? esc_attr( $attributes['gallery']['thumbnailRadius'] ) : '',
	'icon_width'           => isset( $attributes['gallery']['playIconWidth'] ) ? esc_attr( $attributes['gallery']['playIconWidth'] ) : '',
	'icon_height'          => isset( $attributes['gallery']['playIconHeight'] ) ? esc_attr( $attributes['gallery']['playIconHeight'] ) : '',
);

$ajax = array(
	'label'          => isset( $attributes['ajax']['btnLabel'] ) ? sanitize_text_field( $attributes['ajax']['btnLabel'] ) : '',
	'loading_text'   => isset( $attributes['ajax']['loadingText'] ) ? sanitize_text_field( $attributes['ajax']['loadingText'] ) : '',
	'align'          => isset( $attributes['ajax']['align'] ) ? esc_attr( $attributes['ajax']['align'] ) : '',
	'width'          => array(
		'desktop' => isset( $attributes['ajax']['width']['desktop'] ) ? esc_attr( $attributes['ajax']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['ajax']['width']['tablet'] ) ? esc_attr( $attributes['ajax']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['ajax']['width']['mobile'] ) ? esc_attr( $attributes['ajax']['width']['mobile'] ) : '',
	),
	'padding'        => array(
		'desktop' => isset( $attributes['ajax']['padding']['desktop'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['ajax']['padding']['desktop'] ) ) : '',
		'tablet'  => isset( $attributes['ajax']['padding']['tablet'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['ajax']['padding']['tablet'] ) ) : '',
		'mobile'  => isset( $attributes['ajax']['padding']['mobile'] ) ? esc_attr( vidplex_render_trbl( 'padding', $attributes['ajax']['padding']['mobile'] ) ) : '',
	),
	'margin'         => isset( $attributes['ajax']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['ajax']['margin'] ) ) : '',
	'border'         => isset( $attributes['ajax']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['ajax']['border'] ) ) : '',
	'radius'         => isset( $attributes['ajax']['radius'] ) ? esc_attr( $attributes['ajax']['radius'] ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['ajax']['font']['size']['desktop'] ) ? esc_attr( $attributes['ajax']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['ajax']['font']['size']['tablet'] ) ? esc_attr( $attributes['ajax']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['ajax']['font']['size']['mobile'] ) ? esc_attr( $attributes['ajax']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['ajax']['font']['weight'] ) ? esc_attr( $attributes['ajax']['font']['weight'] ) : '',
		'family' => isset( $attributes['ajax']['font']['family'] ) ? esc_attr( $attributes['ajax']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['ajax']['letterCase'] ) ? esc_attr( $attributes['ajax']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['ajax']['decoration'] ) ? esc_attr( $attributes['ajax']['decoration'] ) : '',
	'line_height'    => isset( $attributes['ajax']['lineHeight'] ) ? esc_attr( $attributes['ajax']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['ajax']['letterSpacing'] ) ? esc_attr( $attributes['ajax']['letterSpacing'] ) : '',
	'color'          => array(
		'text'              => isset( $attributes['ajax']['color']['text'] ) ? esc_attr( $attributes['ajax']['color']['text'] ) : '',
		'text_hover'        => isset( $attributes['ajax']['color']['textHover'] ) ? esc_attr( $attributes['ajax']['color']['textHover'] ) : '',
		'bg'                => isset( $attributes['ajax']['color']['bg'] ) ? esc_attr( $attributes['ajax']['color']['bg'] ) : '',
		'bg_hover'          => isset( $attributes['ajax']['color']['bgHover'] ) ? esc_attr( $attributes['ajax']['color']['bgHover'] ) : '',
		'border_hover'      => isset( $attributes['ajax']['color']['borderHover'] ) ? esc_attr( $attributes['ajax']['color']['borderHover'] ) : '',
		'spinner_primary'   => isset( $attributes['ajax']['color']['spinnerPrimary'] ) ? esc_attr( $attributes['ajax']['color']['spinnerPrimary'] ) : '',
		'spinner_secondary' => isset( $attributes['ajax']['color']['spinnerSecondary'] ) ? esc_attr( $attributes['ajax']['color']['spinnerSecondary'] ) : '',
	),
);

$carousel = array(
	'bullet' => array(
		'align'                 => isset( $attributes['carousel']['bullet']['align'] ) ? esc_attr( $attributes['carousel']['bullet']['align'] ) : 'center',
		'gap'                   => isset( $attributes['carousel']['bullet']['gap'] ) ? esc_attr( $attributes['carousel']['bullet']['gap'] ) : '',
		'top'                   => array(
			'desktop' => isset( $attributes['carousel']['bullet']['top']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['top']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['top']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['top']['mobile'] ) : '',
		),
		'left'                  => array(
			'desktop' => isset( $attributes['carousel']['bullet']['left']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['left']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['left']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['left']['mobile'] ) : '',
		),
		'right'                 => array(
			'desktop' => isset( $attributes['carousel']['bullet']['right']['desktop'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['desktop'] ) : '',
			'tablet'  => isset( $attributes['carousel']['bullet']['right']['tablet'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['tablet'] ) : '',
			'mobile'  => isset( $attributes['carousel']['bullet']['right']['mobile'] ) ? esc_attr( $attributes['carousel']['bullet']['right']['mobile'] ) : '',
		),
		'width'                 => isset( $attributes['carousel']['bullet']['width'] ) ? esc_attr( $attributes['carousel']['bullet']['width'] ) : '',
		'height'                => isset( $attributes['carousel']['bullet']['height'] ) ? esc_attr( $attributes['carousel']['bullet']['height'] ) : '',
		'radius'                => isset( $attributes['carousel']['bullet']['radius'] ) ? esc_attr( $attributes['carousel']['bullet']['radius'] ) : '',
		'active_width'          => isset( $attributes['carousel']['bullet']['activeWidth'] ) ? esc_attr( $attributes['carousel']['bullet']['activeWidth'] ) : '',
		'active_height'         => isset( $attributes['carousel']['bullet']['activeHeight'] ) ? esc_attr( $attributes['carousel']['bullet']['activeHeight'] ) : '',
		'active_radius'         => isset( $attributes['carousel']['bullet']['activeRadius'] ) ? esc_attr( $attributes['carousel']['bullet']['activeRadius'] ) : '',
		'active_outline'        => isset( $attributes['carousel']['bullet']['activeHeight'] ) ? esc_attr( vidplex_render_trbl( 'outline', $attributes['carousel']['bullet']['activeBorder'] ) ) : '',
		'active_outline_offset' => isset( $attributes['carousel']['bullet']['activeBorderOffset'] ) ? esc_attr( $attributes['carousel']['bullet']['activeBorderOffset'] ) : '',
	),
	'nav'    => array(
		'size'       => isset( $attributes['carousel']['nav']['size'] ) ? esc_attr( $attributes['carousel']['nav']['size'] ) : '',
		'box_width'  => isset( $attributes['carousel']['nav']['boxWidth'] ) ? esc_attr( $attributes['carousel']['nav']['boxWidth'] ) : '',
		'box_height' => isset( $attributes['carousel']['nav']['boxHeight'] ) ? esc_attr( $attributes['carousel']['nav']['boxHeight'] ) : '',
		'border'     => isset( $attributes['carousel']['nav']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['carousel']['nav']['border'] ) ) : '',
		'radius'     => isset( $attributes['carousel']['nav']['radius'] ) ? esc_attr( $attributes['carousel']['nav']['radius'] ) : '',
	),
	'color'  => array(
		'nav'              => isset( $attributes['carousel']['color']['nav'] ) ? esc_attr( $attributes['carousel']['color']['nav'] ) : '',
		'nav_hover'        => isset( $attributes['carousel']['color']['navHover'] ) ? esc_attr( $attributes['carousel']['color']['navHover'] ) : '',
		'nav_bg'           => isset( $attributes['carousel']['color']['navBg'] ) ? esc_attr( $attributes['carousel']['color']['navBg'] ) : '',
		'nav_bg_hover'     => isset( $attributes['carousel']['color']['navBgHover'] ) ? esc_attr( $attributes['carousel']['color']['navBgHover'] ) : '',
		'nav_border_hover' => isset( $attributes['carousel']['color']['navBorderHover'] ) ? esc_attr( $attributes['carousel']['color']['navBorderHover'] ) : '',
		'bullet'           => isset( $attributes['carousel']['color']['bullet'] ) ? esc_attr( $attributes['carousel']['color']['bullet'] ) : '',
		'bullet_hover'     => isset( $attributes['carousel']['color']['bulletHover'] ) ? esc_attr( $attributes['carousel']['color']['bulletHover'] ) : '',
		'bullet_active'    => isset( $attributes['carousel']['color']['bulletActive'] ) ? esc_attr( $attributes['carousel']['color']['bulletActive'] ) : '',
	),
);

$item_styles = array(
	'padding'      => array(
		'desktop' => isset( $attributes['itemStyles']['padding']['desktop'] ) ? vidplex_render_trbl( 'padding', $attributes['itemStyles']['padding']['desktop'] ) : '',
		'tablet'  => isset( $attributes['itemStyles']['padding']['tablet'] ) ? vidplex_render_trbl( 'padding', $attributes['itemStyles']['padding']['tablet'] ) : '',
		'mobile'  => isset( $attributes['itemStyles']['padding']['mobile'] ) ? vidplex_render_trbl( 'padding', $attributes['itemStyles']['padding']['mobile'] ) : '',
	),
	'margin'       => isset( $attributes['itemStyles']['margin'] ) ? vidplex_render_trbl( 'margin', $attributes['itemStyles']['margin'] ) : '',
	'border'       => isset( $attributes['itemStyles']['border'] ) ? vidplex_render_trbl( 'border', $attributes['itemStyles']['border'] ) : '',
	'radius'       => isset( $attributes['itemStyles']['radius'] ) ? esc_attr( $attributes['itemStyles']['radius'] ) : '',
	'align'        => isset( $attributes['itemStyles']['align'] ) ? $attributes['itemStyles']['align'] : '',
	'shadow'       => array(
		'h'     => isset( $attributes['itemStyles']['shadow']['h'] ) ? esc_attr( $attributes['itemStyles']['shadow']['h'] ) : '',
		'v'     => isset( $attributes['itemStyles']['shadow']['v'] ) ? esc_attr( $attributes['itemStyles']['shadow']['v'] ) : '',
		'b'     => isset( $attributes['itemStyles']['shadow']['b'] ) ? esc_attr( $attributes['itemStyles']['shadow']['b'] ) : '',
		's'     => isset( $attributes['itemStyles']['shadow']['s'] ) ? esc_attr( $attributes['itemStyles']['shadow']['s'] ) : '',
		'color' => isset( $attributes['itemStyles']['shadow']['color'] ) ? esc_attr( $attributes['itemStyles']['shadow']['color'] ) : '',
		'p'     => isset( $attributes['itemStyles']['shadow']['p'] ) ? esc_attr( $attributes['itemStyles']['shadow']['p'] ) : '',
	),
	'shadow_hover' => array(
		'h'     => isset( $attributes['itemStyles']['shadowHover']['h'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['h'] ) : '',
		'v'     => isset( $attributes['itemStyles']['shadowHover']['v'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['v'] ) : '',
		'b'     => isset( $attributes['itemStyles']['shadowHover']['b'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['b'] ) : '',
		's'     => isset( $attributes['itemStyles']['shadowHover']['s'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['s'] ) : '',
		'color' => isset( $attributes['itemStyles']['shadowHover']['color'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['color'] ) : '',
		'p'     => isset( $attributes['itemStyles']['shadowHover']['p'] ) ? esc_attr( $attributes['itemStyles']['shadowHover']['p'] ) : '',
	),
	'color'        => array(
		'bg'           => isset( $attributes['itemStyles']['color']['bg'] ) ? esc_attr( $attributes['itemStyles']['color']['bg'] ) : '',
		'bg_hover'     => isset( $attributes['itemStyles']['color']['bgHover'] ) ? esc_attr( $attributes['itemStyles']['color']['bgHover'] ) : '',
		'border_hover' => isset( $attributes['itemStyles']['color']['borderHover'] ) ? esc_attr( $attributes['itemStyles']['color']['borderHover'] ) : '',
	),
);

$iframe_styles = array(
	'margin' => isset( $attributes['videoStyles']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['videoStyles']['margin'] ) ) : '',
	'width'  => array(
		'desktop' => isset( $attributes['videoStyles']['width']['desktop'] ) ? esc_attr( $attributes['videoStyles']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['videoStyles']['width']['tablet'] ) ? esc_attr( $attributes['videoStyles']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['videoStyles']['width']['mobile'] ) ? esc_attr( $attributes['videoStyles']['width']['mobile'] ) : '',
	),
	'height' => array(
		'desktop' => isset( $attributes['videoStyles']['height']['desktop'] ) ? esc_attr( $attributes['videoStyles']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['videoStyles']['height']['tablet'] ) ? esc_attr( $attributes['videoStyles']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['videoStyles']['height']['mobile'] ) ? esc_attr( $attributes['videoStyles']['height']['mobile'] ) : '',
	),
	'border' => isset( $attributes['videoStyles']['border'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['videoStyles']['border'] ) ) : '',
	'radius' => isset( $attributes['videoStyles']['radius'] ) ? esc_attr( $attributes['videoStyles']['radius'] ) : '',
	'fit'    => isset( $attributes['videoStyles']['fit'] ) ? esc_attr( $attributes['videoStyles']['fit'] ) : '',
	'color'  => array(
		'overlay' => isset( $attributes['videoStyles']['color']['overlay'] ) ? esc_attr( $attributes['videoStyles']['color']['overlay'] ) : '',
	),
);

$popup_styles = array(
	'icon_size'       => isset( $attributes['popup']['iconSize'] ) ? esc_attr( $attributes['popup']['iconSize'] ) : '',
	'icon_box_width'  => isset( $attributes['popup']['iconBoxWidth'] ) ? esc_attr( $attributes['popup']['iconBoxWidth'] ) : '',
	'icon_box_height' => isset( $attributes['popup']['iconBoxHeight'] ) ? esc_attr( $attributes['popup']['iconBoxHeight'] ) : '',
	'icon_border'     => isset( $attributes['popup']['iconBorder'] ) ? esc_attr( vidplex_render_trbl( 'border', $attributes['popup']['iconBorder'] ) ) : '',
	'icon_radius'     => isset( $attributes['popup']['iconRadius'] ) ? $attributes['popup']['iconRadius'] : '',
	'color'           => array(
		'icon'              => isset( $attributes['popup']['color']['icon'] ) ? esc_attr( $attributes['popup']['color']['icon'] ) : '',
		'icon_hover'        => isset( $attributes['popup']['color']['iconHover'] ) ? esc_attr( $attributes['popup']['color']['iconHover'] ) : '',
		'icon_bg'           => isset( $attributes['popup']['color']['iconBg'] ) ? esc_attr( $attributes['popup']['color']['iconBg'] ) : '',
		'icon_bg_hover'     => isset( $attributes['popup']['color']['iconBgHover'] ) ? esc_attr( $attributes['popup']['color']['iconBgHover'] ) : '',
		'icon_border_hover' => isset( $attributes['popup']['color']['iconBorderHover'] ) ? esc_attr( $attributes['popup']['color']['iconBorderHover'] ) : '',
		'overlay'           => isset( $attributes['popup']['color']['overlay'] ) ? esc_attr( $attributes['popup']['color']['overlay'] ) : '',
		'close_icon'        => isset( $attributes['popup']['color']['closeIcon'] ) ? esc_attr( $attributes['popup']['color']['closeIcon'] ) : '',
	),
	'width'           => array(
		'desktop' => isset( $attributes['popup']['width']['desktop'] ) ? esc_attr( $attributes['popup']['width']['desktop'] ) : '',
		'tablet'  => isset( $attributes['popup']['width']['tablet'] ) ? esc_attr( $attributes['popup']['width']['tablet'] ) : '',
		'mobile'  => isset( $attributes['popup']['width']['mobile'] ) ? esc_attr( $attributes['popup']['width']['mobile'] ) : '',
	),
	'height'          => array(
		'desktop' => isset( $attributes['popup']['height']['desktop'] ) ? esc_attr( $attributes['popup']['height']['desktop'] ) : '',
		'tablet'  => isset( $attributes['popup']['height']['tablet'] ) ? esc_attr( $attributes['popup']['height']['tablet'] ) : '',
		'mobile'  => isset( $attributes['popup']['height']['mobile'] ) ? esc_attr( $attributes['popup']['height']['mobile'] ) : '',
	),
);

$title_styles = array(
	'margin'         => isset( $attributes['titleStyles']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['titleStyles']['margin'] ) ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['titleStyles']['font']['size']['desktop'] ) ? esc_attr( $attributes['titleStyles']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['titleStyles']['font']['size']['tablet'] ) ? esc_attr( $attributes['titleStyles']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['titleStyles']['font']['size']['mobile'] ) ? esc_attr( $attributes['titleStyles']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['titleStyles']['font']['weight'] ) ? esc_attr( $attributes['titleStyles']['font']['weight'] ) : '',
		'family' => isset( $attributes['titleStyles']['font']['family'] ) ? esc_attr( $attributes['titleStyles']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['titleStyles']['letterCase'] ) ? esc_attr( $attributes['titleStyles']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['titleStyles']['decoration'] ) ? esc_attr( $attributes['titleStyles']['decoration'] ) : '',
	'line_height'    => isset( $attributes['titleStyles']['lineHeight'] ) ? esc_attr( $attributes['titleStyles']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['titleStyles']['letterSpacing'] ) ? esc_attr( $attributes['titleStyles']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['titleStyles']['color']['text'] ) ? esc_attr( $attributes['titleStyles']['color']['text'] ) : '',
	),
);

$meta_styles = array(
	'gap'            => isset( $attributes['metaStyles']['gap'] ) ? esc_attr( $attributes['metaStyles']['gap'] ) : '',
	'row_gap'        => isset( $attributes['metaStyles']['rowGap'] ) ? esc_attr( $attributes['metaStyles']['rowGap'] ) : '',
	'flex_wrap'      => isset( $attributes['metaStyles']['flexWrap'] ) && filter_var( $attributes['metaStyles']['flexWrap'], FILTER_VALIDATE_BOOLEAN ) ? 'wrap' : 'nowrap',
	'margin'         => isset( $attributes['metaStyles']['margin'] ) ? esc_attr( vidplex_render_trbl( 'margin', $attributes['metaStyles']['margin'] ) ) : '',
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['metaStyles']['font']['size']['desktop'] ) ? esc_attr( $attributes['metaStyles']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['metaStyles']['font']['size']['tablet'] ) ? esc_attr( $attributes['metaStyles']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['metaStyles']['font']['size']['mobile'] ) ? esc_attr( $attributes['metaStyles']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['metaStyles']['font']['weight'] ) ? esc_attr( $attributes['metaStyles']['font']['weight'] ) : '',
		'family' => isset( $attributes['metaStyles']['font']['family'] ) ? esc_attr( $attributes['metaStyles']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['metaStyles']['letterCase'] ) ? esc_attr( $attributes['metaStyles']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['metaStyles']['decoration'] ) ? esc_attr( $attributes['metaStyles']['decoration'] ) : '',
	'line_height'    => isset( $attributes['metaStyles']['lineHeight'] ) ? esc_attr( $attributes['metaStyles']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['metaStyles']['letterSpacing'] ) ? esc_attr( $attributes['metaStyles']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['metaStyles']['color']['text'] ) ? esc_attr( $attributes['metaStyles']['color']['text'] ) : '',
	),
);

$typography = array(
	'font'           => array(
		'size'   => array(
			'desktop' => isset( $attributes['typography']['font']['size']['desktop'] ) ? esc_attr( $attributes['typography']['font']['size']['desktop'] ) : '',
			'tablet'  => isset( $attributes['typography']['font']['size']['tablet'] ) ? esc_attr( $attributes['typography']['font']['size']['tablet'] ) : '',
			'mobile'  => isset( $attributes['typography']['font']['size']['mobile'] ) ? esc_attr( $attributes['typography']['font']['size']['mobile'] ) : '',
		),
		'weight' => isset( $attributes['typography']['font']['weight'] ) ? esc_attr( $attributes['typography']['font']['weight'] ) : '',
		'family' => isset( $attributes['typography']['font']['family'] ) ? esc_attr( $attributes['typography']['font']['family'] ) : '',
	),
	'lettercase'     => isset( $attributes['typography']['letterCase'] ) ? esc_attr( $attributes['typography']['letterCase'] ) : '',
	'decoration'     => isset( $attributes['typography']['decoration'] ) ? esc_attr( $attributes['typography']['decoration'] ) : '',
	'line_height'    => isset( $attributes['typography']['lineHeight'] ) ? esc_attr( $attributes['typography']['lineHeight'] ) : '',
	'letter_spacing' => isset( $attributes['typography']['letterSpacing'] ) ? esc_attr( $attributes['typography']['letterSpacing'] ) : '',
	'color'          => array(
		'text' => isset( $attributes['typography']['color']['text'] ) ? esc_attr( $attributes['typography']['color']['text'] ) : '',
	),
);

$block_styles = "
#$block_id {
	{$styles['padding']['desktop']}
	{$styles['margin']}
	font-size: {$typography['font']['size']['desktop']};
	font-weight: {$typography['font']['weight']};
	font-family: {$typography['font']['family']};
	text-transform: {$typography['lettercase']};
	text-decoration: {$typography['decoration']};
	line-height: {$typography['line_height']};
	letter-spacing: {$typography['letter_spacing']};
	color: {$typography['color']['text']};
}
@media only screen and (max-width: 1025px) {
	#$block_id {
		{$styles['padding']['tablet']}
		font-size: {$typography['font']['size']['tablet']};
	}
}
@media only screen and (max-width: 570px) {
	#$block_id {
		{$styles['padding']['mobile']}
		font-size: {$typography['font']['size']['mobile']};
	}
}

#$block_id.layout-default .display-wrapper.display-grid {
	grid-template-columns: repeat({$grid['cols']['desktop']}, 1fr);
	gap: {$grid['gap']['desktop']};
	row-gap: {$grid['row_gap']['desktop']};
}

#$block_id.layout-gallery .gallery__wrapper.display-sidebar {
	gap: {$gallery['gap']};	
	row-gap: {$gallery['row_gap']};	
}
#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__player {
	width: {$gallery['player_col']['desktop']};
}
#$block_id.layout-gallery .gallery__player, #$block_id.layout-gallery .gallery__player iframe {
	min-height: {$gallery['player_height']['desktop']};
}
#$block_id.layout-gallery .gallery__wrapper.display-default .gallery__sidebar {
	margin-top: {$gallery['gap']};
	grid-template-columns: repeat({$gallery['grid_cols']['desktop']}, 1fr);
	gap: {$gallery['item_gap']};
}
#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__sidebar {
	width: {$gallery['list_col']['desktop']};
	max-height: {$gallery['player_height']['desktop']};
}
#$block_id.layout-gallery .gallery__wrapper.display-sidebar .video__item:not(:first-child) {
	margin-top: {$gallery['item_gap']};
}
#$block_id.layout-gallery .gallery__sidebar .video__item {
	{$gallery['item_padding']['desktop']}
	border-radius: {$gallery['item_radius']};

	&.is-active {
		background-color: {$gallery['item_bg_color_active']};
	}

	& .video__thumbnail {
		width: {$gallery['thumbnail_width']['desktop']};
		min-width: {$gallery['thumbnail_width']['desktop']};
		height: {$gallery['thumbnail_height']['desktop']};
		border-radius: {$gallery['thumbnail_radius']};
	}
		
	& img {
		border-radius: {$gallery['thumbnail_radius']};
	}

	& .yt-play-icon {
		width: {$gallery['icon_width']};
		height: {$gallery['icon_height']};
	}
}
@media only screen and (max-width: 1025px) {
	#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__player {
		width: {$gallery['player_col']['tablet']};
	}
	#$block_id.layout-gallery .gallery__player, #$block_id.layout-gallery .gallery__player iframe {
		min-height: {$gallery['player_height']['tablet']};
	}
	#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__sidebar {
		width: {$gallery['list_col']['tablet']};
		max-height: {$gallery['player_height']['tablet']};
	}
	#$block_id.layout-gallery .gallery__wrapper.display-default .gallery__sidebar {
		grid-template-columns: repeat({$gallery['grid_cols']['tablet']}, 1fr);
	}
	#$block_id.layout-gallery .gallery__sidebar .video__item {
		{$gallery['item_padding']['tablet']}
		
		& .video__thumbnail {
			width: {$gallery['thumbnail_width']['tablet']};
			min-width: {$gallery['thumbnail_width']['tablet']};
			height: {$gallery['thumbnail_height']['tablet']};
		}
	}
}
@media only screen and (max-width: 570px) {
	#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__player {
		width: {$gallery['player_col']['mobile']};
	}
	#$block_id.layout-gallery .gallery__player, #$block_id.layout-gallery .gallery__player iframe {
		min-height: {$gallery['player_height']['mobile']};
	}
	#$block_id.layout-gallery .gallery__wrapper.display-sidebar .gallery__sidebar {
		width: {$gallery['list_col']['mobile']};
		max-height: {$gallery['player_height']['mobile']};
	}
	#$block_id.layout-gallery .gallery__wrapper.display-default .gallery__sidebar {
		grid-template-columns: repeat({$gallery['grid_cols']['mobile']}, 1fr);
	}
	#$block_id.layout-gallery .gallery__sidebar .video__item {
		{$gallery['item_padding']['mobile']}

		& .video__thumbnail {
			width: {$gallery['thumbnail_width']['mobile']};
			min-width: {$gallery['thumbnail_width']['mobile']};
			height: {$gallery['thumbnail_height']['mobile']};
		}
	}
}

#$block_id .display-wrapper .layout__item {
	{$item_styles['padding']['desktop']}
	{$item_styles['margin']}
	{$item_styles['border']}
	border-radius: {$item_styles['radius']};
	background-color: {$item_styles['color']['bg']};
	text-align: {$item_styles['align']};

	&.has-box-shadow {
		box-shadow: {$item_styles['shadow']['h']} {$item_styles['shadow']['v']} {$item_styles['shadow']['b']} {$item_styles['shadow']['s']} {$item_styles['shadow']['color']} {$item_styles['shadow']['p']};
	}
	&.has-hover-box-shadow:hover {
		box-shadow: {$item_styles['shadow_hover']['h']} {$item_styles['shadow_hover']['v']} {$item_styles['shadow_hover']['b']} {$item_styles['shadow_hover']['s']} {$item_styles['shadow_hover']['color']} {$item_styles['shadow_hover']['p']};
	}
	
	& iframe, & .video__thumbnail {
		{$iframe_styles['margin']}
		width: {$iframe_styles['width']['desktop']};
		height: {$iframe_styles['height']['desktop']};
		{$iframe_styles['border']}
		border-radius: {$iframe_styles['radius']};
	}
	& .video__thumbnail img, & .iframe-loader {
		width: {$iframe_styles['width']['desktop']};
		height: {$iframe_styles['height']['desktop']};
		border-radius: {$iframe_styles['radius']};
	}
	& .video__thumbnail img {
		object-fit: {$iframe_styles['fit']};
	}
	& .video__thumbnail .thumbnail__overlay {
		background-color: {$iframe_styles['color']['overlay']};
	}
	& .video__thumbnail .play__icon {
		width: {$popup_styles['icon_box_width']};
		height: {$popup_styles['icon_box_height']};
		{$popup_styles['icon_border']}
		border-radius: {$popup_styles['icon_radius']};
		background-color: {$popup_styles['color']['icon_bg']};
		color: {$popup_styles['color']['icon']};

		& svg {
			width: {$popup_styles['icon_size']};
			height: {$popup_styles['icon_size']};
		}

		&:hover {
			background-color: {$popup_styles['color']['icon_bg_hover']};
			color: {$popup_styles['color']['icon_hover']};
			border-color: {$popup_styles['color']['icon_border_hover']};
		}
	}

	&:hover {
		background-color: {$item_styles['color']['bg_hover']};
		border-color: {$item_styles['color']['border_hover']};
	}
}
@media only screen and (max-width: 1025px) {
	#$block_id .display-wrapper .layout__item {
		{$item_styles['padding']['tablet']}

		& iframe, & .video__thumbnail, & .video__thumbnail img, & .iframe-loader {
			width: {$iframe_styles['width']['tablet']};
			min-height: {$iframe_styles['height']['tablet']};
		}
	}
	#$block_id.layout-default .display-wrapper.display-grid {
		grid-template-columns: repeat({$grid['cols']['tablet']}, 1fr);
		gap: {$grid['gap']['tablet']};
		row-gap: {$grid['row_gap']['tablet']};
	}
}
@media only screen and (max-width: 570px) {
	#$block_id .display-wrapper .layout__item {
		{$item_styles['padding']['mobile']}

		& iframe, & .video__thumbnail, & .video__thumbnail img, & .iframe-loader {
			width: {$iframe_styles['width']['mobile']};
			min-height: {$iframe_styles['height']['mobile']};
		}
	}
	#$block_id.layout-default .display-wrapper.display-grid {
		grid-template-columns: repeat({$grid['cols']['mobile']}, 1fr);
		gap: {$grid['gap']['mobile']};
		row-gap: {$grid['row_gap']['mobile']};
	}
}

#$block_id.layout-list .display-wrapper {
	gap: {$list['gap']};
}	

#$block_id .layout__item .video__title, #$block_id .video__item .video__title {
	{$title_styles['margin']}
	font-size: {$title_styles['font']['size']['desktop']};
	font-weight: {$title_styles['font']['weight']};
	font-family: {$title_styles['font']['family']};
	text-transform: {$title_styles['lettercase']};
	text-decoration: {$title_styles['decoration']};
	line-height: {$title_styles['line_height']};
	letter-spacing: {$title_styles['letter_spacing']};
	color: {$title_styles['color']['text']};
}
@media only screen and (max-width: 1025px) {
	#$block_id .layout__item .video__title, #$block_id .video__item .video__title { 
		font-size: {$title_styles['font']['size']['tablet']};
	}
}
@media only screen and (max-width: 570px) {
	#$block_id .layout__item .video__title, #$block_id .video__item .video__title { 
		font-size: {$title_styles['font']['size']['mobile']};
	}
}

#$block_id .layout__item .video__meta, #$block_id .video__item .video__meta {
	gap: {$meta_styles['gap']};
	row-gap: {$meta_styles['row_gap']};
	justify-content: {$item_styles['align']};
	{$meta_styles['margin']}
	font-size: {$meta_styles['font']['size']['desktop']};
	font-weight: {$meta_styles['font']['weight']};
	font-family: {$meta_styles['font']['family']};
	text-transform: {$meta_styles['lettercase']};
	text-decoration: {$meta_styles['decoration']};
	line-height: {$meta_styles['line_height']};
	letter-spacing: {$meta_styles['letter_spacing']};
	color: {$meta_styles['color']['text']};

	& svg {
		width: {$meta_styles['font']['size']['desktop']};
		height: {$meta_styles['font']['size']['desktop']};
	}
}
@media only screen and (max-width: 1025px) {
	#$block_id .layout__item .video__meta, #$block_id .video__item .video__meta { 
		font-size: {$meta_styles['font']['size']['tablet']};

		& svg {
			width: {$meta_styles['font']['size']['tablet']};
			height: {$meta_styles['font']['size']['tablet']};
		}
	}
}
@media only screen and (max-width: 570px) {
	#$block_id .layout__item .video__meta, #$block_id .video__item .video__meta { 
		font-size: {$meta_styles['font']['size']['mobile']};

		& svg {
			width: {$meta_styles['font']['size']['mobile']};
			height: {$meta_styles['font']['size']['mobile']};
		}
	}
}

#$block_id .swiper-button-prev::after,
#$block_id .swiper-button-next::after {
    font-size: {$carousel['nav']['size']};
}
#$block_id .swiper-button-prev,
#$block_id .swiper-button-next {
    width: {$carousel['nav']['box_width']};
    height: {$carousel['nav']['box_height']};
    {$carousel['nav']['border']}
    border-radius: {$carousel['nav']['radius']};
    color: {$carousel['color']['nav']};
    background-color: {$carousel['color']['nav_bg']};
}
#$block_id .swiper-button-prev:hover,
#$block_id .swiper-button-next:hover {
    color: {$carousel['color']['nav_hover']};
    background-color: {$carousel['color']['nav_bg_hover']};
    border-color: {$carousel['color']['nav_border_hover']};
}
#$block_id .swiper-pagination {
	bottom: {$carousel['bullet']['top']['desktop']};
	text-align: {$carousel['bullet']['align']};
}
#$block_id .swiper-pagination .swiper-pagination-bullet {
	width: {$carousel['bullet']['width']};
	height: {$carousel['bullet']['height']};
	border-radius: {$carousel['bullet']['radius']};
	background-color: {$carousel['color']['bullet']};
}
#$block_id .swiper-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, {$carousel['bullet']['gap']});
}
#$block_id .swiper-pagination .swiper-pagination-bullet-active {
	width: {$carousel['bullet']['active_width']};
	height: {$carousel['bullet']['active_height']};
	{$carousel['bullet']['active_outline']}
	outline-offset: {$carousel['bullet']['active_outline_offset']};
	border-radius: {$carousel['bullet']['active_radius']};
	background-color: {$carousel['color']['bullet_active']};
}
#$block_id .swiper-pagination .swiper-pagination-bullet:hover {
	background-color: {$carousel['color']['bullet_hover']};
}

#$block_id .ajax-loader__wrapper {
	{$ajax['margin']}
	justify-content: {$ajax['align']};
}
#$block_id .ajax-loader__btn {
	width: {$ajax['width']['desktop']};
	{$ajax['padding']['desktop']}
	{$ajax['border']}
	font-size: {$ajax['font']['size']['desktop']};
	font-weight: {$ajax['font']['weight']};
	font-family: '{$ajax['font']['family']}';
	text-transform: {$ajax['lettercase']};
	text-decoration: {$ajax['decoration']};
	line-height: {$ajax['line_height']};
	letter-spacing: {$ajax['letter_spacing']};
	color: {$ajax['color']['text']};
	border-radius: {$ajax['radius']};
	background-color: {$ajax['color']['bg']};
}
#$block_id .ajax-loader__btn:hover {
	color: {$ajax['color']['text_hover']};
	background-color: {$ajax['color']['bg_hover']};
	border-color: {$ajax['color']['border_hover']};
}
#$block_id .ajax-loader__wrapper .spinner {
	border-color: {$ajax['color']['spinner_secondary']};
	border-top-color: {$ajax['color']['spinner_primary']};
}
@media only screen and (max-width: 1024px) {
	#$block_id .ajax-loader__wrapper {
		font-size: {$ajax['font']['size']['tablet']};
	}
	#$block_id .ajax-loader__btn {
		{$ajax['padding']['tablet']}
		width: {$ajax['width']['tablet']};
	}
}
@media only screen and (max-width: 570px) {
	#$block_id .ajax-loader__wrapper {
		font-size: {$ajax['font']['size']['mobile']};
	}
	#$block_id .ajax-loader__btn {
		{$ajax['padding']['mobile']}
		width: {$ajax['width']['mobile']};
	}
}

.vidplex-grid-carousel__modal.$block_id {
	& .modal__overlay {
		background-color: {$popup_styles['color']['overlay']};
	}
	& .close__icon {
		color: {$popup_styles['color']['close_icon']};
	}
	& .modal__body {
		width: {$popup_styles['width']['desktop']};
		height: {$popup_styles['height']['desktop']};
	}
}
@media only screen and (max-width: 1025px) {
	.vidplex-grid-carousel__modal.$block_id {
		& .modal__body, & .modal__body iframe {
			width: {$popup_styles['width']['tablet']};
			height: auto;
			min-height: {$popup_styles['height']['tablet']};
		}
	}
}
@media only screen and (max-width: 570px) {
	.vidplex-grid-carousel__modal.$block_id {
		& .modal__body, & .modal__body iframe {
			width: {$popup_styles['width']['mobile']};
			height: auto;
			min-height: {$popup_styles['height']['mobile']};
		}
	}
}
";
if ( 'left' === $carousel['bullet']['align'] ) {
	$block_styles .= "
		#$block_id .swiper-pagination {
			padding-left: {$carousel['bullet']['left']['desktop']};
		}
		@media only screen and (max-width: 1025px) {
			#$block_id .swiper-pagination {
				padding-left: {$carousel['bullet']['left']['tablet']};
			}
		}
		@media only screen and (max-width: 570px) {
			#$block_id .swiper-pagination {
				padding-left: {$carousel['bullet']['left']['mobile']};
			}
		}
	";
}
if ( 'right' === $carousel['bullet']['align'] ) {
	$block_styles .= "
		#$block_id .swiper-pagination {
			padding-right: {$carousel['bullet']['right']['desktop']};
		}
		@media only screen and (max-width: 1025px) {
			#$block_id .swiper-pagination {
				padding-right: {$carousel['bullet']['right']['tablet']};
			}
		}
		@media only screen and (max-width: 570px) {
			#$block_id .swiper-pagination {
				padding-right: {$carousel['bullet']['right']['mobile']};
			}
		}
	";
}

$font_families = array();

if ( isset( $attributes['titleStyles']['font']['family'] ) && ! empty( $attributes['titleStyles']['font']['family'] ) ) {
	$font_families[] = $attributes['titleStyles']['font']['family'];
}
if ( isset( $attributes['metaStyles']['font']['family'] ) && ! empty( $attributes['metaStyles']['font']['family'] ) ) {
	$font_families[] = $attributes['metaStyles']['font']['family'];
}
if ( isset( $attributes['typography']['font']['family'] ) && ! empty( $attributes['typography']['font']['family'] ) ) {
	$font_families[] = $attributes['typography']['font']['family'];
}
if ( isset( $attributes['ajax']['font']['family'] ) && ! empty( $attributes['ajax']['font']['family'] ) ) {
	$font_families[] = $attributes['ajax']['font']['family'];
}

// Remove duplicate font families.
$font_families = array_unique( $font_families );
$font_query    = '';
// Add other fonts.
foreach ( $font_families as $key => $family ) {
	if ( 0 === $key ) {
		$font_query .= 'family=' . str_replace( ' ', '+', $family ) . ':wght@100;200;300;400;500;600;700;800;900';
	} else {
		$font_query .= '&family=' . str_replace( ' ', '+', $family ) . ':wght@100;200;300;400;500;600;700;800;900';
	}
}
if ( ! empty( $font_query ) ) {
	// Generate the inline style for the Google Fonts link.
	$google_fonts_url = 'https://fonts.googleapis.com/css2?' . $font_query . '&display=swap';

	echo '<link rel="stylesheet" href="' . $google_fonts_url . '"/>';
}

add_action(
	'wp_enqueue_scripts',
	function () use ( $block_styles ) {
		wp_add_inline_style( 'vidplex-block-styles', vidplex_clean_empty_css( $block_styles ) );
	}
);

wp_localize_script( 'vidplex--grid-carousel--frontend-script', $block_id, $attributes );
wp_add_inline_script( 'vidplex--grid-carousel--frontend-script', 'document.addEventListener("DOMContentLoaded", function(event) { window.vidplexGridCarousel( "' . $block_id . '" ) }) ' );

$wrapper_attributes = get_block_wrapper_attributes();

$classes   = array();
$classes[] = 'vidplex-block-wrapper';
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
	<div <?php echo $wrapper_attributes; ?>>
		<?php
		$classes   = array();
		$classes[] = 'vidplex-block';
		$classes[] = 'vidplex-grid-carousel';
		$classes[] = 'layout-' . $attributes['layout'];
		$classes[] = vidplex_premium_access() && 'gallery' !== $attributes['layout'] && isset( $attributes['popup']['enabled'] ) && $attributes['popup']['enabled'] ? 'has-video-popup' : '';
		$classes[] = 'default' === $attributes['layout'] && 'carousel' === $attributes['displayType'] && isset( $attributes['carousel']['nav']['enabled'], $attributes['carousel']['nav']['showOnHover'] ) && $attributes['carousel']['nav']['enabled'] && $attributes['carousel']['nav']['showOnHover'] ? 'nav-hover-show' : '';
		?>
		<div id="<?php echo $block_id; ?>" class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
			<?php
			if ( 'gallery' !== $attributes['layout'] ) {
				$classes   = array();
				$classes[] = 'display-wrapper';
				$classes[] = 'display-' . $attributes['displayType'];
				$classes[] = 'default' === $attributes['layout'] && 'carousel' === $attributes['displayType'] ? 'swiper-container' : '';
				?>
				<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
					<?php
					if ( 'custom' === $attributes['videoSource'] ) {
						$videos = $attributes['customVideos'];

						if ( ( ( 'default' === $attributes['layout'] && 'grid' === $attributes['displayType'] ) || 'list' === $attributes['layout'] ) && vidplex_premium_access() && isset( $attributes['ajax']['enabled'] ) && filter_var( $attributes['ajax']['enabled'], FILTER_VALIDATE_BOOLEAN ) ) {
							$all_videos = (array) $attributes['customVideos'];
							$offset     = (int) $attributes['ajax']['perPage'];
							$videos     = array_slice( $all_videos, 0, $offset );
						}

						echo \Vidplex\Helpers::grid_carousel_render( $attributes['videoSource'], $videos, $attributes );
					} elseif ( 'channel' === $attributes['videoSource'] ) {
						$videos = \Vidplex\Helpers::video_filters(
							\Vidplex\Store::get_instance()->videos->get_videos_by_channel( $attributes['channelVideos']['channelId'] ),
							array(
								'order'   => $attributes['channelVideos']['order'],
								'orderBy' => $attributes['channelVideos']['orderBy'],
								'exclude' => $attributes['channelVideos']['exclude'],
							)
						);

						if ( intval( $attributes['channelVideos']['perPage'] ) > 0 ) {
							$videos = array_slice( $videos, 0, $attributes['channelVideos']['perPage'] );
						}

						echo \Vidplex\Helpers::grid_carousel_render( $attributes['videoSource'], $videos, $attributes );
					}
					?>
				</div>
				<?php
			} elseif ( vidplex_premium_access() && 'gallery' === $attributes['layout'] ) {
				// Gallery layout.
				$classes   = array();
				$classes[] = 'gallery__wrapper';
				$classes[] = 'display-' . $attributes['gallery']['displayType'];
				?>
				<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
					<?php
					$video_id = '';
					$videos   = array();
					if ( 'custom' === $attributes['videoSource'] ) {
						$videos = $attributes['customVideos'];

						if ( vidplex_premium_access() && 'default' === $attributes['gallery']['displayType'] && isset( $attributes['ajax']['enabled'] ) && filter_var( $attributes['ajax']['enabled'], FILTER_VALIDATE_BOOLEAN ) ) {
							$all_videos = (array) $attributes['customVideos'];
							$offset     = (int) $attributes['ajax']['perPage'];
							$videos     = array_slice( $all_videos, 0, $offset );
						}

						if ( ! empty( $videos ) ) {
							$video_id = $videos[0]['id'];
						}
					} elseif ( 'channel' === $attributes['videoSource'] ) {
						$videos = \Vidplex\Helpers::video_filters(
							\Vidplex\Store::get_instance()->videos->get_videos_by_channel( $attributes['channelVideos']['channelId'] ),
							array(
								'order'   => $attributes['channelVideos']['order'],
								'orderBy' => $attributes['channelVideos']['orderBy'],
								'exclude' => $attributes['channelVideos']['exclude'],
							)
						);

						if ( intval( $attributes['channelVideos']['perPage'] ) > 0 ) {
							$videos = array_slice( $videos, 0, $attributes['channelVideos']['perPage'] );
						}

						$video_id = $videos[0]['video_id'];
					}

					$thumbnail_url = 'https://img.youtube.com/vi/' . $video_id . '/hqdefault.jpg';
					switch ( $attributes['videoStyles']['resolution'] ) {
						case 'default':
							$thumbnail_url = 'https://img.youtube.com/vi/' . $video_id . '/default.jpg';
							break;

						case 'max':
							$thumbnail_url = 'https://img.youtube.com/vi/' . $video_id . '/maxresdefault.jpg';
							break;

						default:
							break;
					}

					$classes   = array();
					$classes[] = 'gallery__player';
					$classes[] = isset( $attributes['gallery']['stickyPlayer'] ) && filter_var( $attributes['gallery']['stickyPlayer'], FILTER_VALIDATE_BOOLEAN ) ? 'is-sticky' : '';
					?>
					<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>" data-video-id="<?php echo esc_attr( $video_id ); ?>">
						<div class="iframe-loader"></div>
						<figure class="video__thumbnail">
							<img src="<?php echo esc_url( $thumbnail_url ); ?>" />
							<i class="yt-play-icon">
								<svg
									height="100%"
									version="1.1"
									viewBox="0 0 68 48"
									width="100%">
									<path
										class="ytp-large-play-button-bg"
										d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
										fill="#f03"></path>
									<path
										d="M 45,24 27,14 27,34"
										fill="#fff"></path>
								</svg>
							</i>
						</figure>
					</div>
					<ul class="gallery__sidebar videos__list">
						<?php echo \Vidplex\Helpers::grid_carousel_render( 'gallery', $videos, $attributes ); ?>
					</ul>
				</div>
				<?php
			}

			if ( vidplex_premium_access() && ( ( 'default' === $attributes['layout'] && 'grid' === $attributes['displayType'] ) || 'list' === $attributes['layout'] || ( 'gallery' === $attributes['layout'] && 'default' === $attributes['gallery']['displayType'] ) ) && isset( $attributes['ajax']['enabled'] ) && filter_var( $attributes['ajax']['enabled'], FILTER_VALIDATE_BOOLEAN ) ) {
				// For Custom Videos
				if ( 'custom' === $attributes['videoSource'] && count( $attributes['customVideos'] ) <= intval( $attributes['ajax']['perPage'] ) ) {
					return;
				}

				if ( 'channel' === $attributes['videoSource'] && intval( $attributes['channelVideos']['perPage'] ) <= 0 ) {
					return;
				}

				$classes   = array();
				$classes[] = 'ajax-loader__wrapper';
				$classes[] = 'scroll' === $attributes['ajax']['type'] ? 'display__none' : '';
				?>
				<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', array_values( $classes ) ) ) ); ?>">
					<button class="ajax-loader__btn">
						<?php
						if ( 'button' === $attributes['ajax']['type'] ) {
							?>
							<span class="btn__label">
								<?php echo esc_html( $ajax['label'] ); ?>
							</span>
						<?php } ?>
						<div class="loader__element display__none">
							<?php
							if ( strlen( $ajax['loading_text'] ) <= 0 ) {
								?>
								<div class="spinner"></div>
							<?php } ?>
							<?php
							if ( strlen( $ajax['loading_text'] ) > 0 ) {
								?>
								<p class="ajax-loader__dots"><?php echo esc_html( $ajax['loading_text'] ); ?></p>
							<?php } ?>
						</div>
					</button>
				</div>
				<?php
			}

			if ( 'default' === $attributes['layout'] && 'carousel' === $attributes['displayType'] ) {
				if ( isset( $attributes['carousel']['bullet']['enabled'] ) && $attributes['carousel']['bullet']['enabled'] ) {
					?>
					<div class="swiper-pagination"></div>
					<?php
				}

				if ( isset( $attributes['carousel']['nav']['enabled'] ) && $attributes['carousel']['nav']['enabled'] ) {
					?>
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
					<?php
				}
			}
			?>
		</div>
	</div>
</div>