<?php
if (function_exists('essb_advancedopts_settings_group')) {
	essb_advancedopts_settings_group('essb_options');
}

function ao_generate_feature_badge($text = '', $type = '')
{
	$badge_class = 'essb-ui-badge essb-ui-badge-sm essb-ui-badge-outline' . ($type != '' ? ' essb-ui-badge-' . $type : '');
	return '<span class="' . $badge_class . '">' . $text . '</span>';
}

function ao_generate_feature_group_panel_no_icon($title = '', $desc = '', $field = '', $deactivate_mode = false)
{
	$state = '';
	$field_value = essb_option_bool_value($field);
	$deactivation_tag = $deactivate_mode ? 'deactivation' : '';
	$value = '';

	if ($deactivate_mode) {
		if (!$field_value) {
			$state = 'active';
			$value = '';
		} else {
			$state = '';
			$value = 'true';
		}
	} else {
		if (!$field_value) {
			$state = '';
			$value = '';
		} else {
			$state = 'active';
			$value = 'true';
		}
	}

?>
	<div class="essb-ui-card-content essb-activate-additional-feature <?php echo esc_attr($state); ?> essb-activate-additional-feature-<?php echo $field; ?>" data-type="<?php echo esc_attr($deactivation_tag); ?>">
		<input type="hidden" name="essb_options[<?php echo esc_attr($field); ?>]" id="essb_<?php echo esc_attr($field); ?>" class="feature-value" value="<?php echo esc_attr($value); ?>" />

		<div class="essb-ui-flex essb-ui-flex100 essb-ui-align-center essb-ui-justify-between essb-ui-gap-4">

			<div class="essb-ui-flex essb-ui-align-center essb-ui-gap-4">

				<div class="essb-ui-flex essb-ui-flex-col essb-ui-gap-1.5">
					<div class="essb-ui-font-semibold essb-ui-line-height-sm essb-ui-text-lg essb-ui-flex essb-ui-align-center essb-ui-gap-1.5"><?php echo $title; ?></div>
					<?php if ($desc != '') { ?>
						<div class=" essb-ui-line-height-base"><?php echo $desc; ?></div>
					<?php } ?>

				</div>
			</div>

			<div class="essb-ui-flex essb-ui-align-center essb-ui-gap-2.5">
				<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-outline essb-activation-status-notactive">Not active</span>
				<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary essb-activation-status-active">Active</span>
				<span class="essb-ui-switch essb-ui-switch-xl">
					<input class="essb-ui-switch-check" data-field="<?php echo $field; ?>" id="essb_ui_switch_<?php echo $field; ?>" type="checkbox" value="1" <?php if ($state == 'active') { ?>checked="checked" <?php } ?>>
				</span>
			</div>
		</div>

	</div>

<?php
}


function ao_generate_feature_panel($title = '', $desc = '', $icon = '', $field = '', $deactivate_mode = false, $link_url = '', $link_text = '')
{
	$state = '';
	$field_value = essb_option_bool_value($field);
	$deactivation_tag = $deactivate_mode ? 'deactivation' : '';
	$value = '';

	if ($deactivate_mode) {
		if (!$field_value) {
			$state = 'active';
			$value = '';
		} else {
			$state = '';
			$value = 'true';
		}
	} else {
		if (!$field_value) {
			$state = '';
			$value = '';
		} else {
			$state = 'active';
			$value = 'true';
		}
	}

	if (empty($link_text)) {
		$link_text = esc_html__('Learn more', 'essb');
	}

?>
	<div class="essb-ui-card essb-ui-mb3 essb-activate-additional-feature <?php echo esc_attr($state); ?> essb-activate-additional-feature-<?php echo $field; ?>" data-type="<?php echo esc_attr($deactivation_tag); ?>">
		<input type="hidden" name="essb_options[<?php echo esc_attr($field); ?>]" id="essb_<?php echo esc_attr($field); ?>" class="feature-value" value="<?php echo esc_attr($value); ?>" />
		<div class="essb-ui-card-content">

			<div class="essb-ui-flex essb-ui-flex100 essb-ui-align-center essb-ui-justify-between essb-ui-gap-4">

				<div class="essb-ui-flex essb-ui-align-center essb-ui-gap-4">

					<div class="essb-ui-icon-frame64">
						<svg class="essb-ui-svg-frame essb-ui-svg-frame-grey" fill="none" height="48" viewBox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
			18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
			39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="">
							</path>
							<path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
			18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
			39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="">
							</path>
						</svg>
						<i class="essb-ui-svg-icon essb-ui-svg-dark-icon">
							<?php echo essb_ui_get_svg_icon($icon); ?>
						</i>
					</div>

					<div class="essb-ui-flex essb-ui-flex-col essb-ui-gap-1.5">
						<div class="essb-ui-font-semibold essb-ui-line-height-sm essb-ui-text-lg essb-ui-flex essb-ui-align-center essb-ui-gap-1.5"><?php echo $title; ?></div>
						<div class="essb-ui-line-height-base"><?php echo $desc; ?></div>
						<?php
						if (!empty($link_url)) {
							echo '<div class="essb-ui-line-height-base"><a class="essb-ui-btn essb-ui-btn-link" href="' . esc_url($link_url) . '" target="_blank">' . $link_text . '</a></div>';
						}
						?>
					</div>
				</div>

				<div class="essb-ui-flex essb-ui-align-center essb-ui-gap-2.5">
					<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-outline essb-activation-status-notactive">Not active</span>
					<span class="essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary essb-activation-status-active">Active</span>
					<span class="essb-ui-switch essb-ui-switch-xl">
						<input class="essb-ui-switch-check" data-field="<?php echo $field; ?>" id="essb_ui_switch_<?php echo $field; ?>" type="checkbox" value="1" <?php if ($state == 'active') { ?>checked="checked" <?php } ?>>
					</span>
				</div>
			</div>

		</div>
	</div>
<?php
}


function ao_generate_feature_block($title = '', $desc = '', $icon = '', $field = '', $deactivate_mode = false)
{

	$state = '';
	$field_value = essb_option_bool_value($field);
	$deactivation_tag = $deactivate_mode ? 'deactivation' : '';
	$value = '';

	if ($deactivate_mode) {
		if (!$field_value) {
			$state = 'active';
			$value = '';
		} else {
			$state = '';
			$value = 'true';
		}
	} else {
		if (!$field_value) {
			$state = '';
			$value = '';
		} else {
			$state = 'active';
			$value = 'true';
		}
	}

?>
	<div class="single-feature <?php echo esc_attr($state); ?>" data-type="<?php echo esc_attr($deactivation_tag); ?>">
		<input type="hidden" name="essb_options[<?php echo esc_attr($field); ?>]" id="essb_<?php echo esc_attr($field); ?>" class="feature-value" value="<?php echo esc_attr($value); ?>" />
		<div class="header"><span class="tag tag-active">Active</span><span class="tag tag-notactive">Not Active</span></div>
		<i class="feature-icon <?php echo esc_attr($icon); ?>"></i>
		<h3><?php echo $title; ?></h3>
		<div class="desc"><?php echo $desc; ?></div>
		<div class="buttons">
			<a href="#" class="activate-btn feature-btn essb-btn"><i class="fa fa-check"></i>Activate</a><a href="#" class="deactivate-btn feature-btn essb-btn"><i class="fa fa-close"></i>Deactivate</a>
		</div>
	</div>
<?php
}

?>
<div class="features-container">
	<div class="navigation">
		<div class="navigation-menu">
			<a href="#" data-tab="sharing">Share Features <span class="small-tag essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary">5/10</span></a>
			<a href="#" data-tab="display" <?php if (essb_option_value('css_mode') == 'light') { ?> style="display: none;" <?php } ?>>Share Display Methods <span class="small-tag essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary">2/12</span></a>
			<a href="#" data-tab="social">Social Features <span class="small-tag essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary">2/12</span></a>
			<a href="#" data-tab="advanced">Advanced Features <span class="small-tag essb-ui-badge essb-ui-badge-sm essb-ui-badge-primary">2/12</span></a>
			<a href="#" data-tab="addons">Add-Ons</a>
		</div>
	</div>
	<div class="content">
		<div class="content-tab tab-sharing">
			<div class="features-manage essb-ui-flex essb-ui-flex-col essb-ui-pt4 essb-ui-pb4">
				<?php
				ao_generate_feature_panel(
					esc_html__('Pinterest Pro', 'essb'),
					esc_html__('The Pinterest Pro feature in Easy Social Share Buttons adds hover-activated "Pin" buttons to images, allowing customization of positioning, text, and size criteria. It supports lazy-loaded images, page builders, grid-based sharing, hidden image sharing, and a Pinterest follow box.', 'essb'),
					'pinterest',
					'deactivate_module_pinterestpro',
					true,
					'https://socialsharingplugin.com/pinterest-pro-image-hover-pins/'
				);
				ao_generate_feature_panel(esc_html__('Sharable Quotes', 'essb'), esc_html__('Effortlessly boost X (formerly Twitter) shares with beautifully designed click-to-share quotes—no coding needed', 'essb'), 'twitter_x', 'deactivate_ctt', true, 'https://socialsharingplugin.com/click-to-tweet/');
				ao_generate_feature_panel(esc_html__('WooCommerce', 'essb'), esc_html__('Unlock additional WooCommerce display methods and seamless integrations to maximize your store\'s social sharing potential.', 'essb'), 'cart', 'deactivate_method_woocommerce', true, 'https://socialsharingplugin.com/woocommerce-social-sharing/');
				ao_generate_feature_panel(esc_html__('Share Optimizations', 'essb'), esc_html__('Add social share optimization tags for precise control over shared content.', 'essb'), 'share_optimization', 'deactivate_module_shareoptimize', true);
				ao_generate_feature_panel(esc_html__('Share Counters', 'essb'), esc_html__('Include functions to update and display the share counters. When turned off, it will also disable additional functions that use share values, such as Fake Share Counters, Avoid Negative Social Proof, Share Counter Recovery, etc', 'essb'), 'numbers', 'deactivate_share_counters', true);
				ao_generate_feature_panel(esc_html__('Internal Share Counters', 'essb'), esc_html__('The internal share counters are stored locally in the database and generated with each click on a share button. You can use those internal counters for all social networks that do not have API for reading shares. You can also converge the networks with API to track shares locally in the database.', 'essb'), 'database_reload', 'deactivate_postcount', true);
				ao_generate_feature_panel(esc_html__('Avoid Negative Social Proof', 'essb'), esc_html__('Hide social share counters until they reach a specified number of shares.', 'essb'), 'shield', 'deactivate_ansp', true);
				ao_generate_feature_panel(esc_html__('Social Shares Recovery', 'essb'), esc_html__('Recover number of shares from specific URL changes', 'essb'), 'data_recovery', 'deactivate_ssr', true);
				ao_generate_feature_panel(esc_html__('Fake Share Counters', 'essb'), esc_html__('Fake share counters let you boost numbers with a multiplier. Additionally, you can set custom values as internal counters across all networks.', 'essb'), 'fake_counter', 'deactivate_fakecounters', true);
				ao_generate_feature_panel(esc_html__('Plugin Analytics', 'essb'), esc_html__('Track social sharing performance with privacy-safe analytics for WordPress. Gain real-time insights to optimize buttons and forms effortlessly, enhancing engagement while respecting user privacy.', 'essb'), 'analytics', 'deactivate_module_analytics', true, 'https://socialsharingplugin.com/social-sharing/advanced-privacy-safe-analytics-for-wordpress-share-buttons/');
				ao_generate_feature_panel(esc_html__('Short URL', 'essb'), esc_html__('Generate short URLs for sharing on social networks', 'essb'), 'short_url', 'deactivate_module_shorturl', true);
				ao_generate_feature_panel(esc_html__('Expert Share Counter Options', 'essb') . ao_generate_feature_badge('Expert', 'info'), esc_html__('Include expert level share counter update options for fine-tuning of the values and the update process.', 'essb'), 'options', 'deactivate_expertcounters', true);
				ao_generate_feature_panel(esc_html__('After Share Actions', 'essb'), esc_html__('Enhance user engagement by implementing after-share actions with Easy Social Share Buttons for WordPress. This feature allows you to present native social follow buttons, subscription forms, or custom messages immediately after a user shares your content, encouraging further interaction and fostering a deeper connection with your audience.', 'essb'), 'share_events', 'deactivate_module_aftershare', true, 'https://socialsharingplugin.com/after-share-actions-for-share-buttons/?aftershare=follow');
				ao_generate_feature_panel(esc_html__('Google Analytics Tracking', 'essb'), esc_html__('Generate UTM tracking code to the outgoing shared URLs or track events of sharing in Google Analytics.', 'essb'), 'google_analytics', 'deactivate_module_google_analytics', true);
				ao_generate_feature_panel(esc_html__('Affiliate & Point Integration', 'essb'), esc_html__('Integrate plugin work with myCred, AffiliateWP, SliceWP', 'essb'), 'affiliate', 'deactivate_module_affiliate', true);
				ao_generate_feature_panel(esc_html__('Message Before Buttons', 'essb'), esc_html__('Add a custom message before or above share buttons "ex: Share this"', 'essb'), 'custom_share', 'deactivate_module_message', true);
				ao_generate_feature_panel(esc_html__('Custom Share', 'essb'), esc_html__('Custom share feature makes possible to change the share URL that plugin will use', 'essb'), 'custom_share', 'deactivate_module_customshare', true);
				ao_generate_feature_panel(esc_html__('Social Metrics Lite', 'essb'), esc_html__('Log the official share values into a dashboard to see the most popular posts', 'essb'), 'dashboard', 'deactivate_module_metrics', true);
				ao_generate_feature_panel(esc_html__('Style Library', 'essb'), esc_html__('Save and reuse again already configured styles and network list. Saved in the library you can also move the style to a new site. Try also one of 40+ already configured styles if you wonder how to start.', 'essb'), 'brush', 'deactivate_stylelibrary', true);
				?>
			</div>

		</div>
		<div class="content-tab tab-display">
			<div class="features-manage essb-ui-flex essb-ui-flex-col essb-ui-pt4 essb-ui-pb4">
				<div class="essb-ui-card essb-ui-card-group">
					<?php
					ao_generate_feature_group_panel_no_icon(esc_html__('Sidebar', 'essb'), '', 'deactivate_method_sidebar', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Float From Above The Content', 'essb'), '', 'deactivate_method_float', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Post Vertical Float', 'essb'), '', 'deactivate_method_postfloat', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Top Bar', 'essb'), '', 'deactivate_method_topbar', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Bottom Bar', 'essb'), '', 'deactivate_method_bottombar', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Pop Up', 'essb'), '', 'deactivate_method_popup', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Fly In', 'essb'), '', 'deactivate_method_flyin', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Hero Share', 'essb'), '', 'deactivate_method_heroshare', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Post Bar', 'essb'), '', 'deactivate_method_postbar', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Point', 'essb'), '', 'deactivate_method_point', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('On Media', 'essb'), '', 'deactivate_method_image', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Follow Me Bar', 'essb'), '', 'deactivate_method_followme', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Corner Share', 'essb'), '', 'deactivate_method_corner', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Share Booster', 'essb'), '', 'deactivate_method_booster', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Share Button', 'essb'), '', 'deactivate_method_sharebutton', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Excerpt', 'essb'), '', 'deactivate_method_except', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Widget', 'essb'), '', 'deactivate_method_widget', true);
					ao_generate_feature_group_panel_no_icon(esc_html__('Advanced Mobile Options', 'essb'), '', 'deactivate_method_advanced_mobile', true);
					?>
				</div>
			</div>


		</div>
		<div class="content-tab tab-social">
			<div class="features-manage essb-ui-flex essb-ui-flex-col essb-ui-pt4 essb-ui-pb4">
				<?php
				ao_generate_feature_panel(esc_html__('Social Followers Counter', 'essb'), esc_html__('Show the number of followers for 30+ social networks', 'essb'), 'heart', 'deactivate_module_followers', true, 'https://socialsharingplugin.com/social-followers-counter/');
				ao_generate_feature_panel(esc_html__('Social Profile Links', 'essb'), esc_html__('Add plain buttons for your social profiles with shortcode, widget or sidebar', 'essb'), 'user_heart', 'deactivate_module_profiles', true, 'https://socialsharingplugin.com/social-profiles/');
				ao_generate_feature_panel(esc_html__('Subscribe Forms', 'essb'), esc_html__('Add easy to use subscribe to mail list forms', 'essb'), 'mail', 'deactivate_module_subscribe', true, 'https://socialsharingplugin.com/grow-your-mailing-list-subscribers/');
				ao_generate_feature_panel(esc_html__('Click 2 Chat', 'essb'), esc_html__('Add click to chat feature for WhatsApp and Viber', 'essb'), 'chat', 'deactivate_module_clicktochat', true, 'https://socialsharingplugin.com/social-chat/');
				ao_generate_feature_panel(esc_html__('Instagram Feed', 'essb'), esc_html__('Enable generation of Instagram feed on site', 'essb'), 'instagram', 'deactivate_module_instagram', true, 'https://socialsharingplugin.com/instagram-feed-grow-your-instagram-followers/');
				ao_generate_feature_panel(esc_html__('Social Proof Notifications Lite', 'essb'), esc_html__('Enable display of share counter social proof notification messages', 'essb'), 'notification', 'deactivate_module_proofnotifications', true, 'https://socialsharingplugin.com/social-proof-notifications/?demo=824');

				?>
			</div>
		</div>
		<div class="content-tab tab-advanced">
			<div class="features-manage essb-ui-flex essb-ui-flex-col essb-ui-pt4 essb-ui-pb4">
				<?php
				ao_generate_feature_panel(esc_html__('Functions Translate', 'essb'), esc_html__('Allow to translate preset plugin texts on your language', 'essb'), 'translate', 'deactivate_module_translate', true);
				ao_generate_feature_panel(esc_html__('Custom Network Buttons', 'essb'), esc_html__('Enable the function to add custom network buttons in the sharing or following.', 'essb'), 'buttons', 'deactivate_custombuttons', true);
				ao_generate_feature_panel(esc_html__('Custom Display/Positions', 'essb'), esc_html__('The custom display/positions makes possible to create a custom position inside plugin. This position you can show with shortcode of functional call anywhere on site.', 'essb'), 'content', 'deactivate_custompositions', true);
				ao_generate_feature_panel(esc_html__('Custom Code in Display Methods for Share Buttons', 'essb'), esc_html__('Enable adding custom HTML or CSS code for the display methods. The custom code will be used only when the share display method is running.', 'essb'), 'custom_code', 'activate_customcode_share_methods');
				ao_generate_feature_panel(esc_html__('Conversion Tracking', 'essb'), esc_html__('Enable the tracking of share or subscribe conversions', 'essb'), 'dashboard', 'deactivate_module_conversions', true);
				ao_generate_feature_panel(esc_html__('Automatic Mobile Setup', 'essb'), esc_html__('Activate automatic responsive mobile setup of share buttons', 'essb'), 'mobile', 'activate_mobile_auto');
				ao_generate_feature_panel(esc_html__('Integrations With Plugins', 'essb'), esc_html__('Additional integrations available with BuddyPress, bbPress and etc.', 'essb'), 'plugin', 'deactivate_method_integrations', true);
				ao_generate_feature_panel(esc_html__('Settings by Post Type', 'essb'), esc_html__('Allow additional settings for different post types', 'essb'), 'check_list', 'deactivate_settings_post_type', true);

				ao_generate_feature_panel(esc_html__('Internal Share Counters', 'essb'), esc_html__('The internal share counter option allows to change the generated counters on site and track them internally for all networks.', 'essb'), 'content_numbers', 'activate_fake');
				ao_generate_feature_panel(esc_html__('Hooks Integration', 'essb'), esc_html__('Easy assign share buttons to theme or plugin actions/filters. You can also use it to create a custom display methods.', 'essb'), 'slider', 'activate_hooks');
				ao_generate_feature_panel(esc_html__('Minimal Share Counters', 'essb'), esc_html__('Set a minimal share value that will be shown till the official value become greater', 'essb'), 'order_number', 'activate_minimal');

				?>
			</div>
		</div>

		<div class="content-tab tab-addons">
			<div class="essb-addons-container">
				<!-- addons -->
				<?php
				/**
				 * ESSB Free Add-ons — Compact Horizontal List
				 * Drop-in replacement for the addons-container block.
				 * All CSS and JS are inline so this is fully self-contained.
				 */
				?>

				<style>
					/* ============================================================
   ESSB Free Add-ons Compact List
   Prefix: essb-al-  (addons list)
   ============================================================ */

					:root {
						--essb-al-primary: #1b84ff;
						--essb-al-primary-dark: #0e6fd4;
						--essb-al-primary-light: #e8f3ff;
						--essb-al-secondary: #172153;
						--essb-al-text: #121212;
						--essb-al-muted: #6b7280;
						--essb-al-light: #9ca3af;
						--essb-al-bg: #ffffff;
						--essb-al-bg-subtle: #f8faff;
						--essb-al-border: #e4e9f5;
						--essb-al-border-light: #f0f3fa;
						--essb-al-free-bg: #ecfdf5;
						--essb-al-radius: 5px;
						--essb-al-shadow: 0 1px 3px rgba(23, 33, 83, .07), 0 1px 2px rgba(23, 33, 83, .04);
						--essb-al-shadow-hover: 0 6px 20px rgba(27, 132, 255, .12), 0 2px 6px rgba(27, 132, 255, .07);
						--essb-al-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
					}

					/* Filter bar */
					.essb-al-filter-bar {
						display: flex;
						align-items: center;
						gap: 8px;
						flex-wrap: wrap;
						background: var(--essb-al-bg);
						border: 1px solid var(--essb-al-border);
						border-radius: var(--essb-al-radius);
						padding: 8px 12px;
						margin-bottom: 14px;
						box-shadow: var(--essb-al-shadow);
						font-family: var(--essb-al-font);
					}

					.essb-al-filter-label {
						font-size: 11px;
						font-weight: 600;
						color: var(--essb-al-muted);
						text-transform: uppercase;
						letter-spacing: .7px;
						white-space: nowrap;
					}

					.essb-al-filter-divider {
						width: 1px;
						height: 18px;
						background: var(--essb-al-border);
						flex-shrink: 0;
					}

					.essb-al-filter-group {
						display: flex;
						align-items: center;
						gap: 4px;
						flex-wrap: wrap;
					}

					.essb-al-filter-group-label {
						font-size: 11px;
						font-weight: 600;
						color: var(--essb-al-light);
						text-transform: uppercase;
						letter-spacing: .5px;
						white-space: nowrap;
						margin-right: 2px;
					}

					.essb-al-cat-btn {
						display: inline-flex;
						align-items: center;
						padding: 4px 9px;
						border-radius: var(--essb-al-radius);
						border: 1px solid var(--essb-al-border);
						background: var(--essb-al-bg);
						color: var(--essb-al-muted);
						font-size: 12px;
						font-weight: 500;
						cursor: pointer;
						transition: all .14s ease;
						white-space: nowrap;
						font-family: var(--essb-al-font);
						line-height: 1;
					}

					.essb-al-cat-btn:hover {
						border-color: var(--essb-al-primary);
						color: var(--essb-al-primary);
						background: var(--essb-al-primary-light);
					}

					.essb-al-cat-btn.essb-al-cat-active {
						border-color: var(--essb-al-secondary);
						background: var(--essb-al-secondary);
						color: #fff;
					}

					.essb-al-filter-count {
						margin-left: auto;
						font-size: 12px;
						color: var(--essb-al-muted);
						font-family: var(--essb-al-font);
						white-space: nowrap;
					}

					.essb-al-filter-count strong {
						font-weight: 700;
						color: var(--essb-al-secondary);
					}

					/* List */
					.essb-al-list {
						display: flex;
						flex-direction: column;
						gap: 7px;
						font-family: var(--essb-al-font);
					}

					/* Row */
					.essb-al-row {
						background: var(--essb-al-bg);
						border: 1px solid var(--essb-al-border);
						border-radius: var(--essb-al-radius);
						display: flex;
						align-items: center;
						box-shadow: var(--essb-al-shadow);
						transition: box-shadow .16s ease, border-color .16s ease;
						position: relative;
						overflow: hidden;
					}

					.essb-al-row:hover {
						box-shadow: var(--essb-al-shadow-hover);
						border-color: rgba(27, 132, 255, .22);
					}

					/* Featured row highlight */
					.essb-al-row-featured {
						border-left: 3px solid var(--essb-al-primary);
					}

					/* Incompatible row */
					.essb-al-row-incompatible {
						opacity: .7;
					}

					.essb-al-row-incompatible:hover {
						box-shadow: var(--essb-al-shadow);
						border-color: var(--essb-al-border);
					}

					/* Hidden */
					.essb-al-row-hidden {
						display: none !important;
					}

					/* Col 1: Icon */
					.essb-al-icon-col {
						padding: 11px 12px 11px 14px;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.essb-al-icon-wrap {
						width: 42px;
						height: 42px;
						border-radius: var(--essb-al-radius);
						background: var(--essb-al-bg-subtle);
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
						overflow: hidden;
					}

					/* Size the SVG inside the icon wrap */
					.essb-al-icon-wrap svg {
						width: 24px;
						height: 24px;
						display: block;
						flex-shrink: 0;
					}

					/* Apply icon colour — fill type */
					.essb-al-icon-fill svg path,
					.essb-al-icon-fill svg rect,
					.essb-al-icon-fill svg circle,
					.essb-al-icon-fill svg polygon {
						fill: var(--essb-al-icon-c, #ffffff);
					}

					/* Apply icon colour — stroke type */
					.essb-al-icon-stroke svg path,
					.essb-al-icon-stroke svg rect,
					.essb-al-icon-stroke svg circle,
					.essb-al-icon-stroke svg polygon {
						stroke: var(--essb-al-icon-c, #ffffff);
						fill: none;
					}

					/* Col 2: Content */
					.essb-al-content-col {
						flex: 1;
						padding: 11px 14px 11px 4px;
						display: flex;
						flex-direction: column;
						gap: 2px;
						min-width: 0;
					}

					.essb-al-title-row {
						display: flex;
						align-items: center;
						gap: 7px;
						flex-wrap: wrap;
					}

					.essb-al-title {
						font-size: 13px;
						font-weight: 700;
						color: var(--essb-al-secondary);
						white-space: nowrap;
						line-height: 1.2;
					}

					.essb-al-category {
						display: inline-flex;
						align-items: center;
						font-size: 10px;
						font-weight: 600;
						color: var(--essb-al-primary);
						text-transform: uppercase;
						letter-spacing: .5px;
						padding: 2px 6px;
						background: var(--essb-al-primary-light);
						border-radius: 3px;
						white-space: nowrap;
						flex-shrink: 0;
					}

					.essb-al-featured-badge {
						display: inline-flex;
						align-items: center;
						gap: 3px;
						padding: 2px 6px;
						border-radius: 3px;
						font-size: 10px;
						font-weight: 700;
						text-transform: uppercase;
						letter-spacing: .4px;
						background: var(--essb-al-primary-light);
						color: var(--essb-al-primary);
						border: 1px solid rgba(27, 132, 255, .2);
						flex-shrink: 0;
					}

					.essb-al-featured-badge svg {
						width: 8px;
						height: 8px;
						fill: var(--essb-al-primary);
					}

					.essb-al-desc {
						font-size: 12px;
						color: var(--essb-al-muted);
						line-height: 1.5;
						margin: 0;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.essb-al-links {
						display: flex;
						align-items: center;
						gap: 6px;
						margin-top: 2px;
						flex-wrap: wrap;
					}

					.essb-al-link {
						display: inline-flex;
						align-items: center;
						gap: 3px;
						font-size: 11px;
						font-weight: 500;
						color: var(--essb-al-muted);
						text-decoration: none;
						transition: color .13s ease;
						line-height: 1;
					}

					.essb-al-link:hover {
						color: var(--essb-al-primary);
					}

					.essb-al-link svg {
						width: 10px;
						height: 10px;
						fill: currentColor;
						flex-shrink: 0;
					}

					.essb-al-link-sep {
						width: 3px;
						height: 3px;
						border-radius: 50%;
						background: var(--essb-al-border);
						flex-shrink: 0;
					}

					/* Incompatible + not activated notices */
					.essb-al-notice {
						display: inline-flex;
						align-items: center;
						gap: 4px;
						font-size: 11px;
						font-weight: 500;
						color: #dc2626;
						white-space: nowrap;
					}

					.essb-al-notice svg {
						width: 11px;
						height: 11px;
						fill: #dc2626;
						flex-shrink: 0;
					}

					.essb-al-notice-warn {
						color: var(--essb-al-muted);
					}

					.essb-al-notice-warn svg {
						fill: var(--essb-al-muted);
					}

					/* Divider between content and action */
					.essb-al-divider {
						width: 1px;
						height: 34px;
						background: var(--essb-al-border-light);
						flex-shrink: 0;
					}

					/* Col 3: Action */
					.essb-al-action-col {
						padding: 11px 14px;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						min-width: 110px;
						justify-content: flex-end;
					}

					/* No results */
					.essb-al-no-results {
						display: none;
						text-align: center;
						padding: 36px 20px;
						color: var(--essb-al-muted);
						font-size: 13px;
						font-family: var(--essb-al-font);
					}

					.essb-al-no-results svg {
						width: 32px;
						height: 32px;
						fill: var(--essb-al-border);
						display: block;
						margin: 0 auto 10px;
					}

					.essb-al-no-results-title {
						font-weight: 700;
						color: var(--essb-al-secondary);
						margin-bottom: 4px;
						font-size: 14px;
					}
				</style>

				<?php
				if (! function_exists('get_plugins')) {
					require_once wp_normalize_path(ABSPATH . 'wp-admin/includes/plugin.php');
				}

				$current_addon_list  = ESSB_MyAddons_API::get_free_addons_full();
				$current_plugin_list = essb_get_site_plugins();

				// -----------------------------------------------------------------------
				// Collect all unique categories present in the list so we can build the
				// filter bar dynamically — no hard-coded category list needed.
				// -----------------------------------------------------------------------
				$all_categories = [];
				foreach ($current_addon_list as $key => $data) {
					$cat = isset($data['category']) ? trim($data['category']) : '';
					if ($cat !== '' && !in_array($cat, $all_categories, true)) {
						$all_categories[] = $cat;
					}
				}
				sort($all_categories);

				$total_addons = count($current_addon_list);
				?>

				<!-- Filter bar -->
				<div class="essb-al-filter-bar">
					<span class="essb-al-filter-label">Filter</span>
					<?php if (!empty($all_categories)) : ?>
						<span class="essb-al-filter-divider"></span>
						<div class="essb-al-filter-group" id="essb-al-cat-group">
							<span class="essb-al-filter-group-label">Category</span>
							<?php foreach ($all_categories as $cat) : ?>
								<button
									class="essb-al-cat-btn"
									type="button"
									data-filter-cat="<?php echo esc_attr(strtolower($cat)); ?>"><?php echo esc_html($cat); ?></button>
							<?php endforeach; ?>
						</div>
					<?php endif; ?>
					<span class="essb-al-filter-count">
						<strong id="essb-al-visible-count"><?php echo (int) $total_addons; ?></strong> add-ons
					</span>
				</div>

				<!-- List -->
				<div class="essb-al-list" id="essb-al-list">

					<?php foreach ($current_addon_list as $key => $data) :

						// ------------------------------------------------------------------
						// Resolve compatibility
						// ------------------------------------------------------------------
						$not_compatible = false;
					    $pro_running = false;
						$requires       = isset($data['requires']) ? $data['requires'] : '';
						if (!empty($requires) && version_compare(ESSB3_VERSION, $requires) < 0) {
							$not_compatible = true;
						}
					

						// ------------------------------------------------------------------
						// Pro Check
						// ------------------------------------------------------------------
						if (isset($data['pro_check'])) {
							$pro_check_param = isset($data['pro_check']['param']) ? $data['pro_check']['param'] : '';
							$pro_check_type = isset($data['pro_check']['type']) ? $data['pro_check']['type'] : '';
							
							if (!empty($pro_check_type) && !empty($pro_check_param)) {
								if ($pro_check_type == 'param') {
									if (defined($pro_check_param)) {
										$pro_running = true;
									}
								}
								if ($pro_check_type == 'function') {
									if (function_exists($pro_check_param)) {
										$pro_running = true;
									}
								}
								if ($pro_check_type == 'class') {
									if (class_exists($pro_check_param)) {
										$pro_running = true;
									}
								}
							}
							
							if ($pro_running) {
								$not_compatible = true;
							}
						}

						// ------------------------------------------------------------------
						// Resolve install / activate / deactivate URLs and button state
						// ------------------------------------------------------------------
						$url_install = wp_nonce_url(
							add_query_arg(
								[
									'plugin'             => urlencode($key),
									'essb-tgmpa-install' => 'install-plugin',
								],
								admin_url('admin.php?page=essb_redirect_addons')
							),
							'essb-tgmpa-install',
							'essb-tgmpa-nonce'
						);

						$url_command   = $url_install;
						$command_text  = 'Install';
						$command_class = 'button-primary';
						$is_active     = false;

						if (isset($current_plugin_list[$key])) {
							$addon_slug     = $current_plugin_list[$key]['path'];
							$url_activate   = wp_nonce_url("plugins.php?action=activate&plugin={$addon_slug}", "activate-plugin_{$addon_slug}");
							$url_deactivate = wp_nonce_url("plugins.php?action=deactivate&plugin={$addon_slug}", "deactivate-plugin_{$addon_slug}");
							$is_active      = (bool) $current_plugin_list[$key]['active'];
							$url_command    = $is_active ? $url_deactivate : $url_activate;
							$command_text   = $is_active ? 'Deactivate' : 'Activate';
							$command_class  = $is_active ? 'button-deactivate' : 'button-activate';
						}

						// ------------------------------------------------------------------
						// Data fields
						// ------------------------------------------------------------------
						$addon_name       = isset($data['name'])           ? $data['name']           : $key;
						$addon_desc       = isset($data['description'])    ? $data['description']    : '';
						$addon_svg        = isset($data['svg_icon'])       ? $data['svg_icon']       : '';
						$addon_bg_color   = isset($data['color'])          ? $data['color']          : '#e4e9f5';
						$addon_icon_color = isset($data['svg_icon_color']) ? $data['svg_icon_color'] : '#ffffff';
						$addon_color_type = isset($data['svg_color_type']) ? $data['svg_color_type'] : 'fill'; // 'fill' or 'stroke'
						$addon_cat        = isset($data['category'])       ? trim($data['category']) : '';
						$addon_cat_lc     = strtolower($addon_cat);
						$is_featured      = !empty($data['featured']);
						$addon_docs       = isset($data['docs'])           ? $data['docs']           : '';
						$addon_page       = isset($data['page'])           ? $data['page']           : '';

						// ------------------------------------------------------------------
						// Row CSS classes
						// ------------------------------------------------------------------
						$row_classes = ['essb-al-row'];
						if ($is_featured)    $row_classes[] = 'essb-al-row-featured';
						if ($not_compatible) $row_classes[] = 'essb-al-row-incompatible';

						$row_attr_cat = $addon_cat_lc !== '' ? ' data-addon-category="' . esc_attr($addon_cat_lc) . '"' : '';

					?>
						<div class="<?php echo implode(' ', $row_classes); ?>" <?php echo $row_attr_cat; ?>>

							<!-- Icon -->
							<div class="essb-al-icon-col">
								<?php
								// Build a CSS rule that colours every fill or stroke path in the SVG.
								// The SVG code from the API already has the correct path data; we just
								// override the colour attribute via a wrapping <span> with a CSS custom
								// property so the SVG inherits it without modifying the raw SVG markup.
								$icon_css = 'background:' . esc_attr($addon_bg_color) . ';';
								if ($addon_color_type === 'stroke') {
									$svg_style = '--essb-al-icon-c:' . esc_attr($addon_icon_color) . ';';
								} else {
									$svg_style = '--essb-al-icon-c:' . esc_attr($addon_icon_color) . ';';
								}
								?>
								<div class="essb-al-icon-wrap essb-al-icon-<?php echo esc_attr($addon_color_type); ?>"
									style="<?php echo $icon_css . $svg_style; ?>">
									<?php if (!empty($addon_svg)) : ?>
										<?php echo $addon_svg; // SVG is trusted data from the plugin's own API 
										?>
									<?php endif; ?>
								</div>
							</div>

							<!-- Content -->
							<div class="essb-al-content-col">

								<!-- Title row: name + category tag + featured badge -->
								<div class="essb-al-title-row">
									<span class="essb-al-title"><?php echo esc_html($addon_name); ?></span>

									<?php if ($addon_cat !== '') : ?>
										<span class="essb-al-category"><?php echo esc_html($addon_cat); ?></span>
									<?php endif; ?>

									<?php if ($is_featured) : ?>
										<span class="essb-al-featured-badge">
											<svg viewBox="0 0 20 20">
												<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
											</svg>
											Featured
										</span>
									<?php endif; ?>

									<?php if ($not_compatible && !$pro_running) : ?>
										<span class="essb-al-notice">
											<svg viewBox="0 0 20 20">
												<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
											</svg>
											Requires v<?php echo esc_html($requires); ?>
										</span>
									<?php endif; ?>

									<?php if ($not_compatible && $pro_running) : ?>
										<span class="essb-al-notice">
											<svg viewBox="0 0 20 20">
												<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
											</svg>
											Pro version is currently active.
										</span>
									<?php endif; ?>
								</div>

								<!-- Description -->
								<?php if (!empty($addon_desc)) : ?>
									<p class="essb-al-desc"><?php echo esc_html($addon_desc); ?></p>
								<?php endif; ?>

								<!-- Docs / Learn More links -->
								<?php if (!empty($addon_docs) || !empty($addon_page)) : ?>
									<div class="essb-al-links">
										<?php if (!empty($addon_docs)) : ?>
											<a href="<?php echo esc_url($addon_docs); ?>" target="_blank" rel="noopener noreferrer" class="essb-al-link">
												<svg viewBox="0 0 20 20">
													<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
												</svg>
												<?php esc_html_e('Documentation', 'essb'); ?>
											</a>
										<?php endif; ?>

										<?php if (!empty($addon_docs) && !empty($addon_page)) : ?>
											<span class="essb-al-link-sep"></span>
										<?php endif; ?>

										<?php if (!empty($addon_page)) : ?>
											<a href="<?php echo esc_url($addon_page); ?>" target="_blank" rel="noopener noreferrer" class="essb-al-link">
												<svg viewBox="0 0 20 20">
													<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
													<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
												</svg>
												<?php esc_html_e('Learn More', 'essb'); ?>
											</a>
										<?php endif; ?>
									</div>
								<?php endif; ?>

							</div><!-- /content col -->

							<!-- Divider -->
							<div class="essb-al-divider"></div>

							<!-- Action -->
							<div class="essb-al-action-col">
								<?php if (!$not_compatible) : ?>
									<a class="button <?php echo esc_attr($command_class); ?>"
										href="<?php echo esc_url($url_command); ?>"><?php echo esc_html($command_text); ?></a>
								<?php endif; ?>

							</div><!-- /action col -->

						</div><!-- /row -->

					<?php endforeach; ?>

					<!-- No results placeholder -->
					<div class="essb-al-no-results" id="essb-al-no-results">
						<svg viewBox="0 0 24 24">
							<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
						</svg>
						<div class="essb-al-no-results-title"><?php esc_html_e('No add-ons match your selection', 'essb'); ?></div>
						<div><?php esc_html_e('Try adjusting your category filter.', 'essb'); ?></div>
					</div>

				</div><!-- /essb-al-list -->

				<script>
					(function() {
						'use strict';

						/**
						 * ESSBAddonListFilter
						 * Category multi-select filter for the compact free add-ons list.
						 */
						class ESSBAddonListFilter {
							constructor(opts) {
								this.listId = opts.listId || 'essb-al-list';
								this.catGroupId = opts.catGroupId || 'essb-al-cat-group';
								this.countId = opts.countId || 'essb-al-visible-count';
								this.noResultsId = opts.noResultsId || 'essb-al-no-results';
								this.rowSel = opts.rowSel || '.essb-al-row';
								this.CLS_ACTIVE = 'essb-al-cat-active';
								this.CLS_HIDDEN = 'essb-al-row-hidden';
								this._cats = new Set();
								this._init();
							}

							_init() {
								this._list = document.getElementById(this.listId);
								this._countEl = document.getElementById(this.countId);
								this._noResults = document.getElementById(this.noResultsId);
								this._catGroup = document.getElementById(this.catGroupId);

								if (!this._list) return;

								if (this._catGroup) {
									this._catGroup.querySelectorAll('[data-filter-cat]').forEach(btn => {
										btn.addEventListener('click', () => this._toggleCat(btn));
									});
								}

								this._apply();
							}

							_toggleCat(btn) {
								const cat = btn.getAttribute('data-filter-cat');
								if (this._cats.has(cat)) {
									this._cats.delete(cat);
									btn.classList.remove(this.CLS_ACTIVE);
								} else {
									this._cats.add(cat);
									btn.classList.add(this.CLS_ACTIVE);
								}
								this._apply();
							}

							_apply() {
								const rows = this._list.querySelectorAll(this.rowSel);
								let visible = 0;

								rows.forEach(row => {
									if (row.id === this.noResultsId) return;
									const rowCat = (row.getAttribute('data-addon-category') || '').trim();
									const pass = this._cats.size === 0 || this._cats.has(rowCat);
									if (pass) {
										row.classList.remove(this.CLS_HIDDEN);
										visible++;
									} else {
										row.classList.add(this.CLS_HIDDEN);
									}
								});

								if (this._countEl) this._countEl.textContent = visible;
								if (this._noResults) this._noResults.style.display = visible === 0 ? 'block' : 'none';
							}

							/** Programmatically clear all active category filters */
							reset() {
								this._cats.clear();
								if (this._catGroup) {
									this._catGroup.querySelectorAll('[data-filter-cat]')
										.forEach(b => b.classList.remove(this.CLS_ACTIVE));
								}
								this._apply();
							}
						}

						// Boot — wait for DOM ready (script is inline so DOM may not be ready yet)
						if (document.readyState === 'loading') {
							document.addEventListener('DOMContentLoaded', boot);
						} else {
							boot();
						}

						function boot() {
							window.essbAddonListFilter = new ESSBAddonListFilter({
								listId: 'essb-al-list',
								catGroupId: 'essb-al-cat-group',
								countId: 'essb-al-visible-count',
								noResultsId: 'essb-al-no-results',
								rowSel: '.essb-al-row'
							});
						}
					}());
				</script>

				<!-- end: addons -->
			</div>
		</div>
	</div>

</div>