<?php

/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2025 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */

require_once JPATH_ROOT . '/components/com_sppagebuilder/helpers/rate-limiter.php';
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Session\Session;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Component\ComponentHelper;
use JoomShaper\SPPageBuilder\Comment\Services\CommentService;
use JoomShaper\SPPageBuilder\DynamicContent\Supports\Date;

//no direct access
defined('_JEXEC') or die('Restricted access');

class SppagebuilderAddonComment extends SppagebuilderAddons
{
	/**
	 * The addon frontend render method.
	 * The returned HTML string will render to the frontend page.
	 *
	 * @return  string  The HTML string.
	 * @since   1.0.0
	 */
	public function render()
	{
		$input = Factory::getApplication()->input;
		$collectionType = $input->get('collection_type', null, 'string');

		$viewType = $input->get('view', null, 'string');

		$articleId = $input->get('id', null, 'int');

		if ($collectionType === 'articles') {
			if (!\class_exists('SppagebuilderHelperArticles')) {
				require_once JPATH_ROOT . '/components/com_sppagebuilder/helpers/articles.php';
			}
			$articleId = Factory::getApplication()->input->get('collection_item_id', null, 'array');
			$articleId = $articleId ? $articleId[0] : null;
			$authorised = \SppagebuilderHelperArticles::checkAuthorised($articleId);
	
			if (!$authorised) {
				return "";
			}
		}

		$commentService = new CommentService();
		if ($viewType == 'page') {
			$articleId = $commentService->getArticleId($articleId);
		}
		$itemId = $input->get('collection_item_id', null, 'array');
		$itemId = $itemId ? $itemId[0] : null;

		$itemId = $itemId ? $itemId : $articleId;

		if (($collectionType != 'articles' && $collectionType != 'normal-source') && empty($itemId)) {
			return "";
		}
		$collectionType = $collectionType ? $collectionType : 'articles';
		$comments = $commentService->getAllComments($itemId, $collectionType);
		$publishedCommentsCount = $commentService->getPublishedCommentsCount($itemId, $collectionType);
		$addonId = $this->addon->id;

		$settings = $this->addon->settings;
		$class = (isset($settings->class) && $settings->class) ? ' ' . $settings->class : '';

		$commentTitleText = (isset($settings->title_text) && $settings->title_text) ? $settings->title_text : 'Comments';
		$commentCountEnabled = (isset($settings->comment_count) && $settings->comment_count) ? $settings->comment_count : 0;
		$commentCountPosition = (isset($settings->comment_count_position) && $settings->comment_count_position) ? $settings->comment_count_position : 'left';
		$labelText = (isset($settings->label_text) && $settings->label_text) ? $settings->label_text : 'Leave a comment';
		$isLabelEnabled = (isset($settings->enable_label) && $settings->enable_label) ? $settings->enable_label : 0;
		$placeHolderText = (isset($settings->comment_field_placeholder) && $settings->comment_field_placeholder) ? $settings->comment_field_placeholder : Text::_('COM_SPPAGEBUILDER_SHARE_YOUR_THOUGHTS');
		$enableAnonymousComment = (isset($settings->enable_anonymous_comment) && $settings->enable_anonymous_comment) ? $settings->enable_anonymous_comment : 0;

		$likesIcon = (isset($settings->likes_icon) && $settings->likes_icon) ? $settings->likes_icon : 'fa fa-heart';
		$replyIcon = (isset($settings->reply_icon) && $settings->reply_icon) ? $settings->reply_icon : 'fa fa-reply';

		$postBtnText = (isset($settings->post_button_text) && $settings->post_button_text) ? $settings->post_button_text : 'Leave a comment';
		$postBtnAriaLabel = (isset($settings->post_button_aria_label) && $settings->post_button_aria_label) ? $settings->post_button_aria_label : '';
		$btnClass = 'sppb-btn ';
		$btnClass .= (isset($settings->post_button_type) && $settings->post_button_type) ? ' sppb-btn-' . $settings->post_button_type : '';
		$btnClass .= (isset($settings->post_button_block) && $settings->post_button_block) ? ' ' . $settings->post_button_block : '';
		$btnClass .= (isset($settings->post_button_shape) && $settings->post_button_shape) ? ' sppb-btn-' . $settings->post_button_shape : ' sppb-btn-rounded';
		$btnClass .= (isset($settings->post_button_appearance) && $settings->post_button_appearance) ? ' sppb-btn-' . $settings->post_button_appearance : '';
		$btnClass .= (isset($settings->post_button_size) && $settings->post_button_size) ? ' sppb-btn-' . $settings->post_button_size : ' sppb-btn-md';
		$postBtnIcon = (isset($settings->post_button_icon) && $settings->post_button_icon) ? $settings->post_button_icon : '';
		$postBtnIconPosition = (isset($settings->post_button_icon_position) && $settings->post_button_icon_position) ? $settings->post_button_icon_position : 'left';

		$ellipsisBtnClass = 'sppb-btn ';
		$ellipsisBtnClass .= (isset($settings->ellipsis_button_style) && $settings->ellipsis_button_style) ? ' sppb-btn-' . $settings->ellipsis_button_style : 'sppb-btn-custom';
		$ellipsisBtnClass .= (isset($settings->ellipsis_shape) && $settings->ellipsis_shape) ? ' sppb-btn-' . $settings->ellipsis_shape : ' sppb-btn-rounded';
		$ellipsisBtnClass .= (isset($settings->ellipsis_appearance) && $settings->ellipsis_appearance) ? ' sppb-btn-' . $settings->ellipsis_appearance : '';
		$ellipsisBtnClass .= (isset($settings->ellipsis_size) && $settings->ellipsis_size) ? ' sppb-btn-' . $settings->ellipsis_size : ' sppb-btn-md';
		$ellipsisBtnIcon = (isset($settings->ellipsis_icon) && $settings->ellipsis_icon) ? $settings->ellipsis_icon : 'fa fa-ellipsis-v';

		$currentUserId = Factory::getUser()->id;


		$output = '';
		$output .= '<div class="sppb-addon sppb-addon-comment ' . $class . '">';

		$output .= '<div class="sppb-comment-title-wrapper">';
		if($commentCountEnabled && $commentCountPosition === 'left')
		{
			$output .= '<span class="sppb-comment-count">' . '(' . $publishedCommentsCount . ')' . '</span>';
		}
		$output .= '<span class="sppb-comment-title-text">' . $commentTitleText . '</span>';
		if($commentCountEnabled && $commentCountPosition === 'right')
		{
			$output .= '<span class="sppb-comment-count">' . '(' . $publishedCommentsCount . ')' . '</span>';
		}
		$output .= '</div>';

		if($isLabelEnabled)
		{
			$output .= '<div class="sppb-comment-label-wrapper">';
			$output .= '<span class="sppb-comment-label-text">' . $labelText . '</span>';
			$output .= '</div>';
		}

		$output .= '<form class="sppb-comment-form">';
		$output .= '<input hidden name="addon-id" value="' . $addonId . '">';
		$output .= '<input hidden name="enable-anonymous-comment" value="' . $enableAnonymousComment . '">';
		$output .= '<textarea class="sppb-comment-field" name="comment" placeholder="' . $placeHolderText . '"></textarea>';
		$output .= '<div class="sppb-comment-btn-wrapper">';
		
		// Show normal comment submit button
		$output .= '<button aria-label="' . $postBtnAriaLabel . '" type="submit" class="comment-submit-btn ' . $btnClass . '" ' . (!$currentUserId && !$enableAnonymousComment ? 'disabled' : '') . ' style="cursor: ' . (!$currentUserId && !$enableAnonymousComment ? 'not-allowed' : 'pointer') . '; ' . (!$currentUserId && !$enableAnonymousComment ? 'opacity: 0.5' : '') . '" ' . (!$currentUserId && !$enableAnonymousComment ? 'title="Please sign in to comment"' : '') . '>';
		if($postBtnIcon && $postBtnIconPosition === 'left')
		{
			$output .= '<i class="sppb-btn-icon ' . $postBtnIcon . '"></i>';
		}
		$output .= '<span>' . $postBtnText . '</span>';
		if($postBtnIcon && $postBtnIconPosition === 'right')
		{
			$output .= '<i class="sppb-btn-icon ' . $postBtnIcon . '"></i>';
		}
		$output .= '</button>';
		
		$output .= '</div>';
		$output .= '</form>';

		$output .= '<div class="sppb-comments-list" style="margin-top: 40px;">';
		$output .= $this->renderComments($comments, $ellipsisBtnClass, $ellipsisBtnIcon, $likesIcon, $replyIcon, $settings, $btnClass, $enableAnonymousComment, 0);
		$output .= '</div>';




		$output .= '</div>';
		$output .= $this->renderLoginModal();
		return $output;
	}

	private function getInitials($name) {
		$words = explode(' ', trim($name));
		$initials = '';
		if (count($words) > 1) {
			$initials .= mb_strtoupper(mb_substr($words[0], 0, 1, 'UTF-8'), 'UTF-8');
			$initials .= mb_strtoupper(mb_substr(end($words), 0, 1, 'UTF-8'), 'UTF-8');
		} else {
			$initials .= mb_strtoupper(mb_substr($name, 0, 1, 'UTF-8'), 'UTF-8');
		}
		return $initials;
	}

	private function getTextColor($color) {
		$r = hexdec(substr($color, 1, 2));
		$g = hexdec(substr($color, 3, 2));
		$b = hexdec(substr($color, 5, 2));

		$brightness = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

		return ($brightness > 128) ? '#000000' : '#FFFFFF';
	}

	private function getGravatarUrl($email, $size = 45, $default = '404') {
		if (empty($email)) {
			return false;
		}
		
		$hash = md5(strtolower(trim($email)));
		$url = "https://www.gravatar.com/avatar/{$hash}?s={$size}&d={$default}";
		
		return $url;
	}

	private function getRelativeTime($timestamp) {
		$time = strtotime($timestamp);
		$now = strtotime(Date::sqlSafeDate());
		$diff = $now - $time;
		
		if ($diff < 60) {
			return Text::_('COM_SPPAGEBUILDER_JUST_NOW');
		} elseif ($diff < 3600) {
			$minutes = floor($diff / 60);
			return ($minutes > 1 ? Text::sprintf('COM_SPPAGEBUILDER_MINUTES_AGO', $minutes) : Text::sprintf('COM_SPPAGEBUILDER_MINUTE_AGO', $minutes));
		} elseif ($diff < 86400) {
			$hours = floor($diff / 3600);
			return ($hours > 1 ? Text::sprintf('COM_SPPAGEBUILDER_HOURS_AGO', $hours) : Text::sprintf('COM_SPPAGEBUILDER_HOUR_AGO', $hours));
		} elseif ($diff < 2592000) {
			$days = floor($diff / 86400);
			return ($days > 1 ? Text::sprintf('COM_SPPAGEBUILDER_DAYS_AGO', $days) : Text::sprintf('COM_SPPAGEBUILDER_DAY_AGO', $days));
		} elseif ($diff < 31536000) {
			$months = floor($diff / 2592000);
			return ($months > 1 ? Text::sprintf('COM_SPPAGEBUILDER_MONTHS_AGO', $months) : Text::sprintf('COM_SPPAGEBUILDER_MONTH_AGO', $months));
		} else {
			$years = floor($diff / 31536000);
			return ($years > 1 ? Text::sprintf('COM_SPPAGEBUILDER_YEARS_AGO', $years) : Text::sprintf('COM_SPPAGEBUILDER_YEAR_AGO', $years));
		}
	}

	private function renderComments($comments, $ellipsisBtnClass, $ellipsisBtnIcon, $likesIcon, $replyIcon, $settings, $btnClass, $enableAnonymousComment, $level = 0) {
		$currentUserId = Factory::getUser()->id;

		$rootCommentClass = '';
		if($level === 0){
			$rootCommentClass = ' sppb-root-comment';
		} 

		$output = '';
		foreach ($comments as $comment) {
			$isOwnComment = false;
			// Check if this is the user's own comment (only for logged-in users)
			if ($currentUserId && $comment->created_by_id && $currentUserId === $comment->created_by_id) {
				$isOwnComment = true;
			}

			if(!$isOwnComment && $comment->published === 0){
				continue;
			}

			$profileImageUrl = null;

			if (!empty($comment->created_by_id)) {
				$profileImageUrl = !empty($comment->profile_image) ? $comment->profile_image : '';
			}

			$avatarColor = !empty($settings->commentator_avatar_color) ? $settings->commentator_avatar_color : "#4285F4";
			$textColor = $this->getTextColor($avatarColor);
			$initials = $this->getInitials($comment->created_by ?? Text::_('COM_SPPAGEBUILDER_ANONYMOUS_PERSON'));
			$gravatarUrl = null;
			$enableGravatar = ComponentHelper::getParams('com_sppagebuilder')->get('enable_gravatar', 1);
			if ($enableGravatar && !empty($comment->created_by_email)) {
				$gravatarUrl = $this->getGravatarUrl($comment->created_by_email, 45, '404');
			}
			
			$output .= '<div data-comment-id="' . $comment->id . '" data-parent-id="' . $comment->parent_id . '" class="sppb-comment-item sppb-comment-item ' . ((!isset($comment->parent_id) && !$comment->parent_id) ? ' sppb-parent-comment' : '') . ' ' . $rootCommentClass .'" style="margin-top: -4px; margin-left: ' . ($level > 0 ? (55) : 0) . 'px;">';
			$output .= '<div class="sppb-comment-thread-line" style="left:' . (-34) . 'px;"></div>';
			$output .= '<div class="sppb-comment-thread-connector" style="left:' . (-34) . 'px; width: ' . (55) . 'px;"></div>';
			$output .= '<div class="sppb-comment-content" ' . ($level > 0 ? 'style="margin-left: 0; margin-top: 11px;"' : "")  . '>';
			$output .= '<div class="sppb-comment-header sppb-comment-header">';

			if (!empty($profileImageUrl)) {
				$output .= '<div class="sppb-comment-avatar" style="border-radius: 50%; width: 45px; height: 45px; margin-right: 10px; overflow: hidden; flex-shrink: 0;">';
				$output .= '<img src="' . htmlspecialchars($profileImageUrl, ENT_QUOTES, 'UTF-8') . '" alt="' . htmlspecialchars($comment->created_by ?? Text::_('COM_SPPAGEBUILDER_ANONYMOUS_PERSON'), ENT_QUOTES, 'UTF-8') . '" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';" />';
				$output .= '<div class="sppb-comment-avatar-fallback" style="background-color: ' . $avatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: ' . $textColor . '">';
				$output .= '<span>' . htmlspecialchars($initials, ENT_QUOTES, 'UTF-8') . '</span>';
				$output .= '</div>';
				$output .= '</div>';
			} elseif (!empty($gravatarUrl)) {
				$output .= '<div class="sppb-comment-avatar" style="border-radius: 50%; width: 45px; height: 45px; margin-right: 10px; overflow: hidden; flex-shrink: 0;">';
				$output .= '<img src="' . htmlspecialchars($gravatarUrl, ENT_QUOTES, 'UTF-8') . '" alt="' . htmlspecialchars($comment->created_by ?? Text::_('COM_SPPAGEBUILDER_ANONYMOUS_PERSON'), ENT_QUOTES, 'UTF-8') . '" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';" />';
				$output .= '<div class="sppb-comment-avatar-fallback" style="background-color: ' . $avatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: ' . $textColor . '">';
				$output .= '<span>' . htmlspecialchars($initials, ENT_QUOTES, 'UTF-8') . '</span>';
				$output .= '</div>';
				$output .= '</div>';
			} else {
				$output .= '<div class="sppb-comment-avatar" style="background-color: ' . $avatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 600; margin-right: 10px; color: ' . $textColor . '">';
				$output .= '<span>' . htmlspecialchars($initials, ENT_QUOTES, 'UTF-8') . '</span>';
				$output .= '</div>';
			}
			$output .= '<div class="sppb-comment-header-left">';
			$output .= $this->getHeaderHtml($comment->created_by ?? Text::_('COM_SPPAGEBUILDER_ANONYMOUS_PERSON'), $comment, $settings);
			$output .= '</div>';

			if ($isOwnComment) {
				$output .= '<div class="sppb-comment-ellipsis-action ' . $ellipsisBtnClass . '">';
				$output .= '<i class="sppb-ellipsis-icon ' . $ellipsisBtnIcon . '"></i>';
				$output .= '<div class="sppb-ellipsis-dropdown" style="display: none;">';
				$output .= $this->renderEllipsisActionButtons($settings);
				$output .= '</div>';
				$output .= '</div>';
			}
				
			$output .= '</div>';

			$output .= '<div class="sppb-comment-content sppb-comment-body" data-comment-id="' . $comment->id . '" style="margin-left: 55px; padding-bottom: 29px;">';
			$output .= '<div class="sppb-comment-body-thread-line"></div>';

			$needsModeration = $isOwnComment && $comment->published === 0;

			if($needsModeration){
				$output .= '<div class="sppb-comment-unpublished-notice">' . Text::_('COM_SPPAGEBUILDER_COMMENT_UNAPPROVED_NOTICE') . '</div>';
			}

			$output .= '<span class="sppb-comment-content-text' . ($needsModeration ? ' sppb-comment-unpublished' : '') . '" style="margin-left: 10px; margin-top: 20px; display: inline-block;">';
			$output .= '<span>' . nl2br(htmlspecialchars($comment->content, ENT_QUOTES, 'UTF-8')) . '</span>';
			$output .= '</span>';
			$output .= '<div class="sppb-comment-edit-form sppb-comment-form" data-comment-id="' . $comment->id . '" style="display: none; ' . ($needsModeration ? 'margin-top: -45px;' : '') . '">';
			$output .= '<textarea type="text" class="sppb-comment-edit-input sppb-comment-field" data-comment-id="' . $comment->id . '">' . htmlspecialchars($comment->content, ENT_QUOTES, 'UTF-8') . '</textarea>';
			$output .= $this->renderEditCommentButtons($settings, $comment->id);
			$output .= '</div>';

			$isLikedClass = (isset($comment->user_liked) && $comment->user_liked) ? 'liked' : '';

			if(!$needsModeration){
				$output .= '<div class="sppb-comment-actions" style="margin-left: 10px">';
				$output .= '<div class="sppb-comment-likes ' . $isLikedClass . '">';
				$output .= '<i class="sppb-likes-icon ' . $likesIcon . '"></i>';
				$output .= '<span class="sppb-likes-text">' . ($comment->likes_count ?? 0) . ' ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '</span>';
				$output .= '</div>';
				$output .= '<div class="sppb-comment-reply-action" data-comment-id="' . $comment->id . '">';
				$output .= '<i class="sppb-reply-icon ' . $replyIcon . '"></i>';
				$output .= '<span class="sppb-reply-text">' . $comment->replies . ' ' . Text::_('COM_SPPAGEBUILDER_REPLY') . '</span>';
				$output .= '</div>';
				$output .= '</div>';
			}

			$output .= '<div class="sppb-comment-reply-form sppb-comment-form" data-comment-id="' . $comment->id . '" style="display: none;">';
			$output .= '<textarea type="text" class="sppb-comment-reply-input sppb-comment-field" data-comment-id="' . $comment->id . '" placeholder="' . Text::_('COM_SPPAGEBUILDER_WRITE_A_REPLY') . '"></textarea>';
			$output .= '<div class="sppb-comment-btn-wrapper">';
			$output .= '<button class="sppb-comment-reply-cancel-btn ' . $btnClass . '" data-comment-id="' . $comment->id . '">' . Text::_('COM_SPPAGEBUILDER_CANCEL') . '</button>';
			$output .= '<button class="sppb-comment-reply-submit-btn comment-submit-btn ' . $btnClass . '" data-comment-id="' . $comment->id . '" ' . (!$currentUserId && !$enableAnonymousComment ? 'disabled' : '') . ' style="cursor: ' . (!$currentUserId && !$enableAnonymousComment ? 'not-allowed' : 'pointer') . '; ' . (!$currentUserId && !$enableAnonymousComment ? 'opacity: 0.5' : '') . '" ' . (!$currentUserId && !$enableAnonymousComment ? 'title="' . Text::_('COM_SPPAGEBUILDER_PLEASE_SIGN_IN_TO_COMMENT') . '"' : '') . '>' . Text::_('COM_SPPAGEBUILDER_SUBMIT') . '</button>';
			$output .= '</div>';
			$output .= '</div>';
			$output .= '</div>';
			

			$output .= '</div>';
			if(isset($comment->children) && !empty($comment->children) && !$needsModeration){
				$output .= '<div class="sppb-comment-children-wrapper">';
				$output .= $this->renderComments($comment->children, $ellipsisBtnClass, $ellipsisBtnIcon, $likesIcon, $replyIcon, $settings, $btnClass, $enableAnonymousComment, $level + 1);
				$output .= '</div>';
			}
			$output .= '</div>';
		}
		return $output;
	}

	private function renderEditCommentButtons($settings, $commentId){
		$editCommentItems = $settings->edit_comment_button_item ?? [];
		$output = '';
		$output .= '<div class="sppb-comment-edit-buttons-wrapper sppb-comment-btn-wrapper">';
		foreach ($editCommentItems as $item_key => $item) {
			$uniqueId = 'sppb-comment-edit-button-' . $item_key;
			$btnClass = 'sppb-btn ';
			$btnClass .= (isset($item->edit_comment_button_appearance) && $item->edit_comment_button_appearance) ? ' sppb-btn-' . $item->edit_comment_button_appearance : '';
			$btnClass .= (isset($item->edit_comment_button_size) && $item->edit_comment_button_size) ? ' sppb-btn-' . $item->edit_comment_button_size : ' sppb-btn-md';
			$btnClass .= (isset($item->edit_comment_button_shape) && $item->edit_comment_button_shape) ? ' sppb-btn-' . $item->edit_comment_button_shape : ' sppb-btn-rounded';
			$output .= '<button class="sppb-comment-edit-button ' . ($item->title == 'Update' ? 'sppb-comment-edit-submit-btn' : 'sppb-comment-edit-cancel-btn') . ' ' . $btnClass . '" id="' . $uniqueId . '" data-comment-id="' . $commentId . '">'. ($item->title == 'Update' ? Text::_('COM_SPPAGEBUILDER_UPDATE') : Text::_('COM_SPPAGEBUILDER_CANCEL')) .'</button>';
		}
		$output .= '</div>';

		return $output;
	}

	private function renderEllipsisActionButtons($settings){
		$ellipsisActionItems = $settings->ellipsis_action_button_item ?? [];
		$output = '';
		$output .= '<div class="sppb-comment-ellipsis-action-buttons-wrapper">';
		foreach ($ellipsisActionItems as $item_key => $item) {
			$uniqueId = 'sppb-comment-ellipsis-action-button-' . $item_key;
			$btnClass = 'sppb-btn ';
			if ($item_key == 0) {
				$btnClass .= ' sppb-ellipsis-edit-btn ';
			} else {
				$btnClass .= ' sppb-ellipsis-delete-btn ';
			}
			$btnClass .= (isset($item->ellipsis_action_button_appearance) && $item->ellipsis_action_button_appearance) ? ' sppb-btn-' . $item->ellipsis_action_button_appearance : '';
			$btnClass .= (isset($item->ellipsis_action_button_size) && $item->ellipsis_action_button_size) ? ' sppb-btn-' . $item->ellipsis_action_button_size : ' sppb-btn-md';
			$btnClass .= (isset($item->ellipsis_action_button_shape) && $item->ellipsis_action_button_shape) ? ' sppb-btn-' . $item->ellipsis_action_button_shape : ' sppb-btn-rounded';
			$output .= '<button style="width: 100%; text-align: left;" class="sppb-comment-ellipsis-action-button ' . $btnClass . '" id="' . $uniqueId . '">'. ($item->title === 'Edit' ? Text::_('COM_SPPAGEBUILDER_EDIT') : Text::_('COM_SPPAGEBUILDER_DELETE')) .'</button>';
		}
		$output .= '</div>';

		return $output;
	}

	private function getHeaderHtml($commentatorName, $comment, $settings){
		$output = '';
		$output .= '<div class="commentator-name-wrapper">';
		$output .= '<span class="commentator-name">' . htmlspecialchars($commentatorName) . '</span>';
		$output .= '</div>';
		
		$enableTime = (isset($settings->enable_time) && $settings->enable_time) ? $settings->enable_time : 0;
		if ($enableTime) {
			$output .= '<div class="sppb-comment-time-wrapper">';
			$output .= '<span class="sppb-comment-time">' . $this->getRelativeTime($comment->created_on);
			
			$showEditedTime = (isset($settings->show_edited_time) && $settings->show_edited_time) ? $settings->show_edited_time : 0;
			if ($showEditedTime && $comment->modified && $comment->modified !== $comment->created_on) {
				$output .= '<span class="sppb-comment-edited-time"> • ' . Text::_('COM_SPPAGEBUILDER_COMMENT_EDITED') . ' ' . $this->getRelativeTime($comment->modified) . '</span>';
			}
			
			$output .= '</span>';
			$output .= '</div>';
		}
		
		return $output;
	}

	public static function getAjax(){
		$input  = Factory::getApplication()->input;
		$inputs = $input->get('data', [], 'ARRAY');
		$addonId = '';

		foreach ($inputs as $item) {
			if ($item['name'] === 'addon-id') {
				$addonId = $item['value'];
				break;
			}
		}

		$secureData        = Session::getInstance();
        $ipAddress         = Factory::getApplication()->input->server->get('REMOTE_ADDR');
        $maxRequests       = $secureData->get('max_requests_' . $addonId, 10);
        $timeWindow        = $secureData->get('time_window_' . $addonId, 60);
            
		if (SppagebuilderRateLimiterHelper::isRateLimited($ipAddress . $addonId, $maxRequests, $timeWindow)) {
			$timeUntilReset    = SppagebuilderRateLimiterHelper::getTimeUntilReset($ipAddress . $addonId, $timeWindow);
			$output['status']  = false;
			$output['content'] = '<span class="sppb-text-danger">' . Text::sprintf('COM_SPPAGEBUILDER_RATE_LIMIT_EXCEEDED', $timeUntilReset) . '</span>';
			return json_encode($output);
		}

		$output = [];
		$output['status']  = true;
		$output['content'] = 'success';

		return json_encode($output);
	}

	/**
	 * Generate the CSS string for the frontend page.
	 *
	 * @return 	string 	The CSS string for the page.
	 * @since 	1.0.0
	 */
	public function css()
	{
		$addon_id = '#sppb-addon-' . $this->addon->id;
		$settings = $this->addon->settings;
		$cssHelper = new CSSHelper($addon_id);
        $css = '';

		$css .= $cssHelper->generateStyle('.sppb-comment-title-wrapper', $settings,
				['title_alignment' => 'justify-content'], ['title_alignment' => false], [],[],[],
				'display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #D3D7EB; margin-bottom: 40px; padding-bottom: 24px;');
		$css .= $cssHelper->typography('.sppb-comment-title-text', $settings, 'title_typography',
				['font'           => 'title_font_family',
				'size'           => 'title_fontsize',
				'line_height'    => 'title_lineheight',
				'letter_spacing' => 'title_letterspace',
				'uppercase'      => 'title_font_style.uppercase',
				'italic'         => 'title_font_style.italic',
				'underline'      => 'title_font_style.underline',
				'weight'         => 'title_font_style.weight',
				]);
		$css .= $cssHelper->generateStyle('.sppb-comment-title-text', $settings,
				['title_color' => 'color'], ['title_color' => false]);
		$settings->title_shadow = $cssHelper->parseBoxShadow($settings, 'title_shadow', true);
		$css .= $cssHelper->generateStyle('.sppb-comment-title-text', $settings,
				['title_shadow' => 'text-shadow'], ['title_shadow' => false]);
		$css .= $cssHelper->typography('.sppb-comment-count', $settings, 'comment_count_typography',
				['font'          => 'comment_count_font_family',
				'size'           => 'comment_count_fontsize',
				'line_height'    => 'comment_count_lineheight',
				'letter_spacing' => 'comment_count_letterspace',
				'uppercase'      => 'comment_count_font_style.uppercase',
				'italic'         => 'comment_count_font_style.italic',
				'underline'      => 'comment_count_font_style.underline',
				'weight'         => 'comment_count_font_style.weight',
				]);
		$css .= $cssHelper->generateStyle('.sppb-comment-count', $settings,
				['comment_count_color' => 'color'], ['comment_count_color' => false]);
		$settings->comment_count_shadow = $cssHelper->parseBoxShadow($settings, 'comment_count_shadow', true);
		$css .= $cssHelper->generateStyle('.sppb-comment-count', $settings,
				['comment_count_shadow' => 'text-shadow'], ['comment_count_shadow' => false]);

		$css .= $cssHelper->generateStyle('.sppb-comment-label-wrapper', $settings,
				['label_alignment' => 'justify-content'], ['label_alignment' => false], [],[],[],
				'display: flex; align-items: center; margin-bottom: 12px;');
		$css .= $cssHelper->generateStyle('.sppb-comment-label-text', $settings,
				['label_color' => 'color'], ['label_color' => false]);
		$settings->label_text_shadow = $cssHelper->parseBoxShadow($settings, 'label_text_shadow', true);
		$css .= $cssHelper->generateStyle('.sppb-comment-label-text', $settings,
				['label_text_shadow' => 'text-shadow'], ['label_text_shadow' => false]);

		$enableLikes = (isset($settings->enable_likes) && $settings->enable_likes) ? $settings->enable_likes : 0;
		if ($enableLikes) {
			$css .= $cssHelper->generateStyle('.sppb-comment-actions', $settings, [], [], [],[],[],
					'display: flex; align-items: center; gap: 20px; margin-top: 16px;');
			
			$css .= $cssHelper->generateStyle('.sppb-comment-likes', $settings, [], [], [],[],[],
					'display: flex; align-items: center; gap: 6px; cursor: pointer;');
			
			$css .= $cssHelper->typography('.sppb-likes-text', $settings, 'likes_typography',
					['font'           => 'likes_font_family',
					'size'           => 'likes_fontsize',
					'line_height'    => 'likes_lineheight',
					'letter_spacing' => 'likes_letterspace',
					'uppercase'      => 'likes_font_style.uppercase',
					'italic'         => 'likes_font_style.italic',
					'underline'      => 'likes_font_style.underline',
					'weight'         => 'likes_font_style.weight',
					]);
			
			$css .= $cssHelper->generateStyle('.sppb-likes-text', $settings,
					['likes_color' => 'color'], ['likes_color' => false]);

			$css .= $cssHelper->generateStyle('.sppb-comment-likes.liked > .sppb-likes-icon', $settings,
					['likes_focused_color' => 'color'], ['likes_focused_color' => false]);
			
			$settings->likes_text_shadow = $cssHelper->parseBoxShadow($settings, 'likes_text_shadow', true);
			$css .= $cssHelper->generateStyle('.sppb-likes-text', $settings,
					['likes_text_shadow' => 'text-shadow'], ['likes_text_shadow' => false]);
			
			$css .= $cssHelper->generateStyle('.sppb-likes-icon', $settings, [], [], [],[],[],
					'font-size: 16px; transition: color 0.3s ease;');
					$css .= $cssHelper->generateStyle('.sppb-likes-icon', $settings,
				['likes_color' => 'color'], ['likes_color' => false]);
		
			$css .= $cssHelper->generateStyle('.sppb-comment-avatar img', $settings, [], [], [],[],[],
					'transition: opacity 0.3s ease;');
			$css .= $cssHelper->generateStyle('.sppb-comment-avatar-fallback', $settings, [], [], [],[],[],
					'transition: opacity 0.3s ease;');
			
			$css .= $cssHelper->generateStyle('.sppb-comment-likes:hover .sppb-likes-text', $settings,
					['likes_hover_color' => 'color'], ['likes_hover_color' => false]);
			$css .= $cssHelper->generateStyle('.sppb-comment-likes:hover .sppb-likes-icon', $settings,
					['likes_hover_color' => 'color'], ['likes_hover_color' => false]);
			
			$css .= $cssHelper->generateStyle('.sppb-comment-likes:focus .sppb-likes-text', $settings,
					['likes_focused_color' => 'color'], ['likes_focused_color' => false]);
			$css .= $cssHelper->generateStyle('.sppb-comment-likes:focus .sppb-likes-icon', $settings,
					['likes_focused_color' => 'color'], ['likes_focused_color' => false]);
			
			$likesIconPosition = (isset($settings->likes_icon_position) && $settings->likes_icon_position) ? $settings->likes_icon_position : 'left';
			if ($likesIconPosition === 'right') {
				$css .= $cssHelper->generateStyle('.sppb-comment-likes', $settings, [], [], [],[],[],
						'flex-direction: row-reverse;');
			}
		}

		$enableReply = (isset($settings->enable_reply) && $settings->enable_reply) ? $settings->enable_reply : 0;
		if ($enableReply) {
			$css .= $cssHelper->generateStyle('.sppb-comment-reply-action', $settings, [], [], [],[],[],
					'display: flex; align-items: center; gap: 6px; cursor: pointer;');
			
			$css .= $cssHelper->typography('.sppb-reply-text', $settings, 'reply_typography',
					['font'           => 'reply_font_family',
					'size'           => 'reply_fontsize',
					'line_height'    => 'reply_lineheight',
					'letter_spacing' => 'reply_letterspace',
					'uppercase'      => 'reply_font_style.uppercase',
					'italic'         => 'reply_font_style.italic',
					'underline'      => 'reply_font_style.underline',
					'weight'         => 'reply_font_style.weight',
					]);
			
			$css .= $cssHelper->generateStyle('.sppb-reply-text', $settings,
					['reply_color' => 'color'], ['reply_color' => false]);
			
			$settings->reply_text_shadow = $cssHelper->parseBoxShadow($settings, 'reply_text_shadow', true);
			$css .= $cssHelper->generateStyle('.sppb-reply-text', $settings,
					['reply_text_shadow' => 'text-shadow'], ['reply_text_shadow' => false]);
			
			$css .= $cssHelper->generateStyle('.sppb-reply-icon', $settings, [], [], [],[],[],
					'font-size: 16px; transition: color 0.3s ease;');
			$css .= $cssHelper->generateStyle('.sppb-reply-icon', $settings,
					['reply_color' => 'color'], ['reply_color' => false]);
			
			$css .= $cssHelper->generateStyle('.sppb-comment-reply-action:hover .sppb-reply-text', $settings,
					['reply_hover_color' => 'color'], ['reply_hover_color' => false]);
			$css .= $cssHelper->generateStyle('.sppb-comment-reply-action:hover .sppb-reply-icon', $settings,
					['reply_hover_color' => 'color'], ['reply_hover_color' => false]);
			
			$replyIconPosition = (isset($settings->reply_icon_position) && $settings->reply_icon_position) ? $settings->reply_icon_position : 'left';
			if ($replyIconPosition === 'right') {
				$css .= $cssHelper->generateStyle('.sppb-comment-reply-action', $settings, [], [], [],[],[],
						'flex-direction: row-reverse;');
			}
		}

		$css .= $cssHelper->generateStyle('.sppb-comment-form',[], [], [], [],[],[],
				'display: flex; flex-direction: column;');
				
		$css .= $cssHelper->generateStyle('.sppb-comment-reply-form', $settings, [], [], [],[],[],
				'margin-top: 16px;');

		$css .= $cssHelper->generateStyle('.sppb-comment-field', $settings,
				['comment_field_height' => 'height',
				'comment_field_padding' => 'padding',
				'comment_field_typing_color' => 'color',
				'comment_field_background_color' => 'background-color',
				'comment_field_border_color' => 'border-color',
				'comment_field_border_width' => 'border-width'],
				['comment_field_padding' => false,
				'comment_field_typing_color' => false,
				'comment_field_background_color' => false,
				'comment_field_border_color' => false,
				'comment_field_border_width' => false],[],[],[], 'transition: all 0.05s ease-in-out; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 100%; box-sizing: border-box;');
		$css .= $cssHelper->generateStyle('.sppb-comment-field::placeholder', $settings,
				['comment_field_placeholder_color' => 'color'], ['comment_field_placeholder_color' => false]);
		$css .= $cssHelper->generateStyle('.sppb-comment-field:hover', $settings,
				['comment_field_background_hover_color' => 'background-color'],
				['comment_field_background_hover_color' => false]);
		$css .= $cssHelper->generateStyle('.sppb-comment-field:hover::placeholder', $settings,
				['comment_field_placeholder_hover_color' => 'color'], ['comment_field_placeholder_hover_color' => false]);
		$css .= $cssHelper->generateStyle('.sppb-comment-field:focus', $settings,
				['comment_field_border_focus_color' => 'border-color',],
				['comment_field_border_focus_color' => false]);
		$css .= $cssHelper->typography('.sppb-comment-field', $settings, 'comment_field_typography',
				['font'           => 'comment_field_font_family',
				'size'           => 'comment_field_fontsize',
				'line_height'    => 'comment_field_lineheight',
				'letter_spacing' => 'comment_field_letterspace',
				'uppercase'      => 'comment_field_font_style.uppercase',
				'italic'         => 'comment_field_font_style.italic',
				'underline'      => 'comment_field_font_style.underline',
				'weight'         => 'comment_field_font_style.weight',
				]);

		$css .= $cssHelper->generateStyle('.sppb-comment-header', $settings, [], [], [],[],[],
				'display: flex; justify-content: space-between; align-items: center; position: relative;');
		
		$css .= $cssHelper->generateStyle('.sppb-comment-header-left', $settings, [], [], [],[],[],
				'display: flex; flex-direction: column; gap: 4px;');
		
		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action', $settings, [], [], [],[],[],
				'position: relative; cursor: inherit;');

		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action i', $settings, [], [], [],[],[],
				'cursor: pointer;');

		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action', $settings,
				['ellipsis_icon_bg_color' => 'background-color'], ['ellipsis_icon_bg_color' => false]);

		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action.sppb-btn-custom.sppb-btn-outline', $settings,
				[], [], [],[],[],
				'background-color: transparent; border-color: transparent;');
		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action.sppb-btn-custom.sppb-btn-outline i', $settings,
				[], [], [],[],[],
				'background-color: transparent; border-color: transparent;');
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-icon', $settings, [], [], [],[],[],
				'font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.3s ease;');
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-icon', $settings,
				['ellipsis_icon_color' => 'color'], ['ellipsis_icon_color' => false]);
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-icon', $settings,
				['ellipsis_icon_bg_color' => 'background-color'], ['ellipsis_icon_bg_color' => false]);
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-dropdown', $settings, [], [], [],[],[],
				'position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000; min-width: 120px;');
		
		$css .= $cssHelper->typography('.sppb-ellipsis-edit-btn, .sppb-ellipsis-delete-btn', $settings, 'ellipsis_action_button_typography',
				['font'           => 'ellipsis_action_button_font_family',
				'size'           => 'ellipsis_action_button_fontsize',
				'line_height'    => 'ellipsis_action_button_lineheight',
				'letter_spacing' => 'ellipsis_action_button_letterspace',
				'uppercase'      => 'ellipsis_action_button_font_style.uppercase',
				'italic'         => 'ellipsis_action_button_font_style.italic',
				'underline'      => 'ellipsis_action_button_font_style.underline',
				'weight'         => 'ellipsis_action_button_font_style.weight',
				]);

				$ellipsisModes = ['.sppb-ellipsis-edit-btn', '.sppb-ellipsis-delete-btn'];

				for ($i = 0; $i < count($settings->ellipsis_action_button_item); $i++) {
					$css .= $cssHelper->generateStyle($ellipsisModes[$i], $settings->ellipsis_action_button_item[$i],
					['ellipsis_action_button_color' => 'color'], ['ellipsis_action_button_color' => false]);
			
					$css .= $cssHelper->generateStyle($ellipsisModes[$i], $settings->ellipsis_action_button_item[$i],
					['ellipsis_action_button_background_color' => 'background-color'], ['ellipsis_action_button_background_color' => false]);
			
					$css .= $cssHelper->generateStyle($ellipsisModes[$i] . ':hover', $settings->ellipsis_action_button_item[$i],
					['ellipsis_action_button_color_hover' => 'color'], ['ellipsis_action_button_color_hover' => false]);
			
					$css .= $cssHelper->generateStyle($ellipsisModes[$i] . ':hover', $settings->ellipsis_action_button_item[$i],
					['ellipsis_action_button_background_color_hover' => 'background-color'], ['ellipsis_action_button_background_color_hover' => false]);
				}
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-edit-btn:first-child', $settings, [], [], [],[],[],
				'border-radius: 6px 6px 0 0;');
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-delete-btn:last-child', $settings, [], [], [],[],[],
				'border-radius: 0 0 6px 6px;');
		
		$css .= $cssHelper->generateStyle('.sppb-ellipsis-edit-btn:only-child', $settings, [], [], [],[],[],
				'border-radius: 6px;');
		
		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action', $settings,
				['ellipsis_margin' => 'margin'], ['ellipsis_margin' => false]);

		$css .= $cssHelper->generateStyle('.sppb-comment-header-left', $settings, [], [], [],[],[], 'flex: 1;');

		$css .= $cssHelper->generateStyle('.sppb-comment-header-left', $settings, ['commentator_name_position' => 'display: flex; justify-content'], ['commentator_name_position' => false]);
		$css .= $cssHelper->generateStyle('.sppb-comment-ellipsis-action', $settings, ['ellipsis_position' => 'display: flex; justify-content'], ['ellipsis_position' => false]);
		
		$css .= $cssHelper->generateStyle('.comment-submit-btn',[],[],[],[],[],[], 'outline: none; cursor: pointer;');
		$css .= $cssHelper->typography('.comment-submit-btn', $settings, 'post_button_typography',
				['font'           => 'post_button_font_family',
				'size'           => 'post_button_fontsize',
				'line_height'    => 'post_button_lineheight',
				'letter_spacing' => 'post_button_letterspace',
				'uppercase'      => 'post_button_font_style.uppercase',
				'italic'         => 'post_button_font_style.italic',
				'underline'      => 'post_button_font_style.underline',
				'weight'         => 'post_button_font_style.weight',
				]);

		if(isset($settings->post_button_size) && $settings->post_button_size && $settings->post_button_size === 'custom'){
			$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom', $settings,
				['post_button_padding' => 'padding'], ['post_button_padding' => false]);
		}

		$css .= $cssHelper->generateStyle('.sppb-comment-form .sppb-comment-btn-wrapper',$settings,['comment_field_border_color' => 'border-color'],['comment_field_border_color' => false],[],[],[],
				'display: flex; padding: 16px; gap: 8px; align-items: center; border-width: 0px 1px 1px 1px; border-style: solid; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;');
		$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom', $settings,
				['post_button_color' => 'color',
				'post_button_background_color' => 'background-color',],
				['post_button_color' => false,
				'post_button_background_color' => false]);

		$currentUserId = Factory::getUser()->id;

		if ($currentUserId) {
			$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom:hover', $settings,
			['post_button_color_hover' => 'color',
			'post_button_background_color_hover' => 'background-color',],
			['post_button_color_hover' => false,
			'post_button_background_color_hover' => false]);
		
			$settings->post_button_background_gradient = $cssHelper->parseColor($settings, 'post_button_background_gradient');
			$settings->post_button_background_gradient_hover = $cssHelper->parseColor($settings, 'post_button_background_gradient_hover');
	
			$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient', $settings,
					['post_button_background_gradient' => 'border:none; background-image',],
					['post_button_background_gradient' => false]);
			$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient:hover', $settings,
					['post_button_background_gradient_hover' => 'border:none; background-image',],
					['post_button_background_gradient_hover' => false]);
					$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom.sppb-btn-outline:hover', $settings,
					['post_button_background_color_hover' => 'background-color: transparent; border-color'],
					['post_button_background_color_hover' => false]);	
		}

		$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-custom.sppb-btn-outline', $settings,
				['post_button_background_color' => 'background-color: transparent; border-color'],
				['post_button_background_color' => false]);
		
		$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-link', $settings,
				['post_button_link_color' => 'color',
				'post_button_link_border_color' => 'border-color',
				'post_button_link_border_width' => 'border-width: 0 0 %spx 0',
				'post_button_link_padding_bottom' => 'padding: 0 0 %spx 0'],
				['post_button_link_color' => false,
				'post_button_link_border_color' => false,
				'post_button_link_border_width' => false,
				'post_button_link_padding_bottom' => false]);

		$css .= $cssHelper->generateStyle('.comment-submit-btn.sppb-btn-link:hover', $settings,
				['post_button_link_hover_color' => 'color',
				'post_button_link_border_hover_color' => 'border-color'],
				['post_button_link_hover_color' => false,
				'post_button_link_border_hover_color' => false]);

		$css .= $cssHelper->generateStyle('.sppb-comment-btn-wrapper', $settings,
				['post_button_alignment' => 'justify-content'],
				['post_button_alignment' => false],
				[], [], [],
				'display: flex; align-items: center;');
		$css .= $cssHelper->generateStyle('.sppb-btn-icon', $settings,
				['post_button_icon_margin' => 'margin'], ['post_button_icon_margin' => false]);

		foreach ($settings->edit_comment_button_item as $item_key => $item) {
			$css .= $cssHelper->typography('#sppb-comment-edit-button-' . $item_key, $item, 'edit_comment_button_typography',
					['font'           => 'edit_comment_button_font_family',
					'size'           => 'edit_comment_button_fontsize',
					'line_height'    => 'edit_comment_button_lineheight',
					'letter_spacing' => 'edit_comment_button_letterspace',
					'uppercase'      => 'edit_comment_button_font_style.uppercase',
					'italic'         => 'edit_comment_button_font_style.italic',
					'underline'      => 'edit_comment_button_font_style.underline',
					'weight'         => 'edit_comment_button_font_style.weight',
					]);
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key, $item,
					['edit_comment_button_color' => 'color',
					'edit_comment_button_background_color' => 'background-color'],
					['edit_comment_button_color' => false,
					'edit_comment_button_background_color' => false], [], [], [],
					'outline: none; cursor: pointer;');
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key . ':hover', $item,
					['edit_comment_button_color_hover' => 'color',
					'edit_comment_button_background_color_hover' => 'background-color'],
					['edit_comment_button_color_hover' => false,
					'edit_comment_button_background_color_hover' => false]);
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key . '.sppb-btn-outline', $item,
					['edit_comment_button_background_color' => 'background-color: transparent; border-color'],
					['edit_comment_button_background_color' => false]);
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key . '.sppb-btn-outline:hover', $item,
					['edit_comment_button_background_color_hover' => 'background-color: transparent; border-color'],
					['edit_comment_button_background_color_hover' => false]);
			$item->edit_comment_button_background_gradient = $cssHelper->parseColor($item, 'edit_comment_button_background_gradient');
			$item->edit_comment_button_background_gradient_hover = $cssHelper->parseColor($item, 'edit_comment_button_background_gradient_hover');
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key . '.sppb-btn-gradient', $item,
					['edit_comment_button_background_gradient' => 'border:none; background-image'],
					['edit_comment_button_background_gradient' => false]);
			$css .= $cssHelper->generateStyle('#sppb-comment-edit-button-' . $item_key . '.sppb-btn-gradient:hover', $item,
					['edit_comment_button_background_gradient_hover' => 'border:none; background-image'],
					['edit_comment_button_background_gradient_hover' => false]);
		}

	$css .= $cssHelper->generateStyle('.sppb-comment-edit-buttons-wrapper', $settings,
				['edit_comment_button_alignment' => 'justify-content',
				'edit_comment_button_gap' => 'gap'], ['edit_comment_button_alignment' => false, 'edit_comment_button_gap' => false],
				[], [], [],
				'display: flex; align-items: center;');

	$css .= $cssHelper->generateStyle('.commentator-name-wrapper', $settings,
				['commentator_name_alignment' => 'justify-content'], ['commentator_name_alignment' => false], [],[],[],
				'display: flex; align-items: center;');

	$css .= $cssHelper->typography('.commentator-name', $settings, 'commentator_name_typography',
				['font'           => 'commentator_name_font_family',
				'size'           => 'commentator_name_fontsize',
				'line_height'    => 'commentator_name_lineheight',
				'letter_spacing' => 'commentator_name_letterspace',
				'uppercase'      => 'commentator_name_font_style.uppercase',
				'italic'         => 'commentator_name_font_style.italic',
				'underline'      => 'commentator_name_font_style.underline',
				'weight'         => 'commentator_name_font_style.weight',
				]);
	$css .= $cssHelper->generateStyle('.commentator-name', $settings,
				['commentator_name_color' => 'color'], ['commentator_name_color' => false]);
	$settings->commentator_name_shadow = $cssHelper->parseBoxShadow($settings, 'commentator_name_text_shadow', true);
	$css .= $cssHelper->generateStyle('.commentator-name', $settings,
				['commentator_name_shadow' => 'text-shadow'], ['commentator_name_shadow' => false]);

		$css .= $cssHelper->typography('.sppb-comment-content-text', $settings, 'posted_comment_typography',
				['font'           => 'posted_comment_font_family',
				'size'           => 'posted_comment_fontsize',
				'line_height'    => 'posted_comment_lineheight',
				'letter_spacing' => 'posted_comment_letterspace',
				'uppercase'      => 'posted_comment_font_style.uppercase',
				'italic'         => 'posted_comment_font_style.italic',
				'underline'      => 'posted_comment_font_style.underline',
				'weight'         => 'posted_comment_font_style.weight',
				]);
		$css .= $cssHelper->generateStyle('.sppb-comment-content-text', $settings,
				['posted_comment_color' => 'color'], ['posted_comment_color' => false]);
		$settings->posted_comment_shadow = $cssHelper->parseBoxShadow($settings, 'posted_comment_text_shadow', true);
		$css .= $cssHelper->generateStyle('.sppb-comment-content-text', $settings,
				['posted_comment_shadow' => 'text-shadow'], ['posted_comment_shadow' => false]);


		// Time Styles
		$enableTime = (isset($settings->enable_time) && $settings->enable_time) ? $settings->enable_time : 0;
		if ($enableTime) {
			$css .= $cssHelper->typography('.sppb-comment-time', $settings, 'time_typography',
					['font'           => 'time_font_family',
					'size'           => 'time_fontsize',
					'line_height'    => 'time_lineheight',
					'letter_spacing' => 'time_letterspace',
					'uppercase'      => 'time_font_style.uppercase',
					'italic'         => 'time_font_style.italic',
					'underline'      => 'time_font_style.underline',
					'weight'         => 'time_font_style.weight',
					]);
			$css .= $cssHelper->generateStyle('.sppb-comment-time', $settings,
					['time_color' => 'color'], ['time_color' => false]);
			$settings->time_shadow = $cssHelper->parseBoxShadow($settings, 'time_text_shadow', true);
			$css .= $cssHelper->generateStyle('.sppb-comment-time', $settings,
					['time_shadow' => 'text-shadow'], ['time_shadow' => false]);
			$css .= $cssHelper->generateStyle('.sppb-comment-time-wrapper', $settings,
					['time_alignment' => 'text-align'], ['time_alignment' => false]);

			$showEditedTime = (isset($settings->show_edited_time) && $settings->show_edited_time) ? $settings->show_edited_time : 0;
			if ($showEditedTime) {
				$css .= $cssHelper->typography('.sppb-comment-edited-time', $settings, 'edited_time_typography',
						['font'           => 'edited_time_font_family',
						'size'           => 'edited_time_fontsize',
						'line_height'    => 'edited_time_lineheight',
						'letter_spacing' => 'edited_time_letterspace',
						'uppercase'      => 'edited_time_font_style.uppercase',
						'italic'         => 'edited_time_font_style.italic',
						'underline'      => 'edited_time_font_style.underline',
						'weight'         => 'edited_time_font_style.weight',
						]);
				$css .= $cssHelper->generateStyle('.sppb-comment-edited-time', $settings,
						['edited_time_color' => 'color'], ['edited_time_color' => false]);
				$settings->edited_time_shadow = $cssHelper->parseBoxShadow($settings, 'edited_time_text_shadow', true);
				$css .= $cssHelper->generateStyle('.sppb-comment-edited-time', $settings,
						['edited_time_shadow' => 'text-shadow'], ['edited_time_shadow' => false]);
				$css .= $cssHelper->generateStyle('.sppb-comment-edited-time-wrapper', $settings,
						['edited_time_alignment' => 'text-align'], ['edited_time_alignment' => false]);
			}
		}

		return $css;
	}

	public function js(){
		$js = '';
		$input = Factory::getApplication()->input;
		$collectionType = $input->get('collection_type', null, 'string');
		$viewType = $input->get('view', null, 'string');
		$articleId = $input->get('id', null, 'int');
		$commentService = new CommentService();
		if ($viewType == 'page') {
			$articleId = $commentService->getArticleId($articleId);
		}
		$itemId = $input->get('collection_item_id', null, 'array');
		$itemId = $itemId ? $itemId[0] : null;
		$itemId = $itemId ? $itemId : $articleId;
		if (($collectionType != 'articles' && $collectionType != 'normal-source') && empty($itemId)) {
			return "";
		}
		$collectionType = $collectionType ? $collectionType : 'articles';
		$avatarColor = !empty($this->addon->settings->commentator_avatar_color) ? $this->addon->settings->commentator_avatar_color : "#4285F4";
		$currentUserId = Factory::getUser()->id;
		$anonymousPerson = Text::_('COM_SPPAGEBUILDER_ANONYMOUS_PERSON');

		// Load language strings for JavaScript
		Text::script('COM_SPPAGEBUILDER_JUST_NOW');
		Text::script('COM_SPPAGEBUILDER_MINUTE_AGO');
		Text::script('COM_SPPAGEBUILDER_MINUTES_AGO');
		Text::script('COM_SPPAGEBUILDER_HOUR_AGO');
		Text::script('COM_SPPAGEBUILDER_HOURS_AGO');
		Text::script('COM_SPPAGEBUILDER_DAY_AGO');
		Text::script('COM_SPPAGEBUILDER_DAYS_AGO');
		Text::script('COM_SPPAGEBUILDER_MONTH_AGO');
		Text::script('COM_SPPAGEBUILDER_MONTHS_AGO');
		Text::script('COM_SPPAGEBUILDER_YEAR_AGO');
		Text::script('COM_SPPAGEBUILDER_YEARS_AGO');

		$js .= '
		
		const escapeHtml = (text) => {
			const div = document.createElement(\'div\');
			div.textContent = text;
			return div.innerHTML;
		};

		document.addEventListener("DOMContentLoaded", function() {
			// Handle Gravatar image loading and fallback
			const handleGravatarImages = () => {
				const gravatarImages = document.querySelectorAll(\'.sppb-comment-avatar img[src*="gravatar.com"]\');
				gravatarImages.forEach(img => {
					img.addEventListener(\'error\', function() {
						// Hide the image and show the fallback
						this.style.display = \'none\';
						const fallback = this.nextElementSibling;
						if (fallback && fallback.classList.contains(\'sppb-comment-avatar-fallback\')) {
							fallback.style.display = \'flex\';
						}
					});
					
					img.addEventListener(\'load\', function() {
						// Ensure fallback is hidden when image loads successfully
						const fallback = this.nextElementSibling;
						if (fallback && fallback.classList.contains(\'sppb-comment-avatar-fallback\')) {
							fallback.style.display = \'none\';
						}
					});
				});
			};
			
			// Initialize Gravatar handling
			handleGravatarImages();
			// Function to update comment count
			const updateCommentCount = () => {
				const commentItems = document.querySelectorAll(\'.sppb-comment-item[data-parent-id=""]\');
				const count = commentItems.length;
				const countElements = document.querySelectorAll(\'.sppb-comment-count\');
				countElements.forEach(element => {
					element.textContent = \'(\' + count + \')\';
				});
			};

			// Function to count all comments (including replies)
			const updateTotalCommentCount = () => {
				const allCommentItems = document.querySelectorAll(\'.sppb-comment-item\');
				const count = allCommentItems.length;
				const countElements = document.querySelectorAll(\'.sppb-comment-count\');
				countElements.forEach(element => {
					element.textContent = \'(\' + count + \')\';
				});
			};

			// Function to update reply count for a specific comment
			const updateReplyCount = (commentId) => {
				const $commentItem = document.querySelector(`[data-comment-id="${commentId}"]`);
				if (!$commentItem) return;
				
				const $childrenWrapper = $commentItem.querySelector(\'.sppb-comment-children-wrapper\');
				const $replyText = $commentItem.querySelector(\'.sppb-reply-text\');
				
				if ($childrenWrapper && $replyText) {
					const replyCount = $childrenWrapper.querySelectorAll(`.sppb-comment-item[data-parent-id="${commentId}"]`).length;
					$replyText.textContent = replyCount + \' reply\';
				}
			};

			document.addEventListener("submit", function(event) {
				if (event.target.classList.contains("sppb-comment-form")) {
					event.preventDefault();
					
					const form = event.target;
					const formData = new FormData(form);
					const commentContent = formData.get("comment");
					const enableAnonymousComment = formData.get("enable-anonymous-comment") == "1";
					const ajaxData = $(form).serializeArray();

					const apiUrl = "'.Uri::root().'index.php?option=com_sppagebuilder&task=comment.comments";

					const requestData = {
						_method: "POST",
						comment: {
							content: commentContent,
							item_id: ' . $itemId . ',
							source_type: "'. $collectionType .'",
							parent_id: null,
							enable_anonymous_comment: enableAnonymousComment
						}
					};

					const ajaxRequestData = {
						option: "com_sppagebuilder",
						task: "ajax",
						addon: "comment",
						data: ajaxData,
					};

					$.ajax({
						type: "POST",
						data: ajaxRequestData,
						success: function (response) {
							const parsedResponse = JSON.parse(response);
							const data = JSON.parse(parsedResponse.data);
							if (data?.status === true) {
								hasRateLimit = false;
								createComment(apiUrl, requestData);
							}
							return;
						},
					});

					return false;
				}
			});

			function createComment(apiUrl, requestData) {
				fetch(apiUrl, {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
					},
					body: JSON.stringify(requestData)
				})
				.then(response => response.json())
				.then(data => {
					if (data?.success && !data?.data?.error) {
						const newComment = data.data?.data || "";

						if (!newComment) {
							return;
						}

						// Check if comment needs moderation (user\'s own comment that is unpublished)
						const needsModeration = (!newComment.created_by_id || (newComment.created_by_id && newComment.created_by_id === ' . $currentUserId . ')) && newComment.published === 0;

						const parentId = newComment.parent_id || null;
						const commentEntry = renderComment(newComment, needsModeration);

						if (parentId) {
							const parentComment = document.querySelector(`.sppb-comment-item [data-comment-id="${parentId}"]`);
							if (parentComment) {
								const repliesContainer = parentComment.querySelector(".sppb-comment-children-wrapper");
								if (repliesContainer) {
									repliesContainer.insertAdjacentHTML("afterbegin", commentEntry);
								}
							} else {
								alert("Parent comment not found.");
							}
						} else {
							const commentsList = document.querySelector(".sppb-comments-list");
							if (commentsList) {
								commentsList.insertAdjacentHTML("afterbegin", commentEntry);
							}
						}

						const commentInput = document.querySelector(".sppb-comment-field");
						if (commentInput) {
							commentInput.value = "";
						}

						// Update total comment count
						updateCommentCount();
						
						// Handle Gravatar for new comment
						handleGravatarImages();

					} else {
						alert("Error: " + data?.data?.error);
					}
				})
				.catch(error => {
					alert("An error occurred while submitting the comment: " + error.message);
				});
			}

			$(document).on("click", ".sppb-comment-reply-action", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.data("comment-id");

				$(".sppb-comment-reply-form").hide();

				const $replyForm = $self.closest(".sppb-comment-item").find(`.sppb-comment-reply-form[data-comment-id="${commentId}"]`);
				$replyForm.show();

				$replyForm.find(".sppb-comment-reply-input").focus();
			});

			// Handle reply form submission
			$(document).on("click", ".sppb-comment-reply-submit-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.data("comment-id");
				let replyContent = $self.closest(".sppb-comment-item").find(".sppb-comment-reply-input").val();
				
				if (!replyContent.trim()) {
					alert("Please enter a reply.");
					return;
				}

				// Get the anonymous comment setting from the main form
				const enableAnonymousComment = $self.closest(".sppb-addon-comment").find("form.sppb-comment-form").find("input[name=\'enable-anonymous-comment\']")?.[0]?.value == "1";

				const apiUrl = "'.Uri::root().'index.php?option=com_sppagebuilder&task=comment.comments";

				const requestData = {
					_method: "POST",
					comment: {
						content: replyContent,
						item_id: ' . $itemId . ',
						parent_id: commentId,
						source_type: "'. $collectionType .'",
						enable_anonymous_comment: enableAnonymousComment
					}
				};

				fetch(apiUrl, {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
					},
					body: JSON.stringify(requestData)
				})
				.then(response => response.json())
				.then(data => {
					if (data?.success && !data?.data?.error) {
						const newReply = data.data?.data || "";

						if (!newReply) {
							return;
						}

						// Check if reply needs moderation (user\'s own reply that is unpublished)
						const needsModeration = (!newReply.created_by_id || (newReply.created_by_id && newReply.created_by_id === ' . $currentUserId . ')) && newReply.published === 0;

						const replyEntry = renderComment(newReply, needsModeration);
						const $parentComment = $self.closest(".sppb-comment-item");

						let $repliesContainer = $parentComment.find(".sppb-comment-children-wrapper");
						if ($repliesContainer?.length === 0) {
							$repliesContainer = $("<div class=\"sppb-comment-children-wrapper\"></div>");
							$parentComment.append($repliesContainer);
						}
						
						$($repliesContainer?.[0])?.prepend(replyEntry);

						$self.closest(".sppb-comment-item").find(".sppb-comment-reply-input").val("");
						$self.closest(".sppb-comment-item").find(".sppb-comment-reply-form").hide();

						// Update reply count for the parent comment
						updateReplyCount(newReply.parent_id);

						// Update total comment count
						updateTotalCommentCount();
						
						// Handle Gravatar for new reply
						handleGravatarImages();

					} else {
						alert("Error: " + data?.data?.error);
					}
				})
				.catch(error => {
					alert("An error occurred while submitting the reply: " + error.message);
				});
			});

			$(document).on("click", ".sppb-comment-reply-cancel-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.data("comment-id");
				$self.closest(".sppb-comment-item").find(".sppb-comment-reply-form").hide();
			});

			$(document).on("click", ".sppb-ellipsis-edit-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.closest(".sppb-comment-item").data("comment-id");

				$self.closest(".sppb-ellipsis-dropdown").hide();

				const $commentItem = $self.closest(".sppb-comment-item");
				const $editForm = $commentItem.find(`.sppb-comment-edit-form[data-comment-id=${commentId}]`);
				const $contentText = $commentItem.find(`.sppb-comment-content[data-comment-id=${commentId}] .sppb-comment-content-text`);
				
				$editForm.show();
				$self.closest(".sppb-comment-header").find(".sppb-comment-header-left").hide();
				$self.closest(".sppb-comment-header").find(".sppb-comment-ellipsis-action").hide();
				$contentText.hide();

				$commentItem.find(`.sppb-comment-edit-input[data-comment-id=${commentId}]`).focus();
			});

			$(document).on("click", ".sppb-comment-edit-submit-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.data("comment-id");
				let commentContent = $self.closest(".sppb-comment-item").find(".sppb-comment-edit-input").val();
				
				if (!commentContent.trim()) {
					alert("Please enter comment content.");
					return;
				}

				const apiUrl = "'.Uri::root().'index.php?option=com_sppagebuilder&task=comment.comments";

				$.ajax({
					url: apiUrl,
					data: {
						_method: "POST",
						comment: {
							id: commentId,
							content: commentContent
						}
					},
					success: function (response) {
						if (response.success) {
							const $commentItem = $self.closest(".sppb-comment-item[data-comment-id=\'" + commentId + "\']");
							const $editForm = $commentItem.find(".sppb-comment-edit-form");
							const $contentText = $commentItem.find(".sppb-comment-content[data-comment-id=\'" + commentId + "\'] .sppb-comment-content-text span");

							const $contentTextWrapper = $commentItem.find(`.sppb-comment-content[data-comment-id=${commentId}] .sppb-comment-content-text`);

							$editForm.hide();
							$commentItem.find(".sppb-comment-header .sppb-comment-header-left").show();
							$commentItem.find(".sppb-comment-header .sppb-comment-ellipsis-action").show();
							$commentItem.find(".sppb-comment-content").show();
							
							const formattedContent = escapeHtml(commentContent).replace(/\\n/g, \'<br>\');
							$contentTextWrapper.show();
							$contentText.html(formattedContent);
						} else {
							alert("An error occurred while editing the comment: " + response.message);
						}
					},
					error: function (xhr, status, error) {
						alert("An error occurred while editing the comment: " + error);
					}
				});
			});

			$(document).on("click", ".sppb-comment-edit-cancel-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.data("comment-id");
				const $commentItem = $self.closest(".sppb-comment-item");
				const $editForm = $commentItem.find(".sppb-comment-edit-form");
				const $contentText = $commentItem.find(".sppb-comment-content .sppb-comment-content-text");
				
				$editForm.hide();
				$commentItem.find(".sppb-comment-header .sppb-comment-header-left").show();
				$commentItem.find(".sppb-comment-header .sppb-comment-ellipsis-action").show();
				$contentText.show();
			});

			$(document).on("click", ".sppb-ellipsis-delete-btn", function (event) {
				event.preventDefault();
				let $self = $(this);
				let $commentItem = $self.closest(".sppb-comment-item");
				let commentId = $commentItem.data("comment-id");
				let parentId = $commentItem.data("parent-id");

				if (!confirm("Are you sure you want to delete this comment?")) {
					return;
				}

				$self.closest(".sppb-ellipsis-dropdown").hide();

				const apiUrl = "'.Uri::root().'index.php?option=com_sppagebuilder&task=comment.comments";

				$.ajax({
					url: apiUrl,
					data: {
						_method: "DELETE",
						comment: {
							id: commentId
						}
					},
					success: function (response) {
						if (response.success) {
							// Remove the comment item
							$commentItem.remove();
							
							// Update reply count for parent comment if this was a reply
							if (parentId) {
								updateReplyCount(parentId);
							}
							
							// Update total comment count
							updateCommentCount();
						} else {
							alert("An error occurred while deleting the comment: " + response.message);
						}
					},
					error: function (xhr, status, error) {
						alert("An error occurred while deleting the comment: " + error);
					}
				});
			});

			$(document).on("click", ".sppb-ellipsis-icon", function (event) {
				event.preventDefault();
				event.stopPropagation();
				let $self = $(this);
				let $dropdown = $self.siblings(".sppb-ellipsis-dropdown");

				$(".sppb-ellipsis-dropdown").not($dropdown).hide();

				$dropdown.toggle();
			});

			$(document).on("click", function (event) {
				if (!$(event.target).closest(".sppb-comment-ellipsis-action").length) {
					$(".sppb-ellipsis-dropdown").hide();
				}
			});

			$(document).on("click", ".sppb-comment-likes", function (event) {
				event.preventDefault();
				let $self = $(this);
				let commentId = $self.closest(".sppb-comment-item").data("comment-id");
				let $likesText = $self.find(".sppb-likes-text");
				let currentLikes = parseInt($likesText.text().match(/\d+/)[0]) || 0;
				
				const apiUrl = "'.Uri::root().'index.php?option=com_sppagebuilder&task=comment.comments";

				$.ajax({
					url: apiUrl,
					data: {
						_method: "POST",
						comment: {
							id: commentId,
							action: "like"
						}
					},
					success: function (response) {
						if (response.success) {
							if ($self.hasClass("liked")) {
								$likesText.text((currentLikes - 1) + " ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '");
								$self.removeClass("liked");
							} else {
								$likesText.text((currentLikes + 1) + " ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '");
								$self.addClass("liked");
							}
						} else {
							alert(response?.data?.error || "An error occurred while liking the comment");
						}
					},
					error: function (xhr, status, error) {
						alert(xhr?.responseJSON?.data?.error || "An error occurred while liking the comment: " + error);
					}
				});
			});

			const renderComment = (commentRecord, needsModeration = false) => {
				// Helper functions to match PHP implementation
				// MD5 function for Gravatar generation
				const md5 = (string) => {
					function md5_RotateLeft(lValue, iShiftBits) {
						return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
					}
					function md5_AddUnsigned(lX, lY) {
						var lX4, lY4, lX8, lY8, lResult;
						lX8 = (lX & 0x80000000);
						lY8 = (lY & 0x80000000);
						lX4 = (lX & 0x40000000);
						lY4 = (lY & 0x40000000);
						lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);
						if (lX4 & lY4) {
							return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
						}
						if (lX4 | lY4) {
							if (lResult & 0x40000000) {
								return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
							} else {
								return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
							}
						} else {
							return (lResult ^ lX8 ^ lY8);
						}
					}
					function md5_F(x, y, z) {
						return (x & y) | ((~x) & z);
					}
					function md5_G(x, y, z) {
						return (x & z) | (y & (~z));
					}
					function md5_H(x, y, z) {
						return (x ^ y ^ z);
					}
					function md5_I(x, y, z) {
						return (y ^ (x | (~z)));
					}
					function md5_FF(a, b, c, d, x, s, ac) {
						a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_F(b, c, d), x), ac));
						return md5_AddUnsigned(md5_RotateLeft(a, s), b);
					}
					function md5_GG(a, b, c, d, x, s, ac) {
						a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_G(b, c, d), x), ac));
						return md5_AddUnsigned(md5_RotateLeft(a, s), b);
					}
					function md5_HH(a, b, c, d, x, s, ac) {
						a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_H(b, c, d), x), ac));
						return md5_AddUnsigned(md5_RotateLeft(a, s), b);
					}
					function md5_II(a, b, c, d, x, s, ac) {
						a = md5_AddUnsigned(a, md5_AddUnsigned(md5_AddUnsigned(md5_I(b, c, d), x), ac));
						return md5_AddUnsigned(md5_RotateLeft(a, s), b);
					}
					function md5_ConvertToWordArray(string) {
						var lWordCount;
						var lMessageLength = string.length;
						var lNumberOfWords_temp1 = lMessageLength + 8;
						var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;
						var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;
						var lWordArray = Array(lNumberOfWords - 1);
						var lBytePosition = 0;
						var lByteCount = 0;
						while (lByteCount < lMessageLength) {
							lWordCount = (lByteCount - (lByteCount % 4)) / 4;
							lBytePosition = (lByteCount % 4) * 8;
							lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));
							lByteCount++;
						}
						lWordCount = (lByteCount - (lByteCount % 4)) / 4;
						lBytePosition = (lByteCount % 4) * 8;
						lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
						lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
						lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
						return lWordArray;
					}
					function md5_WordToHex(lValue) {
						var WordToHexValue = "", WordToHexValue_temp = "", lByte, lCount;
						for (lCount = 0; lCount <= 3; lCount++) {
							lByte = (lValue >>> (lCount * 8)) & 255;
							WordToHexValue_temp = "0" + lByte.toString(16);
							WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);
						}
						return WordToHexValue;
					}
					function md5_Utf8Encode(string) {
						string = string.replace(/\\r\\n/g, "\\n");
						var utftext = "";
						for (var n = 0; n < string.length; n++) {
							var c = string.charCodeAt(n);
							if (c < 128) {
								utftext += String.fromCharCode(c);
							} else if ((c > 127) && (c < 2048)) {
								utftext += String.fromCharCode((c >> 6) | 192);
								utftext += String.fromCharCode((c & 63) | 128);
							} else {
								utftext += String.fromCharCode((c >> 12) | 224);
								utftext += String.fromCharCode(((c >> 6) & 63) | 128);
								utftext += String.fromCharCode((c & 63) | 128);
							}
						}
						return utftext;
					}
					var x = Array();
					var k, AA, BB, CC, DD, a, b, c, d;
					var S11 = 7, S12 = 12, S13 = 17, S14 = 22;
					var S21 = 5, S22 = 9, S23 = 14, S24 = 20;
					var S31 = 4, S32 = 11, S33 = 16, S34 = 23;
					var S41 = 6, S42 = 10, S43 = 15, S44 = 21;
					string = md5_Utf8Encode(string);
					x = md5_ConvertToWordArray(string);
					a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
					for (k = 0; k < x.length; k += 16) {
						AA = a; BB = b; CC = c; DD = d;
						a = md5_FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);
						d = md5_FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);
						c = md5_FF(c, d, a, b, x[k + 2], S13, 0x242070DB);
						b = md5_FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);
						a = md5_FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);
						d = md5_FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);
						c = md5_FF(c, d, a, b, x[k + 6], S13, 0xA8304613);
						b = md5_FF(b, c, d, a, x[k + 7], S14, 0xFD469501);
						a = md5_FF(a, b, c, d, x[k + 8], S11, 0x698098D8);
						d = md5_FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);
						c = md5_FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);
						b = md5_FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);
						a = md5_FF(a, b, c, d, x[k + 12], S11, 0x6B901122);
						d = md5_FF(d, a, b, c, x[k + 13], S12, 0xFD987193);
						c = md5_FF(c, d, a, b, x[k + 14], S13, 0xA679438E);
						b = md5_FF(b, c, d, a, x[k + 15], S14, 0x49B40821);
						a = md5_GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);
						d = md5_GG(d, a, b, c, x[k + 6], S22, 0xC040B340);
						c = md5_GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);
						b = md5_GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);
						a = md5_GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);
						d = md5_GG(d, a, b, c, x[k + 10], S22, 0x2441453);
						c = md5_GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);
						b = md5_GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);
						a = md5_GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);
						d = md5_GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);
						c = md5_GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);
						b = md5_GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);
						a = md5_GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);
						d = md5_GG(d, a, b, c, x[k + 20], S22, 0xFCEFA3F8);
						c = md5_GG(c, d, a, b, x[k + 20], S23, 0x676F02D9);
						b = md5_GG(b, c, d, d, x[k + 5], S24, 0x8D2A4C8A);
						a = md5_HH(a, b, c, d, x[k + 8], S21, 0xFFFA3942);
						d = md5_HH(d, a, b, c, x[k + 11], S22, 0x8771F681);
						c = md5_HH(c, d, a, b, x[k + 14], S23, 0x6D9D6122);
						b = md5_HH(b, c, d, a, x[k + 1], S24, 0xFDE5380C);
						a = md5_HH(a, b, c, d, x[k + 4], S21, 0xA4BEEA44);
						d = md5_HH(d, a, b, c, x[k + 7], S22, 0x4BDECFA9);
						c = md5_HH(c, d, a, b, x[k + 10], S23, 0xF6BB4B60);
						b = md5_HH(b, c, d, a, x[k + 13], S24, 0xBEBFBC70);
						a = md5_HH(a, b, c, d, x[k + 0], S21, 0x289B7EC6);
						d = md5_HH(d, a, b, c, x[k + 3], S22, 0xEAA127FA);
						c = md5_HH(c, d, a, b, x[k + 6], S23, 0xD4EF3085);
						b = md5_HH(b, c, d, a, x[k + 9], S24, 0x4881D05);
						a = md5_HH(a, b, c, d, x[k + 12], S21, 0xD9D4D039);
						d = md5_HH(d, a, b, c, x[k + 15], S22, 0xE6DB99E5);
						a = md5_HH(a, b, c, d, x[k + 2], S23, 0x1FA27CF8);
						b = md5_HH(b, c, d, a, x[k + 5], S24, 0xC4AC5665);
						a = md5_II(a, b, c, d, x[k + 0], S21, 0xF4292244);
						d = md5_II(d, a, b, c, x[k + 6], S22, 0x432AFF97);
						c = md5_II(c, d, a, b, x[k + 13], S23, 0xAB9423A7);
						b = md5_II(b, c, d, a, x[k + 4], S24, 0xFC93A039);
						a = md5_II(a, b, c, d, x[k + 1], S21, 0x655B59C3);
						d = md5_II(d, a, b, c, x[k + 8], S22, 0x8F0CCC92);
						c = md5_II(c, d, a, b, x[k + 11], S23, 0xFFEFF47D);
						b = md5_II(b, c, d, a, x[k + 2], S24, 0x85845DD1);
						a = md5_II(a, b, c, d, x[k + 7], S21, 0x6FA87E4F);
						d = md5_II(d, a, b, c, x[k + 14], S22, 0xFE2CE6E0);
						c = md5_II(c, d, a, b, x[k + 5], S23, 0xA3014314);
						b = md5_II(b, c, d, a, x[k + 12], S24, 0x4E0811A1);
						a = md5_II(a, b, c, d, x[k + 9], S21, 0xF7537E82);
						d = md5_II(d, a, b, c, x[k + 15], S22, 0xBD3AF235);
						c = md5_II(c, d, a, b, x[k + 2], S23, 0x2AD7D2BB);
						b = md5_II(b, c, d, a, x[k + 0], S24, 0xEB86D391);
						a = md5_AddUnsigned(a, AA);
						b = md5_AddUnsigned(b, BB);
						c = md5_AddUnsigned(c, CC);
						d = md5_AddUnsigned(d, DD);
					}
					var temp = md5_WordToHex(a) + md5_WordToHex(b) + md5_WordToHex(c) + md5_WordToHex(d);
					return temp.toLowerCase();
				};
				
				const getInitials = (name) => {
					if (typeof name !== "string") {
						return name;
					}
					const words = name.split(\' \');
					if (words.length > 1) {
						return words[0].charAt(0).toUpperCase() + words[words.length - 1].charAt(0).toUpperCase();
					}
					return name.charAt(0).toUpperCase();
				};
				
				const getRandomColor = () => {
					const colors = [\'#3B82F6\', \'#10B981\', \'#F59E0B\', \'#EF4444\', \'#8B5CF6\', \'#06B6D4\', \'#84CC16\', \'#F97316\'];
					return colors[Math.floor(Math.random() * colors.length)];
				};
				
				const getTextColor = (bgColor) => {
					const hex = bgColor.replace(\'#\', \'\');
					const r = parseInt(hex.substr(0, 2), 16);
					const g = parseInt(hex.substr(2, 2), 16);
					const b = parseInt(hex.substr(4, 2), 16);
					const brightness = (r * 299 + g * 587 + b * 114) / 1000;
					return brightness > 128 ? \'#000000\' : \'#FFFFFF\';
				};
				
				const getRelativeTime = (dateString) => {
					const date = new Date(dateString);
					const now = new Date(dateString);
					const diff = now - date;
					const diffInSeconds = Math.floor(diff / 1000);
					
					if (diffInSeconds < 60) {
						return Joomla.Text._(\'COM_SPPAGEBUILDER_JUST_NOW\');
					} else if (diffInSeconds < 3600) {
						const minutes = Math.floor(diffInSeconds / 60);
						const key = minutes > 1 ? \'COM_SPPAGEBUILDER_MINUTES_AGO\' : \'COM_SPPAGEBUILDER_MINUTE_AGO\';
						return Joomla.Text._(key).replace(\'%s\', minutes);
					} else if (diffInSeconds < 86400) {
						const hours = Math.floor(diffInSeconds / 3600);
						const key = hours > 1 ? \'COM_SPPAGEBUILDER_HOURS_AGO\' : \'COM_SPPAGEBUILDER_HOUR_AGO\';
						return Joomla.Text._(key).replace(\'%s\', hours);
					} else if (diffInSeconds < 2592000) {
						const days = Math.floor(diffInSeconds / 86400);
						const key = days > 1 ? \'COM_SPPAGEBUILDER_DAYS_AGO\' : \'COM_SPPAGEBUILDER_DAY_AGO\';
						return Joomla.Text._(key).replace(\'%s\', days);
					} else if (diffInSeconds < 31536000) {
						const months = Math.floor(diffInSeconds / 2592000);
						const key = months > 1 ? \'COM_SPPAGEBUILDER_MONTHS_AGO\' : \'COM_SPPAGEBUILDER_MONTH_AGO\';
						return Joomla.Text._(key).replace(\'%s\', months);
					} else {
						const years = Math.floor(diffInSeconds / 31536000);
						const key = years > 1 ? \'COM_SPPAGEBUILDER_YEARS_AGO\' : \'COM_SPPAGEBUILDER_YEAR_AGO\';
						return Joomla.Text._(key).replace(\'%s\', years);
					}
				};
				
				// Generate avatar and colors
				const avatarColor = "' . $avatarColor . '";
				const textColor = getTextColor(avatarColor);
				const commentatorName = commentRecord.created_by || \'' . $anonymousPerson . '\';
				const initials = getInitials(commentatorName);
				
				// Generate time display
				const createdTime = getRelativeTime(commentRecord.created_on);
				const editedTime = commentRecord.modified && commentRecord.modified !== commentRecord.created_on ? 
					\' • <span class="sppb-comment-edited-time">Edited \' + getRelativeTime(commentRecord.modified) + \'<\/span>\' : \'\';
				
				// Get settings from the page (we\'ll need to make these available)
				const settings = window.sppbCommentSettings || {};
				const ellipsisBtnClass = \'sppb-btn sppb-btn-custom sppb-btn-rounded sppb-btn-md\';
				const ellipsisBtnIcon = \'fa fa-ellipsis-v\';
				const likesIcon = \'fa fa-heart\';
				const replyIcon = \'fa fa-reply\';
				const btnClass = \'sppb-btn sppb-btn-default sppb-btn-rounded sppb-btn-md\';
				
				// Generate ellipsis action buttons HTML
				const generateEllipsisActionButtons = () => {
					return \'<div class="sppb-comment-ellipsis-action-buttons-wrapper">\' +
						\'<button style="width: 100%; text-align: left;" class="sppb-comment-ellipsis-action-button sppb-btn sppb-btn-md sppb-btn-rounded sppb-ellipsis-edit-btn" id="sppb-comment-ellipsis-action-button-0" data-comment-id="\' + commentRecord.id + \'">Edit<\/button>\' +
						\'<button style="width: 100%; text-align: left;" class="sppb-comment-ellipsis-action-button sppb-btn sppb-btn-md sppb-btn-rounded sppb-ellipsis-delete-btn" id="sppb-comment-ellipsis-action-button-1" data-comment-id="\' + commentRecord.id + \'">Delete<\/button>\' +
						\'<\/div>\';
				};
				
				// Generate edit comment buttons HTML
				const generateEditCommentButtons = () => {
					return \'<div class="sppb-comment-edit-buttons-wrapper sppb-comment-btn-wrapper">\' +
						\'<button class="sppb-comment-edit-button sppb-comment-edit-cancel-btn sppb-btn sppb-btn-md sppb-btn-rounded" id="sppb-comment-edit-button-0" data-comment-id="\' + commentRecord.id + \'">' . Text::_('COM_SPPAGEBUILDER_CANCEL') . '<\/button>\' +
						\'<button class="sppb-comment-edit-button sppb-comment-edit-submit-btn sppb-btn sppb-btn-md sppb-btn-rounded" id="sppb-comment-edit-button-1" data-comment-id="\' + commentRecord.id + \'">' . Text::_('COM_SPPAGEBUILDER_UPDATE') . '<\/button>\' +
						\'<\/div>\';
				};
				
				// Calculate margin and level based on parent
				const level = commentRecord.parent_id ? 1 : 0;
				const rootCommentClass = level === 0 ? \' sppb-root-comment\' : \'\';
				const parentCommentClass = (!commentRecord.parent_id) ? \' sppb-parent-comment\' : \'\';
				const marginLeft = level > 0 ? \'55px\' : \'0px\';
				const marginTop = \'-4px\';
				const contentMarginLeft = level > 0 ? \'style="margin-left: 0; margin-top: 11px;"\' : \'\';
				
				const formattedContent = escapeHtml(commentRecord.content).replace(/\\n/g, \'<br>\');

				// Build HTML in parts to avoid string concatenation issues
				const htmlParts = [];
				
				// Main container
				htmlParts.push(\'<div data-comment-id="\' + commentRecord.id + \'" data-parent-id="\' + (commentRecord.parent_id || "") + \'" class="sppb-comment-item sppb-comment-item \' + parentCommentClass + rootCommentClass + \'" style="margin-top: \' + marginTop + \'; margin-left: \' + marginLeft + \';">\');
				htmlParts.push(\'<div class="sppb-comment-thread-line" style="left:-34px;"><\/div>\');
				htmlParts.push(\'<div class="sppb-comment-thread-connector" style="left:-34px; width: 55px;"><\/div>\');
				htmlParts.push(\'<div class="sppb-comment-content" \' + contentMarginLeft + \'>\');
				
				// Header section
				htmlParts.push(\'<div class="sppb-comment-header sppb-comment-header">\');
				
				// Avatar section with profile image, Gravatar, and fallback logic
				if (commentRecord.profile_image) {
					htmlParts.push(\'<div class="sppb-comment-avatar" style="border-radius: 50%; width: 45px; height: 45px; margin-right: 10px; overflow: hidden; flex-shrink: 0;">\');
					htmlParts.push(\'<img src="\' + escapeHtml(commentRecord.profile_image) + \'" alt="\' + escapeHtml(commentatorName) + \'" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display=\\\'none\\\'; this.nextElementSibling.style.display=\\\'flex\\\';" />\');
					htmlParts.push(\'<div class="sppb-comment-avatar-fallback" style="background-color: \' + avatarColor + \'; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: \' + textColor + \'">\');
					htmlParts.push(\'<span>\' + escapeHtml(initials) + \'<\/span>\');
					htmlParts.push(\'<\/div>\');
					htmlParts.push(\'<\/div>\');
				} else if (' . (!empty($this->addon->settings->enable_gravatar) ? 'true' : 'false') . ' && commentRecord.created_by_email) {
					// Generate Gravatar URL
					const gravatarHash = md5(commentRecord.created_by_email.toLowerCase().trim());
					const gravatarUrl = \'https://www.gravatar.com/avatar/\' + gravatarHash + \'?s=90&d=404\';
					htmlParts.push(\'<div class="sppb-comment-avatar" style="border-radius: 50%; width: 45px; height: 45px; margin-right: 10px; overflow: hidden; flex-shrink: 0;">\');
					htmlParts.push(\'<img src="\' + gravatarUrl + \'" alt="\' + escapeHtml(commentatorName) + \'" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display=\\\'none\\\'; this.nextElementSibling.style.display=\\\'flex\\\';" />\');
					htmlParts.push(\'<div class="sppb-comment-avatar-fallback" style="background-color: \' + avatarColor + \'; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: \' + textColor + \'">\');
					htmlParts.push(\'<span>\' + escapeHtml(initials) + \'<\/span>\');
					htmlParts.push(\'<\/div>\');
					htmlParts.push(\'<\/div>\');
				} else {
					// Fallback to initials only
					htmlParts.push(\'<div class="sppb-comment-avatar" style="background-color: \' + avatarColor + \'; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 600; margin-right: 10px; color: \' + textColor + \'">\');
					htmlParts.push(\'<span>\' + escapeHtml(initials) + \'<\/span>\');
					htmlParts.push(\'<\/div>\');
				}
				
				// Header left content
				htmlParts.push(\'<div class="sppb-comment-header-left">\');
				htmlParts.push(\'<div class="commentator-name-wrapper">\');
				htmlParts.push(\'<span class="commentator-name">\' + escapeHtml(commentatorName) + \'<\/span>\');
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<div class="sppb-comment-time-wrapper">\');
				htmlParts.push(\'<span class="sppb-comment-time">\' + createdTime + editedTime + \'<\/span>\');
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				
				// Ellipsis action
				htmlParts.push(\'<div class="sppb-comment-ellipsis-action \' + ellipsisBtnClass + \'">\');
				htmlParts.push(\'<i class="sppb-ellipsis-icon \' + ellipsisBtnIcon + \'"><\/i>\');
				htmlParts.push(\'<div class="sppb-ellipsis-dropdown" style="display: none;">\');
				htmlParts.push(generateEllipsisActionButtons());
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				
				// Content section
				htmlParts.push(\'<div class="sppb-comment-content sppb-comment-body" data-comment-id="\' + commentRecord.id + \'" style="margin-left: 55px; padding-bottom: 29px;">\');
				htmlParts.push(\'<div class="sppb-comment-body-thread-line"><\/div>\');
				
				// Add moderation notice if needed
				if (needsModeration) {
					htmlParts.push(\'<div class="sppb-comment-unpublished-notice">' . Text::_('COM_SPPAGEBUILDER_COMMENT_UNAPPROVED_NOTICE') . '<\/div>\');
				}
				
				htmlParts.push(\'<span class="sppb-comment-content-text\' + (needsModeration ? \' sppb-comment-unpublished\' : \'\') + \'" style="margin-left: 10px; margin-top: 20px; display: inline-block;">\');
				htmlParts.push(\'<span>\' + formattedContent + \'<\/span>\');
				htmlParts.push(\'<\/span>\');
				
				// Edit form
				htmlParts.push(\'<div class="sppb-comment-edit-form sppb-comment-form" data-comment-id="\' + commentRecord.id + \'" style="display: none; \' + (needsModeration ? \'margin-top: -45px;\' : \'\') + \'">\');
				htmlParts.push(\'<textarea type="text" class="sppb-comment-edit-input sppb-comment-field" data-comment-id="\' + commentRecord.id + \'">\' + escapeHtml(commentRecord.content) + \'<\/textarea>\');
				htmlParts.push(generateEditCommentButtons());
				htmlParts.push(\'<\/div>\');
				
				// Actions section - only show if not needing moderation
				if (!needsModeration) {
					htmlParts.push(\'<div class="sppb-comment-actions" style="margin-left: 10px">\');
					htmlParts.push(\'<div class="sppb-comment-likes\' + (commentRecord.user_liked ? \' liked\' : \'\') + \'">\');
					htmlParts.push(\'<i class="sppb-likes-icon \' + likesIcon + \'"><\/i>\');
					htmlParts.push(\'<span class="sppb-likes-text">\' + (commentRecord.likes_count || 0) + \' ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '<\/span>\');
					htmlParts.push(\'<\/div>\');
					htmlParts.push(\'<div class="sppb-comment-reply-action" data-comment-id="\' + commentRecord.id + \'">\');
					htmlParts.push(\'<i class="sppb-reply-icon \' + replyIcon + \'"><\/i>\');
					htmlParts.push(\'<span class="sppb-reply-text">\' + (commentRecord.replies || 0) + \' ' . Text::_('COM_SPPAGEBUILDER_REPLY') . '<\/span>\');
					htmlParts.push(\'<\/div>\');
					htmlParts.push(\'<\/div>\');
				}
				
				// Reply form
				htmlParts.push(\'<div class="sppb-comment-reply-form sppb-comment-form" data-comment-id="\' + commentRecord.id + \'" style="display: none;">\');
				htmlParts.push(\'<textarea type="text" class="sppb-comment-reply-input sppb-comment-field" data-comment-id="\' + commentRecord.id + \'" placeholder="' . Text::_('COM_SPPAGEBUILDER_WRITE_A_REPLY') . '"><\/textarea>\');
				htmlParts.push(\'<div class="sppb-comment-btn-wrapper">\');
				htmlParts.push(\'<button class="sppb-comment-reply-cancel-btn \' + btnClass + \'" data-comment-id="\' + commentRecord.id + \'">' . Text::_('COM_SPPAGEBUILDER_CANCEL') . '<\/button>\');
				htmlParts.push(\'<button class="sppb-comment-reply-submit-btn comment-submit-btn \' + btnClass + \'" data-comment-id="\' + commentRecord.id + \'">' . Text::_('COM_SPPAGEBUILDER_SUBMIT') . '<\/button>\');
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				
				// Close content section
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				htmlParts.push(\'<\/div>\');
				
				const html = htmlParts.join(\'\');
				return html;
			};
		});';

		return $js;
	}

	/**
	 * Generate the lodash template string for the frontend editor.
	 *
	 * @return 	string 	The lodash template string.
	 * @since 	1.0.0
	 */
	public static function getTemplate()
	{
		$lodash = new Lodash('#sppb-addon-{{ data.id }}');
		$enableGravatar = ComponentHelper::getParams('com_sppagebuilder')->get('enable_gravatar', 1);
		$output = '<style type="text/css">';
		
		// Title wrapper styles
		$output .= '.sppb-comment-title-wrapper {display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #D3D7EB; margin-bottom: 40px; padding-bottom: 24px;}';
		$output .= $lodash->alignment('justify-content', '.sppb-comment-title-wrapper', 'data.title_alignment');
		
		// Title text typography and styles
		$typographyFallbacks = [
			'font'           => 'data.title_font_family',
			'size'           => 'data.title_fontsize',
			'line_height'    => 'data.title_lineheight',
			'letter_spacing' => 'data.title_letterspace',
			'uppercase'      => 'data.title_font_style?.uppercase',
			'italic'         => 'data.title_font_style?.italic',
			'underline'      => 'data.title_font_style?.underline',
			'weight'         => 'data.title_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-title-text', 'data.title_typography', $typographyFallbacks);
		$output .= $lodash->color('color', '.sppb-comment-title-text', 'data.title_color');
		$output .= $lodash->textShadow('.sppb-comment-title-text', 'data.title_shadow');
		
		// Comment count styles
		$countTypographyFallbacks = [
			'font'           => 'data.comment_count_font_family',
			'size'           => 'data.comment_count_fontsize',
			'line_height'    => 'data.comment_count_lineheight',
			'letter_spacing' => 'data.comment_count_letterspace',
			'uppercase'      => 'data.comment_count_font_style?.uppercase',
			'italic'         => 'data.comment_count_font_style?.italic',
			'underline'      => 'data.comment_count_font_style?.underline',
			'weight'         => 'data.comment_count_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-count', 'data.comment_count_typography', $countTypographyFallbacks);
		$output .= $lodash->color('color', '.sppb-comment-count', 'data.comment_count_color');
		$output .= $lodash->textShadow('.sppb-comment-count', 'data.comment_count_shadow');

		// Label wrapper styles
		$output .= '.sppb-comment-label-wrapper {display: flex; align-items: center; margin-bottom: 12px;}';
		$output .= $lodash->alignment('justify-content', '.sppb-comment-label-wrapper', 'data.label_alignment');
		$output .= $lodash->color('color', '.sppb-comment-label-text', 'data.label_color');
		$output .= $lodash->textShadow('.sppb-comment-label-text', 'data.label_text_shadow');

		// Comment form styles
		$output .= '.sppb-comment-form {display: flex; flex-direction: column;}';
		$output .= '.sppb-comment-reply-form {margin-top: 16px;}';

		// Comment field styles
		$output .= '.sppb-comment-field {transition: all 0.05s ease-in-out; border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; width: 100%; box-sizing: border-box;}';
		$output .= $lodash->unit('height', '.sppb-comment-field', 'data.comment_field_height');
		$output .= $lodash->spacing('padding', '.sppb-comment-field', 'data.comment_field_padding');
		$output .= $lodash->color('color', '.sppb-comment-field', 'data.comment_field_typing_color');
		$output .= $lodash->color('background-color', '.sppb-comment-field', 'data.comment_field_background_color');
		$output .= $lodash->unit('border-color', '.sppb-comment-field', 'data.comment_field_border_color');
		$output .= $lodash->unit('border-width', '.sppb-comment-field', 'data.comment_field_border_width');
		$output .= $lodash->color('color', '.sppb-comment-field::placeholder', 'data.comment_field_placeholder_color');
		$output .= $lodash->color('background-color', '.sppb-comment-field:hover', 'data.comment_field_background_hover_color');
		$output .= $lodash->color('color', '.sppb-comment-field:hover::placeholder', 'data.comment_field_placeholder_hover_color');
		$output .= $lodash->unit('border-color', '.sppb-comment-field:focus', 'data.comment_field_border_focus_color');
		
		$fieldTypographyFallbacks = [
			'font'           => 'data.comment_field_font_family',
			'size'           => 'data.comment_field_fontsize',
			'line_height'    => 'data.comment_field_lineheight',
			'letter_spacing' => 'data.comment_field_letterspace',
			'uppercase'      => 'data.comment_field_font_style?.uppercase',
			'italic'         => 'data.comment_field_font_style?.italic',
			'underline'      => 'data.comment_field_font_style?.underline',
			'weight'         => 'data.comment_field_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-field', 'data.comment_field_typography', $fieldTypographyFallbacks);

		// Comment header styles
		$output .= '.sppb-comment-header {display: flex; justify-content: space-between; align-items: center; position: relative;}';
		$output .= '.sppb-comment-header-left {display: flex; flex-direction: column; gap: 4px; flex: 1;}';

		// Ellipsis action styles
		$output .= '.sppb-comment-ellipsis-action {position: relative; cursor: inherit;}';
		$output .= '.sppb-comment-ellipsis-action i {cursor: pointer;}';
		$output .= $lodash->color('background-color', '.sppb-comment-ellipsis-action', 'data.ellipsis_icon_bg_color');
		$output .= '.sppb-ellipsis-icon {font-size: 16px; padding: 8px; border-radius: 50%; transition: all 0.3s ease;}';
		$output .= $lodash->color('color', '.sppb-ellipsis-icon', 'data.ellipsis_icon_color');
		$output .= $lodash->color('background-color', '.sppb-ellipsis-icon', 'data.ellipsis_icon_bg_color');
		$output .= '.sppb-ellipsis-dropdown {position: absolute; top: 100%; right: 0; background: white; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 1000; min-width: 120px;}';

		// Comment actions styles
		$output .= '.sppb-comment-actions {display: flex; align-items: center; gap: 20px; margin-top: 16px;}';
		$output .= '.sppb-comment-likes {display: flex; align-items: center; gap: 6px; cursor: pointer;}';
		$output .= '.sppb-comment-reply-action {display: flex; align-items: center; gap: 6px; cursor: pointer;}';

		// Likes functionality styles
		$output .= $lodash->typography('.sppb-likes-text', 'data.likes_typography', [
			'font'           => 'data.likes_font_family',
			'size'           => 'data.likes_fontsize',
			'line_height'    => 'data.likes_lineheight',
			'letter_spacing' => 'data.likes_letterspace',
			'uppercase'      => 'data.likes_font_style?.uppercase',
			'italic'         => 'data.likes_font_style?.italic',
			'underline'      => 'data.likes_font_style?.underline',
			'weight'         => 'data.likes_font_style?.weight'
		]);
		$output .= $lodash->color('color', '.sppb-likes-text', 'data.likes_color');
		$output .= $lodash->color('color', '.sppb-comment-likes.liked > .sppb-likes-icon', 'data.likes_focused_color');
		$output .= $lodash->color('color', '.sppb-likes-icon', 'data.likes_color');
		$output .= '.sppb-likes-icon {font-size: 16px; transition: color 0.3s ease;}';
		$output .= $lodash->color('color', '.sppb-comment-likes:hover .sppb-likes-text', 'data.likes_hover_color');
		$output .= $lodash->color('color', '.sppb-comment-likes:hover .sppb-likes-icon', 'data.likes_hover_color');
		$output .= $lodash->color('color', '.sppb-comment-likes:focus .sppb-likes-text', 'data.likes_focused_color');
		$output .= $lodash->color('color', '.sppb-comment-likes:focus .sppb-likes-icon', 'data.likes_focused_color');
		$output .= $lodash->textShadow('.sppb-likes-text', 'data.likes_text_shadow');

		// Reply functionality styles
		$output .= $lodash->typography('.sppb-reply-text', 'data.reply_typography', [
			'font'           => 'data.reply_font_family',
			'size'           => 'data.reply_fontsize',
			'line_height'    => 'data.reply_lineheight',
			'letter_spacing' => 'data.reply_letterspace',
			'uppercase'      => 'data.reply_font_style?.uppercase',
			'italic'         => 'data.reply_font_style?.italic',
			'underline'      => 'data.reply_font_style?.underline',
			'weight'         => 'data.reply_font_style?.weight'
		]);
		$output .= $lodash->color('color', '.sppb-reply-text', 'data.reply_color');
		$output .= $lodash->color('color', '.sppb-reply-icon', 'data.reply_color');
		$output .= '.sppb-reply-icon {font-size: 16px; transition: color 0.3s ease;}';
		$output .= $lodash->color('color', '.sppb-comment-reply-action:hover .sppb-reply-text', 'data.reply_hover_color');
		$output .= $lodash->color('color', '.sppb-comment-reply-action:hover .sppb-reply-icon', 'data.reply_hover_color');
		$output .= $lodash->textShadow('.sppb-reply-text', 'data.reply_text_shadow');

		// Icon position handling
		$output .= '<# if (data.likes_icon_position === "right") { #>';
		$output .= '.sppb-comment-likes {flex-direction: row-reverse;}';
		$output .= '<# } #>';
		$output .= '<# if (data.reply_icon_position === "right") { #>';
		$output .= '.sppb-comment-reply-action {flex-direction: row-reverse;}';
		$output .= '<# } #>';

		// Commentator name styles
		$output .= '.commentator-name-wrapper {display: flex; align-items: center;}';
		$output .= $lodash->alignment('justify-content', '.commentator-name-wrapper', 'data.commentator_name_alignment');
		
		$nameTypographyFallbacks = [
			'font'           => 'data.commentator_name_font_family',
			'size'           => 'data.commentator_name_fontsize',
			'line_height'    => 'data.commentator_name_lineheight',
			'letter_spacing' => 'data.commentator_name_letterspace',
			'uppercase'      => 'data.commentator_name_font_style?.uppercase',
			'italic'         => 'data.commentator_name_font_style?.italic',
			'underline'      => 'data.commentator_name_font_style?.underline',
			'weight'         => 'data.commentator_name_font_style?.weight'
		];
		$output .= $lodash->typography('.commentator-name', 'data.commentator_name_typography', $nameTypographyFallbacks);
		$output .= $lodash->color('color', '.commentator-name', 'data.commentator_name_color');
		$output .= $lodash->textShadow('.commentator-name', 'data.commentator_name_text_shadow');
		
		// Gravatar avatar styles
		$output .= '.sppb-comment-avatar img {transition: opacity 0.3s ease;}';
		$output .= '.sppb-comment-avatar-fallback {transition: opacity 0.3s ease;}';

		// Comment content styles
		$contentTypographyFallbacks = [
			'font'           => 'data.posted_comment_font_family',
			'size'           => 'data.posted_comment_fontsize',
			'line_height'    => 'data.posted_comment_lineheight',
			'letter_spacing' => 'data.posted_comment_letterspace',
			'uppercase'      => 'data.posted_comment_font_style?.uppercase',
			'italic'         => 'data.posted_comment_font_style?.italic',
			'underline'      => 'data.posted_comment_font_style?.underline',
			'weight'         => 'data.posted_comment_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-content-text', 'data.posted_comment_typography', $contentTypographyFallbacks);
		$output .= $lodash->color('color', '.sppb-comment-content-text', 'data.posted_comment_color');
		$output .= $lodash->textShadow('.sppb-comment-content-text', 'data.posted_comment_text_shadow');

		// Time styles
		$timeTypographyFallbacks = [
			'font'           => 'data.time_font_family',
			'size'           => 'data.time_fontsize',
			'line_height'    => 'data.time_lineheight',
			'letter_spacing' => 'data.time_letterspace',
			'uppercase'      => 'data.time_font_style?.uppercase',
			'italic'         => 'data.time_font_style?.italic',
			'underline'      => 'data.time_font_style?.underline',
			'weight'         => 'data.time_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-time', 'data.time_typography', $timeTypographyFallbacks);
		$output .= $lodash->color('color', '.sppb-comment-time', 'data.time_color');
		$output .= $lodash->textShadow('.sppb-comment-time', 'data.time_text_shadow');
		$output .= $lodash->alignment('text-align', '.sppb-comment-time-wrapper', 'data.time_alignment');

		// Edited time styles
		$editedTimeTypographyFallbacks = [
			'font'           => 'data.edited_time_font_family',
			'size'           => 'data.edited_time_fontsize',
			'line_height'    => 'data.edited_time_lineheight',
			'letter_spacing' => 'data.edited_time_letterspace',
			'uppercase'      => 'data.edited_time_font_style?.uppercase',
			'italic'         => 'data.edited_time_font_style?.italic',
			'underline'      => 'data.edited_time_font_style?.underline',
			'weight'         => 'data.edited_time_font_style?.weight'
		];
		$output .= $lodash->typography('.sppb-comment-edited-time', 'data.edited_time_typography', $editedTimeTypographyFallbacks);
		$output .= $lodash->color('color', '.sppb-comment-edited-time', 'data.edited_time_color');
		$output .= $lodash->textShadow('.sppb-comment-edited-time', 'data.edited_time_text_shadow');
		$output .= $lodash->alignment('text-align', '.sppb-comment-edited-time-wrapper', 'data.edited_time_alignment');

		// Button styles
		$output .= '.comment-submit-btn {outline: none; cursor: pointer;}';
		$buttonTypographyFallbacks = [
			'font'           => 'data.post_button_font_family',
			'size'           => 'data.post_button_fontsize',
			'line_height'    => 'data.post_button_lineheight',
			'letter_spacing' => 'data.post_button_letterspace',
			'uppercase'      => 'data.post_button_font_style?.uppercase',
			'italic'         => 'data.post_button_font_style?.italic',
			'underline'      => 'data.post_button_font_style?.underline',
			'weight'         => 'data.post_button_font_style?.weight'
		];
		$output .= $lodash->typography('.comment-submit-btn', 'data.post_button_typography', $buttonTypographyFallbacks);
		$output .= '.sppb-comment-form .sppb-comment-btn-wrapper {display: flex; padding: 16px; gap: 8px; align-items: center; border-width: 0px 1px 1px 1px; border-style: solid; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}';
		$output .= $lodash->unit('border-color', '.sppb-comment-form .sppb-comment-btn-wrapper', 'data.comment_field_border_color');
		$output .= '.sppb-comment-btn-wrapper {display: flex; align-items: center;}';
		$output .= $lodash->alignment('justify-content', '.sppb-comment-btn-wrapper', 'data.post_button_alignment');

		// Edit comment buttons styles
		$output .= '.sppb-comment-edit-buttons-wrapper {display: flex; align-items: center;}';
		$output .= $lodash->alignment('justify-content', '.sppb-comment-edit-buttons-wrapper', 'data.edit_comment_button_alignment');
		$output .= $lodash->spacing('gap', '.sppb-comment-edit-buttons-wrapper', 'data.edit_comment_button_gap');

		// Edit comment button typography
		$output .= '<# if (data.edit_comment_button_item && data.edit_comment_button_item.length > 0) { #>';
		$output .= '<# data.edit_comment_button_item.forEach(function(item, index) { #>';
		$output .= $lodash->typography('#sppb-comment-edit-button-{{index}}', 'item.edit_comment_button_typography', [
			'font'           => 'item.edit_comment_button_font_family',
			'size'           => 'item.edit_comment_button_fontsize',
			'line_height'    => 'item.edit_comment_button_lineheight',
			'letter_spacing' => 'item.edit_comment_button_letterspace',
			'uppercase'      => 'item.edit_comment_button_font_style?.uppercase',
			'italic'         => 'item.edit_comment_button_font_style?.italic',
			'underline'      => 'item.edit_comment_button_font_style?.underline',
			'weight'         => 'item.edit_comment_button_font_style?.weight'
		]);
		$output .= '<# }); #>';
		$output .= '<# } #>';

		// Post button custom size handling - ONLY apply to custom button type
		$output .= '<# if (data.post_button_size === "custom") { #>';
		$output .= $lodash->spacing('padding', '.comment-submit-btn.sppb-btn-custom', 'data.post_button_padding');
		$output .= '<# } #>';

		// Post button custom styles - ONLY apply to custom button type
		$output .= $lodash->color('color', '.comment-submit-btn.sppb-btn-custom', 'data.post_button_color');
		$output .= $lodash->color('background-color', '.comment-submit-btn.sppb-btn-custom', 'data.post_button_background_color');
		$output .= $lodash->color('color', '.comment-submit-btn.sppb-btn-custom:hover', 'data.post_button_color_hover');
		$output .= $lodash->color('background-color', '.comment-submit-btn.sppb-btn-custom:hover', 'data.post_button_background_color_hover');

		// Post button outline styles - ONLY apply to custom button type
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-outline {background-color: transparent;}';
		$output .= $lodash->unit('border-color', '.comment-submit-btn.sppb-btn-custom.sppb-btn-outline', 'data.post_button_background_color');
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-outline:hover {background-color: transparent;}';
		$output .= $lodash->unit('border-color', '.comment-submit-btn.sppb-btn-custom.sppb-btn-outline:hover', 'data.post_button_background_color_hover');

		// Post button link styles
		$output .= $lodash->color('color', '.comment-submit-btn.sppb-btn-link', 'data.post_button_link_color');
		$output .= $lodash->unit('border-color', '.comment-submit-btn.sppb-btn-link', 'data.post_button_link_border_color');
		$output .= $lodash->unit('border-width', '.comment-submit-btn.sppb-btn-link', 'data.post_button_link_border_width', '0 0 %spx 0');
		$output .= $lodash->unit('padding', '.comment-submit-btn.sppb-btn-link', 'data.post_button_link_padding_bottom', '0 0 %spx 0');
		$output .= $lodash->color('color', '.comment-submit-btn.sppb-btn-link:hover', 'data.post_button_link_hover_color');
		$output .= $lodash->unit('border-color', '.comment-submit-btn.sppb-btn-link:hover', 'data.post_button_link_border_hover_color');

		// Post button gradient styles - ONLY apply to custom button type
		$output .= '<# if (data.post_button_background_gradient) { #>';
		$output .= '<# if (typeof data.post_button_background_gradient === "string") { #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient {border: none; background-image: {{data.post_button_background_gradient}};}';
		$output .= '<# } else if (data.post_button_background_gradient.type) { #>';
		$output .= '<# let color1 = data.post_button_background_gradient.color || "#398AF1"; #>';
		$output .= '<# let color2 = data.post_button_background_gradient.color2 || "#5EDCED"; #>';
		$output .= '<# if (data.post_button_background_gradient.type === "linear") { #>';
		$output .= '<# let start = data.post_button_background_gradient.pos || 0; #>';
		$output .= '<# let end = data.post_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let deg = data.post_button_background_gradient.deg || 0; #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient {border: none; background-image: linear-gradient({{deg}}deg, {{color1}} {{start}}%, {{color2}} {{end}}%);}';
		$output .= '<# } else if (data.post_button_background_gradient.type === "radial") { #>';
		$output .= '<# let start = data.post_button_background_gradient.pos || 0; #>';
		$output .= '<# let end = data.post_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let position = data.post_button_background_gradient.radialPos || "center center"; #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient {border: none; background-image: radial-gradient(at {{position}}, {{color1}} {{start}}%, {{color2}} {{end}}%);}';
		$output .= '<# } else { #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient {border: none; background-image: {{color1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# if (data.post_button_background_gradient_hover) { #>';
		$output .= '<# if (typeof data.post_button_background_gradient_hover === "string") { #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient:hover {border: none; background-image: {{data.post_button_background_gradient_hover}};}';
		$output .= '<# } else if (data.post_button_background_gradient_hover.type) { #>';
		$output .= '<# let hoverColor1 = data.post_button_background_gradient_hover.color || "#398AF1"; #>';
		$output .= '<# let hoverColor2 = data.post_button_background_gradient_hover.color2 || "#5EDCED"; #>';
		$output .= '<# if (data.post_button_background_gradient_hover.type === "linear") { #>';
		$output .= '<# let hoverStart = data.post_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let hoverEnd = data.post_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let hoverDeg = data.post_button_background_gradient_hover.deg || 0; #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient:hover {border: none; background-image: linear-gradient({{hoverDeg}}deg, {{hoverColor1}} {{hoverStart}}%, {{hoverColor2}} {{hoverEnd}}%);}';
		$output .= '<# } else if (data.post_button_background_gradient_hover.type === "radial") { #>';
		$output .= '<# let hoverStart = data.post_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let hoverEnd = data.post_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let hoverPosition = data.post_button_background_gradient_hover.radialPos || "center center"; #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient:hover {border: none; background-image: radial-gradient(at {{hoverPosition}}, {{hoverColor1}} {{hoverStart}}%, {{hoverColor2}} {{hoverEnd}}%);}';
		$output .= '<# } else { #>';
		$output .= '.comment-submit-btn.sppb-btn-custom.sppb-btn-gradient:hover {border: none; background-image: {{hoverColor1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';

		// Button icon margin
		$output .= $lodash->spacing('margin', '.sppb-btn-icon', 'data.post_button_icon_margin');

		// Ellipsis action button styles with proper fallbacks
		$output .= $lodash->typography('.sppb-ellipsis-edit-btn, .sppb-ellipsis-delete-btn', 'data.ellipsis_action_button_typography', [
			'font'           => 'data.ellipsis_action_button_font_family',
			'size'           => 'data.ellipsis_action_button_fontsize',
			'line_height'    => 'data.ellipsis_action_button_lineheight',
			'letter_spacing' => 'data.ellipsis_action_button_letterspace',
			'uppercase'      => 'data.ellipsis_action_button_font_style?.uppercase',
			'italic'         => 'data.ellipsis_action_button_font_style?.italic',
			'underline'      => 'data.ellipsis_action_button_font_style?.underline',
			'weight'         => 'data.ellipsis_action_button_font_style?.weight'
		]);

		// Ellipsis button specific styles
		$output .= '.sppb-ellipsis-edit-btn:first-child {border-radius: 6px 6px 0 0;}';
		$output .= '.sppb-ellipsis-delete-btn:last-child {border-radius: 0 0 6px 6px;}';
		$output .= '.sppb-ellipsis-edit-btn:only-child {border-radius: 6px;}';

		// Ellipsis action button specific colors and backgrounds
		$output .= '<# if (data.ellipsis_action_button_item && data.ellipsis_action_button_item.length > 0) { #>';
		$output .= '<# data.ellipsis_action_button_item.forEach(function(item, index) { #>';
		$output .= $lodash->color('color', '.sppb-ellipsis-action-button:nth-child({{index + 1}})', 'item.ellipsis_action_button_color');
		$output .= $lodash->color('background-color', '.sppb-ellipsis-action-button:nth-child({{index + 1}})', 'item.ellipsis_action_button_background_color');
		$output .= $lodash->color('color', '.sppb-ellipsis-action-button:nth-child({{index + 1}}):hover', 'item.ellipsis_action_button_color_hover');
		$output .= $lodash->color('background-color', '.sppb-ellipsis-action-button:nth-child({{index + 1}}):hover', 'item.ellipsis_action_button_background_color_hover');
		$output .= '<# }); #>';
		$output .= '<# } #>';

		// Ellipsis action button gradient styles
		$output .= '<# if (data.ellipsis_action_button_item && data.ellipsis_action_button_item.length > 0) { #>';
		$output .= '<# data.ellipsis_action_button_item.forEach(function(item, index) { #>';
		$output .= '<# if (item.ellipsis_action_button_background_gradient) { #>';
		$output .= '<# if (typeof item.ellipsis_action_button_background_gradient === "string") { #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient {border: none; background-image: {{item.ellipsis_action_button_background_gradient}};}';
		$output .= '<# } else if (item.ellipsis_action_button_background_gradient.type) { #>';
		$output .= '<# let itemColor1 = item.ellipsis_action_button_background_gradient.color || "#398AF1"; #>';
		$output .= '<# let itemColor2 = item.ellipsis_action_button_background_gradient.color2 || "#5EDCED"; #>';
		$output .= '<# if (item.ellipsis_action_button_background_gradient.type === "linear") { #>';
		$output .= '<# let itemStart = item.ellipsis_action_button_background_gradient.pos || 0; #>';
		$output .= '<# let itemEnd = item.ellipsis_action_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let itemDeg = item.ellipsis_action_button_background_gradient.deg || 0; #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient {border: none; background-image: linear-gradient({{itemDeg}}deg, {{itemColor1}} {{itemStart}}%, {{itemColor2}} {{itemEnd}}%);}';
		$output .= '<# } else if (item.ellipsis_action_button_background_gradient.type === "radial") { #>';
		$output .= '<# let itemStart = item.ellipsis_action_button_background_gradient.pos || 0; #>';
		$output .= '<# let itemEnd = item.ellipsis_action_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let itemPosition = item.ellipsis_action_button_background_gradient.radialPos || "center center"; #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient {border: none; background-image: radial-gradient(at {{itemPosition}}, {{itemColor1}} {{itemStart}}%, {{itemColor2}} {{itemEnd}}%);}';
		$output .= '<# } else { #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient {border: none; background-image: {{itemColor1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# if (item.ellipsis_action_button_background_gradient_hover) { #>';
		$output .= '<# if (typeof item.ellipsis_action_button_background_gradient_hover === "string") { #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient:hover {border: none; background-image: {{item.ellipsis_action_button_background_gradient_hover}};}';
		$output .= '<# } else if (item.ellipsis_action_button_background_gradient_hover.type) { #>';
		$output .= '<# let itemHoverColor1 = item.ellipsis_action_button_background_gradient_hover.color || "#398AF1"; #>';
		$output .= '<# let itemHoverColor2 = item.ellipsis_action_button_background_gradient_hover.color2 || "#5EDCED"; #>';
		$output .= '<# if (item.ellipsis_action_button_background_gradient_hover.type === "linear") { #>';
		$output .= '<# let itemHoverStart = item.ellipsis_action_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let itemHoverEnd = item.ellipsis_action_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let itemHoverDeg = item.ellipsis_action_button_background_gradient_hover.deg || 0; #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient:hover {border: none; background-image: linear-gradient({{itemHoverDeg}}deg, {{itemHoverColor1}} {{itemHoverStart}}%, {{itemHoverColor2}} {{itemHoverEnd}}%);}';
		$output .= '<# } else if (item.ellipsis_action_button_background_gradient_hover.type === "radial") { #>';
		$output .= '<# let itemHoverStart = item.ellipsis_action_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let itemHoverEnd = item.ellipsis_action_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let itemHoverPosition = item.ellipsis_action_button_background_gradient_hover.radialPos || "center center"; #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient:hover {border: none; background-image: radial-gradient(at {{itemHoverPosition}}, {{itemHoverColor1}} {{itemHoverStart}}%, {{itemHoverColor2}} {{itemHoverEnd}}%);}';
		$output .= '<# } else { #>';
		$output .= '.sppb-ellipsis-action-button:nth-child({{index + 1}}).sppb-btn-gradient:hover {border: none; background-image: {{itemHoverColor1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# }); #>';
		$output .= '<# } #>';

		// Edit comment button specific colors and backgrounds
		$output .= '<# if (data.edit_comment_button_item && data.edit_comment_button_item.length > 0) { #>';
		$output .= '<# data.edit_comment_button_item.forEach(function(item, index) { #>';
		$output .= $lodash->color('color', '#sppb-comment-edit-button-{{index}}', 'item.edit_comment_button_color');
		$output .= $lodash->color('background-color', '#sppb-comment-edit-button-{{index}}', 'item.edit_comment_button_background_color');
		$output .= $lodash->color('color', '#sppb-comment-edit-button-{{index}}:hover', 'item.edit_comment_button_color_hover');
		$output .= $lodash->color('background-color', '#sppb-comment-edit-button-{{index}}:hover', 'item.edit_comment_button_background_color_hover');
		$output .= $lodash->color('background-color', '#sppb-comment-edit-button-{{index}}.sppb-btn-outline', 'item.edit_comment_button_background_color');
		$output .= $lodash->unit('border-color', '#sppb-comment-edit-button-{{index}}.sppb-btn-outline', 'item.edit_comment_button_background_color');
		$output .= $lodash->color('background-color', '#sppb-comment-edit-button-{{index}}.sppb-btn-outline:hover', 'item.edit_comment_button_background_color_hover');
		$output .= $lodash->unit('border-color', '#sppb-comment-edit-button-{{index}}.sppb-btn-outline:hover', 'item.edit_comment_button_background_color_hover');
		$output .= '<# }); #>';
		$output .= '<# } #>';

		// Edit comment button gradient styles
		$output .= '<# if (data.edit_comment_button_item && data.edit_comment_button_item.length > 0) { #>';
		$output .= '<# data.edit_comment_button_item.forEach(function(item, index) { #>';
		$output .= '<# if (item.edit_comment_button_background_gradient) { #>';
		$output .= '<# if (typeof item.edit_comment_button_background_gradient === "string") { #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient {border: none; background-image: {{item.edit_comment_button_background_gradient}};}';
		$output .= '<# } else if (item.edit_comment_button_background_gradient.type) { #>';
		$output .= '<# let editColor1 = item.edit_comment_button_background_gradient.color || "#398AF1"; #>';
		$output .= '<# let editColor2 = item.edit_comment_button_background_gradient.color2 || "#5EDCED"; #>';
		$output .= '<# if (item.edit_comment_button_background_gradient.type === "linear") { #>';
		$output .= '<# let editStart = item.edit_comment_button_background_gradient.pos || 0; #>';
		$output .= '<# let editEnd = item.edit_comment_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let editDeg = item.edit_comment_button_background_gradient.deg || 0; #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient {border: none; background-image: linear-gradient({{editDeg}}deg, {{editColor1}} {{editStart}}%, {{editColor2}} {{editEnd}}%);}';
		$output .= '<# } else if (item.edit_comment_button_background_gradient.type === "radial") { #>';
		$output .= '<# let editStart = item.edit_comment_button_background_gradient.pos || 0; #>';
		$output .= '<# let editEnd = item.edit_comment_button_background_gradient.pos2 || 100; #>';
		$output .= '<# let editPosition = item.edit_comment_button_background_gradient.radialPos || "center center"; #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient {border: none; background-image: radial-gradient(at {{editPosition}}, {{editColor1}} {{editStart}}%, {{editColor2}} {{editEnd}}%);}';
		$output .= '<# } else { #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient {border: none; background-image: {{editColor1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# if (item.edit_comment_button_background_gradient_hover) { #>';
		$output .= '<# if (typeof item.edit_comment_button_background_gradient_hover === "string") { #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient:hover {border: none; background-image: {{item.edit_comment_button_background_gradient_hover}};}';
		$output .= '<# } else if (item.edit_comment_button_background_gradient_hover.type) { #>';
		$output .= '<# let editHoverColor1 = item.edit_comment_button_background_gradient_hover.color || "#398AF1"; #>';
		$output .= '<# let editHoverColor2 = item.edit_comment_button_background_gradient_hover.color2 || "#5EDCED"; #>';
		$output .= '<# if (item.edit_comment_button_background_gradient_hover.type === "linear") { #>';
		$output .= '<# let editHoverStart = item.edit_comment_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let editHoverEnd = item.edit_comment_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let editHoverDeg = item.edit_comment_button_background_gradient_hover.deg || 0; #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient:hover {border: none; background-image: linear-gradient({{editHoverDeg}}deg, {{editHoverColor1}} {{editHoverStart}}%, {{editHoverColor2}} {{editHoverEnd}}%);}';
		$output .= '<# } else if (item.edit_comment_button_background_gradient_hover.type === "radial") { #>';
		$output .= '<# let editHoverStart = item.edit_comment_button_background_gradient_hover.pos || 0; #>';
		$output .= '<# let editHoverEnd = item.edit_comment_button_background_gradient_hover.pos2 || 100; #>';
		$output .= '<# let editHoverPosition = item.edit_comment_button_background_gradient_hover.radialPos || "center center"; #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient:hover {border: none; background-image: radial-gradient(at {{editHoverPosition}}, {{editHoverColor1}} {{editHoverStart}}%, {{editHoverColor2}} {{editHoverEnd}}%);}';
		$output .= '<# } else { #>';
		$output .= '#sppb-comment-edit-button-{{index}}.sppb-btn-gradient:hover {border: none; background-image: {{editHoverColor1}};}';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# } #>';
		$output .= '<# }); #>';
		$output .= '<# } #>';

		// Ellipsis action positioning and margins
		$output .= $lodash->spacing('margin', '.sppb-comment-ellipsis-action', 'data.ellipsis_margin');
		$output .= $lodash->alignment('justify-content', '.sppb-comment-ellipsis-action', 'data.ellipsis_position');

		// Ellipsis action outline button styles
		$output .= '.sppb-comment-ellipsis-action.sppb-btn-custom.sppb-btn-outline {background-color: transparent; border-color: transparent;}';
		$output .= '.sppb-comment-ellipsis-action.sppb-btn-custom.sppb-btn-outline i {background-color: transparent; border-color: transparent;}';

		// Comment header left positioning
		$output .= $lodash->alignment('justify-content', '.sppb-comment-header-left', 'data.commentator_name_position');
		$output .= '.sppb-comment-header-left {flex: 1;}';

		$output .= $lodash->unit('height', '.sppb-comment-field', 'data.comment_field_height', 'px');

		// Comment field hover and focus states
		$output .= $lodash->color('background-color', '.sppb-comment-field:hover', 'data.comment_field_background_hover_color');
		$output .= $lodash->color('color', '.sppb-comment-field:hover::placeholder', 'data.comment_field_placeholder_hover_color');
		$output .= $lodash->unit('border-color', '.sppb-comment-field:focus', 'data.comment_field_border_focus_color');

		// Comment form button wrapper border styles
		$output .= $lodash->unit('border-color', '.sppb-comment-form .sppb-comment-btn-wrapper', 'data.comment_field_border_color');

		$output .= '</style>';
		
		// HTML Structure
		$output .= '<div class="sppb-addon sppb-addon-comment {{ data.class }}">';
		
		// Title wrapper
		$output .= '<div class="sppb-comment-title-wrapper">';
		$output .= '<# if (data.comment_count && data.comment_count_position === "left") { #>';
		$output .= '<span class="sppb-comment-count">(5)</span>';
		$output .= '<# } #>';
		$output .= '<span class="sppb-comment-title-text">{{ data.title_text || "Comments" }}</span>';
		$output .= '<# if (data.comment_count && data.comment_count_position === "right") { #>';
		$output .= '<span class="sppb-comment-count">(5)</span>';
		$output .= '<# } #>';
		$output .= '</div>';

		// Label wrapper
		$output .= '<# if (data.enable_label) { #>';
		$output .= '<div class="sppb-comment-label-wrapper">';
		$output .= '<span class="sppb-comment-label-text">{{ data.label_text || "Leave a comment" }}</span>';
		$output .= '</div>';
		$output .= '<# } #>';

		// Comment form
		$output .= '<form class="sppb-comment-form">';
		$output .= '<textarea class="sppb-comment-field" name="comment" placeholder="{{ data.comment_field_placeholder || \'Share your thoughts...\' }}"></textarea>';
		$output .= '<div class="sppb-comment-btn-wrapper">';
		$output .= '<button type="submit" class="comment-submit-btn sppb-btn {{ data.post_button_type ? \'sppb-btn-\' + data.post_button_type : \'sppb-btn-default\' }} {{ data.post_button_block || \'\' }} {{ data.post_button_shape ? \'sppb-btn-\' + data.post_button_shape : \'sppb-btn-rounded\' }} {{ data.post_button_appearance ? \'sppb-btn-\' + data.post_button_appearance : \'\' }} {{ data.post_button_size ? \'sppb-btn-\' + data.post_button_size : \'sppb-btn-md\' }}">';
		$output .= '<# if (data.post_button_icon && data.post_button_icon_position === "left") { #>';
		$output .= '<i class="sppb-btn-icon {{ data.post_button_icon }}"></i>';
		$output .= '<# } #>';
		$output .= '<span>{{ data.post_button_text || "Leave a comment" }}</span>';
		$output .= '<# if (data.post_button_icon && data.post_button_icon_position === "right") { #>';
		$output .= '<i class="sppb-btn-icon {{ data.post_button_icon }}"></i>';
		$output .= '<# } #>';
		$output .= '</button>';
		$output .= '</div>';
		$output .= '</form>';

		// Comments list
		$output .= '<div class="sppb-comments-list" style="margin-top: 40px;">';

		$output .=  '<# function getTextColor(color) {
			const r = parseInt(color.substr(1, 2), 16);
			const g = parseInt(color.substr(3, 2), 16);
			const b = parseInt(color.substr(5, 2), 16);
		
			const brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
		
			return (brightness > 128) ? "#000000" : "#FFFFFF";
		} #>';
	
		$personAvatarColor = '{{data?.commentator_avatar_color || "#4285F4"}}';
		$personAvatarColorValue = 'data?.commentator_avatar_color || "#4285F4"';
		$output .= '<# let persontextColor = getTextColor(' . $personAvatarColorValue . ') #>';
		
		// Static comment 1
		$output .= '<div data-comment-id="1" data-parent-id="" class="sppb-comment-item sppb-comment-item sppb-parent-comment sppb-root-comment" style="margin-top: -4px; margin-left: 0px;">';
		$output .= '<div class="sppb-comment-thread-line" style="left:-34px;"></div>';
		$output .= '<div class="sppb-comment-thread-connector" style="left:-34px; width: 55px;"></div>';
		$output .= '<div class="sppb-comment-content">';
		$output .= '<div class="sppb-comment-header sppb-comment-header">';
		$output .= '<div class="sppb-comment-avatar" style="background-color: ' . $personAvatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 600; margin-right: 10px; color: {{persontextColor}}">';
		$output .= '<span>SL</span>';
		$output .= '</div>';
		$output .= '<div class="sppb-comment-header-left">';
		$output .= '<div class="commentator-name-wrapper">';
		$output .= '<span class="commentator-name">Sofia Lindstrom</span>';
		$output .= '</div>';
		$output .= '<# if (data.enable_time) { #>';
		$output .= '<div class="sppb-comment-time-wrapper">';
		$output .= '<span class="sppb-comment-time">' . Text::sprintf('COM_SPPAGEBUILDER_HOURS_AGO', 2) . '</span>';
		$output .= '<# if (data.show_edited_time) { #>';
		$output .= '<span class="sppb-comment-edited-time"> • Edited ' . Text::sprintf('COM_SPPAGEBUILDER_HOUR_AGO', 1) . '</span>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '<div class="sppb-comment-ellipsis-action sppb-btn sppb-btn-custom sppb-btn-rounded sppb-btn-md">';
		$output .= '<i class="sppb-ellipsis-icon fa fa-ellipsis-v"></i>';
		$output .= '<div class="sppb-ellipsis-dropdown" style="display: none;">';
		$output .= '<div class="sppb-comment-ellipsis-action-buttons-wrapper">';
		$output .= '<button style="width: 100%; text-align: left;" class="sppb-comment-ellipsis-action-button sppb-btn sppb-btn-md sppb-btn-rounded sppb-ellipsis-edit-btn" data-comment-id="1">Edit</button>';
		$output .= '<button style="width: 100%; text-align: left;" class="sppb-comment-ellipsis-action-button sppb-btn sppb-btn-md sppb-btn-rounded sppb-ellipsis-delete-btn" data-comment-id="1">Delete</button>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '<div class="sppb-comment-content sppb-comment-body" data-comment-id="1" style="margin-left: 55px; padding-bottom: 29px;">';
		$output .= '<div class="sppb-comment-body-thread-line"></div>';
		$output .= '<span class="sppb-comment-content-text" style="margin-left: 10px; margin-top: 20px; display: inline-block;">';
		$output .= '<span>This is a great article, Jane! I really enjoyed reading it. Expecting more insightful writings from you.</span>';
		$output .= '</span>';
		$output .= '<div class="sppb-comment-edit-form sppb-comment-form" data-comment-id="1" style="display: none;">';
		$output .= '<textarea type="text" class="sppb-comment-edit-input sppb-comment-field" data-comment-id="1">This is a great article, Jane! I really enjoyed reading it. Expecting more insightful writings from you.</textarea>';
		$output .= '<div class="sppb-comment-edit-buttons-wrapper sppb-comment-btn-wrapper">';
		$output .= '<button class="sppb-comment-edit-button sppb-comment-edit-cancel-btn sppb-btn sppb-btn-md sppb-btn-rounded" data-comment-id="1">' . Text::_('COM_SPPAGEBUILDER_CANCEL') . '</button>';
		$output .= '<button class="sppb-comment-edit-button sppb-comment-edit-submit-btn sppb-btn sppb-btn-md sppb-btn-rounded" data-comment-id="1">' . Text::_('COM_SPPAGEBUILDER_UPDATE') . '</button>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '<# if (data.enable_likes || data.enable_reply) { #>';
		$output .= '<div class="sppb-comment-actions" style="margin-left: 10px">';
		$output .= '<# if (data.enable_likes) { #>';
		$output .= '<div class="sppb-comment-likes">';
		$output .= '<i class="sppb-likes-icon fa fa-heart"></i>';
		$output .= '<span class="sppb-likes-text">3 ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '</span>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '<# if (data.enable_reply) { #>';
		$output .= '<div class="sppb-comment-reply-action" data-comment-id="1">';
		$output .= '<i class="sppb-reply-icon fa fa-reply"></i>';
		$output .= '<span class="sppb-reply-text">2 ' . Text::_('COM_SPPAGEBUILDER_REPLY') . '</span>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '<div class="sppb-comment-reply-form sppb-comment-form" data-comment-id="1" style="display: none;">';
		$output .= '<textarea type="text" class="sppb-comment-reply-input sppb-comment-field" data-comment-id="1" placeholder="' . Text::_('COM_SPPAGEBUILDER_WRITE_A_REPLY') . '"></textarea>';
		$output .= '<div class="sppb-comment-btn-wrapper">';
		
		$output .= '<button class="sppb-comment-reply-cancel-btn sppb-btn sppb-btn-default sppb-btn-rounded sppb-btn-md" data-comment-id="1">' . Text::_('COM_SPPAGEBUILDER_CANCEL') . '</button>';
		$output .= '<button class="sppb-comment-reply-submit-btn comment-submit-btn {{ data.post_button_type ? \'sppb-btn-\' + data.post_button_type : \'sppb-btn-default\' }} {{ data.post_button_block || \'\' }} {{ data.post_button_shape ? \'sppb-btn-\' + data.post_button_shape : \'sppb-btn-rounded\' }} {{ data.post_button_appearance ? \'sppb-btn-\' + data.post_button_appearance : \'\' }} {{ data.post_button_size ? \'sppb-btn-\' + data.post_button_size : \'sppb-btn-md\' }}" data-comment-id="1">' . Text::_('COM_SPPAGEBUILDER_SUBMIT') . '</button>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		
		// Reply to comment 1
		$output .= '<div class="sppb-comment-children-wrapper">';
		$output .= '<div data-comment-id="2" data-parent-id="1" class="sppb-comment-item sppb-comment-item" style="margin-top: -4px; margin-left: 55px;">';
		$output .= '<div class="sppb-comment-thread-line" style="left:-34px;"></div>';
		$output .= '<div class="sppb-comment-thread-connector" style="left:-34px; width: 55px;"></div>';
		$output .= '<div class="sppb-comment-content" style="margin-left: 0; margin-top: 11px;">';
		$output .= '<div class="sppb-comment-header sppb-comment-header">';
		
		// Static Gravatar implementation
		$replyPersonAvatarColor = '{{data?.commentator_avatar_color || "#4285F4"}}';
		$replyPersonAvatarColorValue = 'data?.commentator_avatar_color || "#4285F4"';
		$output .= '<# let replyPersonTextColor = getTextColor(' . $replyPersonAvatarColorValue . ') #>';
		$avatarUrl = Uri::root() . 'components/com_sppagebuilder/assets/images/user_comment_placeholder.jpg';
		
		$output .= '<# if (' . $enableGravatar . ') { #>';
		$output .= '<div class="sppb-comment-avatar" style="border-radius: 50%; width: 45px; height: 45px; margin-right: 10px; overflow: hidden; flex-shrink: 0;">';
		$output .= '<img src="' . $avatarUrl . '" alt="Jane Doe" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.style.display=\'none\'; this.nextElementSibling.style.display=\'flex\';" />';
		$output .= '<div class="sppb-comment-avatar-fallback" style="background-color: ' . $replyPersonAvatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: none; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: {{replyPersonTextColor}}">';
		$output .= '<span>JD</span>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '<# } else { #>';
		$output .= '<div class="sppb-comment-avatar" style="background-color: ' . $replyPersonAvatarColor . '; padding: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; font-weight: 600; margin-right: 10px; color: {{replyPersonTextColor}}">';
		$output .= '<span>JD</span>';
		$output .= '</div>';
		$output .= '<# } #>';
		
		$output .= '<div class="sppb-comment-header-left">';
		$output .= '<div class="commentator-name-wrapper">';
		$output .= '<span class="commentator-name">Jane Doe</span>';
		$output .= '</div>';
		$output .= '<# if (data.enable_time) { #>';
		$output .= '<div class="sppb-comment-time-wrapper">';
		$output .= '<span class="sppb-comment-time">' . Text::sprintf('COM_SPPAGEBUILDER_HOUR_AGO', 1) . '</span>';
		$output .= '<# if (data.show_edited_time) { #>';
		$output .= '<span class="sppb-comment-edited-time"> • Edited ' . Text::sprintf('COM_SPPAGEBUILDER_MINUTE_AGO', 30) . '</span>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '<div class="sppb-comment-content sppb-comment-body" data-comment-id="2" style="margin-left: 55px; padding-bottom: 29px;">';
		$output .= '<div class="sppb-comment-body-thread-line"></div>';
		$output .= '<span class="sppb-comment-content-text" style="margin-left: 10px; margin-top: 20px; display: inline-block;">';
		$output .= '<span>Thanks, Sofia! Stay tuned for more updates.</span>';
		$output .= '</span>';
		$output .= '<# if (data.enable_likes || data.enable_reply) { #>';
		$output .= '<div class="sppb-comment-actions" style="margin-left: 10px">';
		$output .= '<# if (data.enable_likes) { #>';
		$output .= '<div class="sppb-comment-likes">';
		$output .= '<i class="sppb-likes-icon fa fa-heart"></i>';
		$output .= '<span class="sppb-likes-text">1 ' . Text::_('COM_SPPAGEBUILDER_LIKES') . '</span>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '<# if (data.enable_reply) { #>';
		$output .= '<div class="sppb-comment-reply-action" data-comment-id="2">';
		$output .= '<i class="sppb-reply-icon fa fa-reply"></i>';
		$output .= '<span class="sppb-reply-text">0 ' . Text::_('COM_SPPAGEBUILDER_REPLY') . '</span>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '<# } #>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';

		
		$output .= '</div>';
		$output .= '</div>';

		// Add JavaScript for template functionality
		$js = '';
		$js .= 'jQuery(document).ready(function($) {';
		
		// Handle Gravatar image loading and fallback
		$js .= 'const handleGravatarImages = () => {';
		$js .= 'const gravatarImages = document.querySelectorAll(\'.sppb-comment-avatar img[src*="gravatar.com"]\');';
		$js .= 'gravatarImages.forEach(img => {';
		$js .= 'img.addEventListener(\'error\', function() {';
		$js .= 'this.style.display = \'none\';';
		$js .= 'const fallback = this.nextElementSibling;';
		$js .= 'if (fallback && fallback.classList.contains(\'sppb-comment-avatar-fallback\')) {';
		$js .= 'fallback.style.display = \'flex\';';
		$js .= '}';
		$js .= '});';
		$js .= 'img.addEventListener(\'load\', function() {';
		$js .= 'const fallback = this.nextElementSibling;';
		$js .= 'if (fallback && fallback.classList.contains(\'sppb-comment-avatar-fallback\')) {';
		$js .= 'fallback.style.display = \'none\';';
		$js .= '}';
		$js .= '});';
		$js .= '});';
		$js .= '};';
		$js .= 'handleGravatarImages();';

		// Ellipsis menu functionality
		$js .= '$(".sppb-comment-ellipsis-action").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'e.stopPropagation();';
		$js .= 'var dropdown = $(this).find(".sppb-ellipsis-dropdown");';
		$js .= '$(".sppb-ellipsis-dropdown").not(dropdown).hide();';
		$js .= 'dropdown.toggle();';
		$js .= '});';
		
		// Close dropdown when clicking outside
		$js .= '$(document).on("click", function(e) {';
		$js .= 'if (!$(e.target).closest(".sppb-comment-ellipsis-action").length) {';
		$js .= '$(".sppb-ellipsis-dropdown").hide();';
		$js .= '}';
		$js .= '});';
		
		// Edit button functionality
		$js .= '$(".sppb-ellipsis-edit-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'e.stopPropagation();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'var contentText = commentContent.find(".sppb-comment-content-text span").text();';
		$js .= 'var editForm = commentContent.find(".sppb-comment-edit-form");';
		$js .= 'var editInput = editForm.find(".sppb-comment-edit-input");';
		$js .= 'editInput.val(contentText);';
		$js .= 'commentContent.find(".sppb-comment-content-text").hide();';
		$js .= 'editForm.show();';
		$js .= '$(".sppb-ellipsis-dropdown").hide();';
		$js .= '});';
		
		// Delete button functionality (just close dropdown)
		$js .= '$(".sppb-ellipsis-delete-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'e.stopPropagation();';
		$js .= '$(".sppb-ellipsis-dropdown").hide();';
		$js .= '});';
		
		// Edit form cancel button
		$js .= '$(".sppb-comment-edit-cancel-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'commentContent.find(".sppb-comment-edit-form").hide();';
		$js .= 'commentContent.find(".sppb-comment-content-text").show();';
		$js .= '});';
		
		// Edit form update button (non-functional, just close form)
		$js .= '$(".sppb-comment-edit-submit-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'commentContent.find(".sppb-comment-edit-form").hide();';
		$js .= 'commentContent.find(".sppb-comment-content-text").show();';
		$js .= '});';
		
		// Reply action functionality
		$js .= '$(".sppb-comment-reply-action").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'var replyForm = commentContent.find(".sppb-comment-reply-form");';
		$js .= 'replyForm.toggle();';
		$js .= '});';
		
		// Reply form cancel button
		$js .= '$(".sppb-comment-reply-cancel-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'commentContent.find(".sppb-comment-reply-form").hide();';
		$js .= '});';
		
		// Reply form submit button (non-functional, just close form)
		$js .= '$(".sppb-comment-reply-submit-btn").on("click", function(e) {';
		$js .= 'e.preventDefault();';
		$js .= 'var commentId = $(this).data("comment-id");';
		$js .= 'var commentContent = $(".sppb-comment-content[data-comment-id=\'" + commentId + "\']");';
		$js .= 'commentContent.find(".sppb-comment-reply-form").hide();';
		$js .= 'commentContent.find(".sppb-comment-reply-input").val("");';
		$js .= '});';
		
		$js .= '});';
		$js .= '';

		Factory::getDocument()->addScriptDeclaration($js);

		return $output;
	}

	private function renderLoginModal() {
		$shouldShowLoginModal = empty(Factory::getUser()->id) && empty($this->addon->settings->enable_anonymous_comment);
		
		$output = '';
		$output .= '<div class="sppb-login-modal-overlay"></div>';
		$output .= '<div id="sppb-login-modal" class="sppb-login-modal" style="display: none;">';
		$output .= '<div class="sppb-login-modal-content">';
		$output .= '<div class="sppb-login-modal-header">';
		$output .= '<div style="display: flex; justify-content: end;">';
		$output .= '<button type="button" class="sppb-login-modal-close"><span>&times;</span></button>';
		$output .= '</div>';
		$output .= '<h3>' . Text::_('COM_SPPAGEBUILDER_LOGIN_REQUIRED') . '</h3>';
		$output .= '</div>';
		$output .= '<div class="sppb-login-modal-body">';
		$output .= '<div id="sppb-login-form-container">';
		$output .= '<p>' . Text::_('COM_SPPAGEBUILDER_LOADING_LOGIN_FORM') . '</p>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		$output .= '</div>';
		
		// Add JavaScript to fetch the login form
		$js = '
		document.addEventListener("DOMContentLoaded", function() {
			// Fetch login form when modal is opened
			$(document).on("keyup", ".sppb-comment-field", function(e) {
				' . ($shouldShowLoginModal ? '$("#sppb-login-modal").show();' : '') . '
				' . ($shouldShowLoginModal ? '$(".sppb-login-modal-overlay").show();' : '') . '
				' . ($shouldShowLoginModal ? '$("#sppb-login-modal input[name=\'username\']").focus();' : '') . '
			});
			// $(document).on("click", ".sppb-login-required", function(e) {
				// e.preventDefault();
				fetchLoginForm();
				$(".sppb-login-modal-overlay").hide();
			// });
			
			// Close modal
			$(document).on("click", ".sppb-login-modal-close", function() {
				$("#sppb-login-modal").hide();
				$(".sppb-login-modal-overlay").hide();
			});
			
			// Handle form submission
			// $(document).on("submit", "#sppb-login-form-container form", function(e) {
			// 	e.preventDefault();
			// 	const form = $(this);
			// 	const formData = new FormData(this);
				
			// 	// Add return URL for redirect after login
			// 	const returnUrl = "' . base64_encode(\Joomla\CMS\Uri\Uri::current()) . '";
			// 	formData.append("return", returnUrl);
				
			// 	// Submit form via AJAX
			// 	$.ajax({
			// 		url: form.attr("action"),
			// 		type: "POST",
			// 		data: formData,
			// 		processData: false,
			// 		contentType: false,
			// 		success: function(response) {
			// 			if (response.success) {
			// 				// Login successful, reload page
			// 				window.location.reload();
			// 			} else {
			// 				// Show error message
			// 				alert(response.message || "Login failed. Please try again.");
			// 			}
			// 		},
			// 		error: function() {
			// 			alert("Login failed. Please try again.");
			// 		}
			// 	});
			// });
		});
		
		function fetchLoginForm() {
			const container = document.getElementById("sppb-login-form-container");
			container.innerHTML = "<p>' . Text::_('COM_SPPAGEBUILDER_LOADING_LOGIN_FORM') . '</p>";
			
			// Fetch the login form from Joomla\'s default login view
			fetch("' . \Joomla\CMS\Uri\Uri::root() . 'index.php?option=com_users&view=login&tmpl=component&layout=default", {
				method: "GET",
				headers: {
					"X-Requested-With": "XMLHttpRequest"
				}
			})
			.then(response => response.text())
			.then(html => {
				// Extract the form from the response
				const parser = new DOMParser();
				const doc = parser.parseFromString(html, "text/html");
				const form = doc.querySelector("form");
				
				if (form) {
					// Update form action to use component template
					form.action = "' . \Joomla\CMS\Uri\Uri::root() . 'index.php?option=com_users&task=user.login&tmpl=component";
					
					// Add return URL
					const returnInput = form.querySelector("input[name=\'return\']");
					if (returnInput) {
						returnInput.value = "' . base64_encode(\Joomla\CMS\Uri\Uri::getInstance()->toString()) . '";
					}
					
					// Replace the container content with the actual form
					container.innerHTML = "";
					container.appendChild(form);
					
					// Initialize Joomla form validation if available
					if (typeof Joomla !== "undefined" && Joomla.formvalidator) {
						Joomla.formvalidator.init(form);
					}
				} else {
					container.innerHTML = "<p>' . Text::_('COM_SPPAGEBUILDER_ERROR_LOADING_LOGIN_FORM') . '</p>";
				}
			})
			.catch(error => {
				console.error("Error fetching login form:", error);
				container.innerHTML = "<p>' . Text::_('COM_SPPAGEBUILDER_ERROR_LOADING_LOGIN_FORM') . '</p>";
			});
		}';
		
		Factory::getDocument()->addScriptDeclaration($js);
		
		return $output;
	}
}