{if $display_comments==1}

{* ===================================================================== *}
{* ПРОВЕРКА ПРАВ НА ЧТЕНИЕ *}
{* ===================================================================== *}
{if $no_read_permission == 1}
	<div class="alert alert-warning" role="alert">{#COMMENT_READ_FALSE#}</div>

{else}
	{* ===================================================================== *}
	{* БЛОК КОММЕНТАРИЕВ *}
	{* ===================================================================== *}

	<h3 class="mb-3">
		{#COMMENT_SITE_TITLE#}
		{if $closed==1 && $smarty.const.UGROUP!=1}
			<span class="badge bg-secondary ms-2">{#COMMENT_SITE_CLOSED#}</span>
		{/if}
	</h3>

	<div class="d-flex mb-4 align-items-center">
		<a href="#end" class="btn btn-sm btn-outline-primary">
			<i class="bi bi-plus-circle me-1"></i> {#COMMENT_SITE_ADD#}
		</a>

		{if $smarty.const.UGROUP==1}
			{if $closed==1}
				<a id="mod_comment_open" href="javascript:void(0);" class="btn btn-sm btn-outline-success ms-3">
					<i class="bi bi-lock-fill me-1"></i> {#COMMENT_SITE_OPEN#}
				</a>
			{else}
				<a id="mod_comment_close" href="javascript:void(0);" class="btn btn-sm btn-outline-danger ms-3">
					<i class="bi bi-unlock-fill me-1"></i> {#COMMENT_SITE_CLOSE#}
				</a>
			{/if}
		{/if}
	</div>

{if isset($comments[0])}
    <div class="comments-list" id="comments_list">
        {* Добавляем parentId=0, чтобы кнопка знала, к какой группе относятся ответы *}
        {include file="$subtpl" subcomments=$comments[0] parentId=0}
    </div>
{/if}

	<a id="end"></a>

	{* ===================================================================== *}
	{* ФОРМА ДОБАВЛЕНИЯ КОММЕНТАРИЯ *}
	{* ===================================================================== *}
	<div class="mt-5">
	{if $closed==1 && $smarty.const.UGROUP!=1}
		<div class="alert alert-info">{#COMMENT_NEW_CLOSED#}</div>
	{elseif $cancomment!=1 && $smarty.const.UGROUP!=1}
		<div class="alert alert-info">{#COMMENT_NEW_FALSE#}</div>
	{else}
		<div id="mod_comment_new" class="card shadow-sm">
			<div class="card-header bg-light">
				<h4 class="mb-0">{#COMMENT_NEW_TITLE#}</h4>
			</div>

			<div class="card-body p-4" id="forms">
				<form method="post" action="{$ABS_PATH}" enctype="multipart/form-data">
					
					<fieldset>
						<legend class="d-none">{#COMMENT_FORM_ADD_COMM#}</legend>

						{if $smarty.session.user_group != '2'}
							<div class="row mb-3">
								<div class="col-md-6 mb-3 mb-md-0">
									<label for="in_author_name_display" class="form-label">{#COMMENT_YOUR_NAME#}</label>
									<input type="text" id="in_author_name_display" class="form-control" value="{$smarty.session.user_name|default:''|escape|stripslashes}" readonly />
								</div>
								<div class="col-md-6">
									<label for="in_author_email_display" class="form-label">{#COMMENT_YOUR_EMAIL#}</label>
									<input type="email" id="in_author_email_display" class="form-control" value="{$smarty.session.user_email|default:''|escape|stripslashes}" readonly />
								</div>
							</div>
							<input name="comment_author_name" type="hidden" id="in_author_name" value="{$smarty.session.user_name|default:''|escape|stripslashes}" />
							<input name="comment_author_email" type="hidden" id="in_author_email" value="{$smarty.session.user_email|default:''|escape|stripslashes}" />
{else}
    {* Блок для Анонимных пользователей (Гостей) *}
    <div class="row mb-3">
        <div class="col-md-6 mb-3 mb-md-0">
            <label for="in_author_name" class="form-label">{#COMMENT_YOUR_NAME#}*</label>
            <input name="comment_author_name" type="text" id="in_author_name" class="form-control" 
                   placeholder="{#COMMENT_YOUR_NAME#}" 
                   value="{(isset($saved_anon.name)) ? $saved_anon.name : ($smarty.request.comment_author_name|default:''|escape|stripslashes)}" 
                   {if isset($saved_anon.exists) && $saved_anon.exists}readonly style="background-color: #f8f9fa;"{/if} />
            
            {if isset($saved_anon.exists) && $saved_anon.exists}
                <div class="form-text small text-muted">{#COMMENT_FIX_NAME_ANON#}</div>
            {/if}
        </div>
        <div class="col-md-6">
            <label for="in_author_email" class="form-label">{#COMMENT_YOUR_EMAIL#}*</label>
            <input name="comment_author_email" type="email" id="in_author_email" class="form-control" 
                   placeholder="{#COMMENT_YOUR_EMAIL#}" 
                   value="{(isset($saved_anon.email)) ? $saved_anon.email : ($smarty.request.comment_author_email|default:''|escape|stripslashes)}" 
                   {if isset($saved_anon.exists) && $saved_anon.exists}readonly style="background-color: #f8f9fa;"{/if} />
        </div>
    </div>
{/if}
						
						<div class="row mb-3">
							{if $comment_show_f1 == 1}
							<div class="col-md-6 mb-3 mb-md-0">
								<label for="in_author_website" class="form-label">
									{$comment_name_f1|default:#COMMENT_YOUR_SITE#} {if $comment_req_f1 == 1}*{else}{#COMMENT_FIELD_OPTIONAL#}{/if}
								</label>
								<input name="comment_author_website" type="text" id="in_author_website" class="form-control" placeholder="{$comment_name_f1|default:#COMMENT_YOUR_SITE#}" value="{$smarty.request.comment_author_website|default:''|escape|stripslashes}" />
							</div>
							{/if}

							{if $comment_show_f2 == 1}
							<div class="col-md-6">
								<label for="in_author_city" class="form-label">
									{$comment_name_f2|default:#COMMENT_YOUR_FROM#} {if $comment_req_f2 == 1}*{else}{#COMMENT_FIELD_OPTIONAL#}{/if}
								</label>
								<input name="comment_author_city" type="text" id="in_author_city" class="form-control" placeholder="{$comment_name_f2|default:#COMMENT_YOUR_FROM#}" value="{$smarty.request.comment_author_city|default:''|escape|stripslashes}" />
							</div>
							{/if}
						</div>
					
						<div class="mb-3">
							<label for="in_message" class="form-label">{#COMMENT_YOUR_TEXT#}*</label>
							<textarea rows="8" name="comment_text" id="in_message" class="form-control" placeholder="{#COMMENT_YOUR_TEXT#}"></textarea>
						</div>

						{* --- ВЫБОР РЕЙТИНГА --- *}
						{if $comment_show_user_rating == 1}
							{if $smarty.session.user_group != '2' || $comment_rating_anon_set == 1}
							<div class="mb-3" id="rating_wrapper">
								<label class="form-label d-block small fw-bold text-muted text-uppercase mb-1">{#COMMENT_RATING_TITEL#}</label>
								<div class="d-flex align-items-center">
									<div id="user_rating_stars" class="fs-4" style="color: #ffc107; display: inline-block;">
										<i class="star-choice bi bi-star" data-value="1" title="Ужасно" style="cursor: pointer;"></i>
										<i class="star-choice bi bi-star" data-value="2" title="Плохо" style="cursor: pointer;"></i>
										<i class="star-choice bi bi-star" data-value="3" title="Нормально" style="cursor: pointer;"></i>
										<i class="star-choice bi bi-star" data-value="4" title="Хорошо" style="cursor: pointer;"></i>
										<i class="star-choice bi bi-star" data-value="5" title="Отлично" style="cursor: pointer;"></i>
									</div>
									<a href="javascript:void(0);" id="reset_stars" class="ms-3 text-decoration-none small text-muted" title="{#COMMENT_DEL_VOTE_TITEL#}">
										<i class="bi bi-x-circle"></i> {#COMMENT_DEL_VOTE_RESET#}
									</a>
								</div>
								<input name="comment_user_rating" type="hidden" id="comment_user_rating" value="0" />
							</div>
							{/if}
						{/if}

						<p class="text-end text-muted small">
							{#COMMENT_CHARS_LEFT#} <span class="charsLeft fw-bold" id="charsLeft_new"></span>
						</p>

{if $comment_allow_files == 1}
    {if $smarty.session.user_group != '2' || $comment_allow_files_anon == 1}
    <div class="mb-3">
        <label for="comment_image" class="form-label mb-1">
            <span class="text-muted small"><i class="bi bi-paperclip me-1"></i> {#COMMENT_ADD_FILES#}</span>
        </label>
        
        <div class="small text-muted mb-2">
            {#COMMENT_ADD_FILES_ALLOW#} <span class="fw-bold">{$comment_allowed_extensions|default:'jpg, png, gif, webp'}</span>. 
            {#COMMENT_ADD_FILES_MAX_SIZE#} <span class="fw-bold">{$comment_max_file_size|default:'2048'} {#COMMENT_ADD_FILES_SIZE#}</span>.
            {* ЛИМИТ КОЛИЧЕСТВА *}
            {#COMMENT_ADD_FILES_MAX_COUNT#} <span class="fw-bold text-primary">{$comment_max_files|default:'5'} {#COMMENT_ADD_FILES_COUNT_PIC#}</span>
        </div>

        <input type="file" name="comment_image[]" id="comment_image" class="form-control form-control-sm" multiple>
        
        <div id="image_preview_wrapper" class="mt-2 d-flex flex-wrap gap-2 d-none">
            {* Сюда JS будет добавлять превью *}
        </div>
        
        <div id="upload_progress_container" class="mt-2 d-none">
            <div class="progress" style="height: 8px;">
                <div id="upload_progress_bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
            </div>
        </div>
        <div id="file_error" class="text-danger small mt-1 d-none"></div>
    </div>
    {/if}
{/if}

{if $im}
    <div class="row mb-3 align-items-center">
        <div class="col-md-4">
            <label for="securecode" class="form-label">{#COMMENT_FORM_CODE#}</label>
            <div id="captcha_block">
                <span id="captcha" class="d-block mb-1">
                    <img src="{$ABS_PATH}inc/captcha.php" alt="{#COMMENT_FORM_CODE#}" class="img-fluid border rounded" style="cursor: pointer;" width="120" height="60" border="0" />
                </span>
                <a href="javascript:void(0);" id="reload_captcha" class="small text-decoration-none text-muted"><i class="bi bi-arrow-clockwise"></i> {#COMMENT_CAPTCHA_UPD#}</a>
            </div>
        </div>
        <div class="col-md-8">
            <label for="securecode" class="form-label">{#COMMENT_FORM_CODE_ENTER#}*</label>
            <input name="securecode" type="text" id="securecode" maxlength="10" class="form-control" placeholder="{#COMMENT_FORM_CODE_ENTER#}" />
            <div id="captcha_error_msg"></div>
        </div>
    </div>
{/if}

						<div class="mt-4">
							<button type="submit" class="btn btn-success me-2">
								<i class="bi bi-send-fill me-1"></i> {#COMMENT_BUTTON_ADD#}
							</button>
							<button type="reset" id="buttonReset" class="btn btn-secondary">
								<i class="bi bi-x-circle me-1"></i> {#COMMENT_BUTTON_RES#}
							</button>
						</div>

						<input name="module" type="hidden" value="comment" />
						<input name="action" type="hidden" value="comment" />
						<input name="sub" type="hidden" value="send" />
						<input name="doc_id" type="hidden" value="{$smarty.request.id|escape}" />
						<input name="parent_id" id="parent_id" type="hidden" value="" />
						<input name="page" type="hidden" value="{$page}" />
					</fieldset>
				</form>
			</div>
		</div>
	{/if}
	</div>

	{if $page_nav}
		<div class="page_navigation_box mt-4">
			<nav aria-label="Comment Page Navigation">{$page_nav}</nav>
		</div>
	{/if}

{* Модальное окно удаления *}
<div class="modal fade" id="deleteCommentModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered"> 
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">{#COMMENT_MOD_DEL_CONFIRM#}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                {#COMMENT_MOD_DEL_CONFIRM_A#}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{#COMMENT_MOD_DEL_CANCEL#}</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">{#COMMENT_MOD_DEL_DEL#}</button>
            </div>
        </div>
    </div>
</div>

	<script type="text/javascript">
	var COMMENT_SITE_CLOSE = '{#COMMENT_SITE_CLOSE#}';
	var COMMENT_SITE_OPEN = '{#COMMENT_SITE_OPEN#}';
	var COMMENT_LOCK_LINK = '{#COMMENT_LOCK_LINK#}';
	var COMMENT_EDIT_LINK = '{#COMMENT_EDIT_LINK#}';
	var COMMENT_EDIT_TITLE = '{#COMMENT_EDIT_TITLE#}';
	var COMMENT_UNLOCK_LINK = '{#COMMENT_UNLOCK_LINK#}';
	var COMMENT_ERROR_AUTHOR = '{#COMMENT_ERROR_AUTHOR#}';
	var COMMENT_ERROR_EMAIL = '{#COMMENT_ERROR_EMAIL#}';
	var COMMENT_ERROR_TEXT = '{#COMMENT_ERROR_TEXT#}';
	var COMMENT_ERROR_CAPTCHA = '{#COMMENT_ERROR_CAPTCHA#}';
	var COMMENT_BUTTON_EDIT = '{#COMMENT_BUTTON_EDIT#}';
	var COMMENT_BUTTON_CANCEL = '{#COMMENT_BUTTON_CANCEL#}';
	var COMMENT_CHARS_LEFT = '{#COMMENT_CHARS_LEFT#}';
	var COMMENT_DATE_TIME_FORMAT = '{#COMMENT_DATE_TIME_FORMAT#}';
	var COMMENT_TEXT_CHANGED = '{#COMMENT_TEXT_CHANGED#}';
	var COMMENT_WRONG_CODE = '{#COMMENT_WRONG_CODE#}';
	var COMMENT_JS_TIMER_OFF = '{#COMMENT_JS_TIMER_OFF#}';
	var COMMENT_JS_TIMER_OFF_A = '{#COMMENT_JS_TIMER_OFF_A#}';
	var COMMENT_JS_FILE_TYPE   = '{#COMMENT_JS_FILE_TYPE#}';
	var COMMENT_JS_FILE_TYPE_A   = '{#COMMENT_JS_FILE_TYPE_A#}';
	var COMMENT_JS_FILE_SIZE     = '{#COMMENT_JS_FILE_SIZE#}';
	var COMMENT_JS_FILE_SIZE_KB  = '{#COMMENT_JS_FILE_SIZE_KB#}';
	var COMMENT_JS_FILE_SIZE_MAX = '{#COMMENT_JS_FILE_SIZE_MAX#}';
    var COMMENT_JS_CHECK_NAME    = '{#COMMENT_JS_CHECK_NAME#}';
    var COMMENT_JS_CHECK_EMAIL   = '{#COMMENT_JS_CHECK_EMAIL#}';
    var COMMENT_JS_FILL          = '{#COMMENT_JS_FILL#}';
    var COMMENT_JS_ADD_COMMENT_TEXT = '{#COMMENT_JS_ADD_COMMENT_TEXT#}';
    var COMMENT_ICON_SHOW        = '{#COMMENT_ICON_SHOW#}';
    var COMMENT_ICON_HIDE        = '{#COMMENT_ICON_HIDE#}';
    var COMMENT_MOD_DEL_DEL      = '{#COMMENT_MOD_DEL_DEL#}';
    var COMMENT_JS_THX           = '{#COMMENT_JS_THX#}';
    var COMMENT_JS_VOTE_A        = '{#COMMENT_JS_VOTE_A#}';
    var COMMENT_JS_VOTE_B        = '{#COMMENT_JS_VOTE_B#}';
    var COMMENT_JS_VOTE_C        = '{#COMMENT_JS_VOTE_C#}';
    var COMMENT_JS_VOTE_ERR      = '{#COMMENT_JS_VOTE_ERR#}'; 
    var COMMENT_JS_VOTE_ERR_A    = '{#COMMENT_JS_VOTE_ERR_A#}';  
    var COMMENT_JS_DELDEL_CONFIRM = '{#COMMENT_JS_DELDEL_CONFIRM#}';
    var COMMENT_JS_RATING_ST_EDIT = '{#COMMENT_JS_RATING_ST_EDIT#}';
    var COMMENT_JS_RATING_ST_EDIT_A = '{#COMMENT_JS_RATING_ST_EDIT_A#}';
    var COMMENT_JS_LOADED_FILES  = '{#COMMENT_JS_LOADED_FILES#}';
    var COMMENT_JS_ADD_NEW_FILES = '{#COMMENT_JS_ADD_NEW_FILES#}';
    var COMMENT_JS_EDIT_BUT_SAVE = '{#COMMENT_JS_EDIT_BUT_SAVE#}';    
    var COMMENT_JS_EDIT_BUT_CANCEL = '{#COMMENT_JS_EDIT_BUT_CANCEL#}';
    var COMMENT_JS_EDIT_BUT_LEFT = '{#COMMENT_JS_EDIT_BUT_LEFT#}';
    var COMMENT_JS_LIMIT_AB      = '{#COMMENT_JS_LIMIT_AB#}';
    var COMMENT_JS_LIMIT_ABC     = '{#COMMENT_JS_LIMIT_ABC#}';
    var COMMENT_JS_LIMIT_ABCD    = '{#COMMENT_JS_LIMIT_ABCD#}';
    var COMMENT_JS_LIMIT_ABCDE   = '{#COMMENT_JS_LIMIT_ABCDE#}';
    var COMMENT_JS_LOADS_F       = '{#COMMENT_JS_LOADS_F#}';
    var COMMENT_JS_LOADS_R       = '{#COMMENT_JS_LOADS_R#}';
    var COMMENT_JS_SEC_CODE_WRONG = '{#COMMENT_JS_SEC_CODE_WRONG#}';
    var COMMENT_JS_ERR_SRV       = '{#COMMENT_JS_ERR_SRV#}';       
    var COMMENT_WAITING_MODERATION = '{#COMMENT_WAITING_MODERATION#}';
	
	var REQ_F1 = '{$comment_req_f1}';
	var REQ_F2 = '{$comment_req_f2}';
	var NAME_F1 = '{$comment_name_f1|default:#COMMENT_YOUR_SITE#}';
	var NAME_F2 = '{$comment_name_f2|default:#COMMENT_YOUR_FROM#}';

	var UGROUP = '{$smarty.const.UGROUP}';
	var IS_IM = '{$im}';
	var DOC_ID = '{$doc_id}';
	var MAX_CHARS = '{$comment_max_chars}';
	var aveabspath = '{$ABS_PATH}';

	var SHOW_USER_RATING = '{$comment_show_user_rating|default:0}';
	var SHOW_USER_RATING_REPLIES = '{$comment_show_user_rating_replies|default:0}';
	var RATING_ANON_SET = '{$comment_rating_anon_set|default:0}';
	var ALLOW_FILES_ANON = '{$comment_allow_files_anon|default:0}';
	// --- ПЕРЕМЕННЫЕ ДЛЯ ВАЛИДАЦИИ ФАЙЛОВ ---
    var ALLOWED_EXTENSIONS = '{$comment_allowed_extensions|default:"jpg,jpeg,png,gif,webp"}';
    var MAX_FILE_SIZE_KB = '{$comment_max_file_size|default:2048}';
    var MAX_FILES_COUNT = '{$comment_max_files|default:5}';
    var ALLOW_FILES = '{$comment_allow_files|default:0}';
	</script>
	<script src="{$ABS_PATH}modules/comment/js/comment.js" type="text/javascript"></script>

	{literal}
    <script type="text/javascript">
    function loadMoreReplies(parentId) {
        const loader = document.getElementById('ajax_loader_' + parentId);
        if (!loader) return;

        const originalContent = loader.innerHTML;
        loader.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div> Загрузка...';

        const separator = window.location.href.indexOf('?') !== -1 ? '&' : '?';
        const url = window.location.href + separator + 'ajax_load_branch=' + parentId;

        fetch(url)
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                const newBranch = doc.getElementById('comment_wrapper_' + parentId);
                const currentBranch = document.getElementById('comment_wrapper_' + parentId);

                if (newBranch && currentBranch) {
                    currentBranch.innerHTML = newBranch.innerHTML;
                    if (loader) loader.remove();

                    // Инициализация тултипов Bootstrap после обновления DOM
                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
                        const tooltipTriggerList = [].slice.call(currentBranch.querySelectorAll('[data-bs-toggle="tooltip"]'));
                        tooltipTriggerList.map(t => new bootstrap.Tooltip(t));
                    }
                }
            })
            .catch(err => {
                console.error('AJAX Error:', err);
                loader.innerHTML = originalContent;
                alert('Не удалось подгрузить ответы.');
            });
    }
    </script>
    {/literal}

{/if}
{/if}