{if $access['modules.update'] || $user.name == 'Demo profile'}
	{if isset($error_message) && $error_message}
		<div class="col-12">
			<div class="alert alert-danger">{$error_message}</div>
		</div>
	{/if}
	{block name="content"}
	<form method="post" action="/admin?action=page_edit">
		<div class="row">
			<div class="col-12">
				<ul class="nav nav-tabs mb-2" id="myTab" role="tablist">
					<li class="nav-item" role="presentation">
					<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Основная информация</button>
					</li>
					<li class="nav-item" role="presentation">
					<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">SEO</button>
					</li>
				</ul>
				<div class="tab-content" id="myTabContent">
					<div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
						<div class="row">
							<div class="col-2">
								<fieldset class="form-icon-group left-icon position-relative">
									<input type="datetime-local" class="form-control mt-2 mb-2" name="date" id="date" value="{$page.date}">
									<div class="form-icon position-absolute">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
											<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
										</svg>
									</div>
								</fieldset>
							</div>
							<div class="col-4">
								<div class="input-group">
									<input type="text" name="title" id="title" class="form-control mt-2 mb-2" placeholder="Заголовок страницы" value="{$page.title}">
									<div class="input-group-prepend">
									<span class="input-group-text mt-2 mb-2" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Название страницы. Допустимо использование символов и пробелов">?</span>
									</div>
								</div>
							</div>
							<div class="col-4">
								<fieldset class="form-icon-group left-icon position-relative">
									<input type="text" class="form-control mt-2 mb-2" name="alt_name" id="alt_name" placeholder="ЧПУ URL страницы" value="{$page.alt_name}">
									<div class="form-icon position-absolute">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
											<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
											<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
										</svg>
									</div>
								</fieldset>
							</div>
							<div class="col-2">
								<select class="form-select array-select form-control mt-2 mb-2" name="language[]" id="language">
									<option selected disabled>- Выберите язык -</option>
									{foreach from=$available_languages item=language}
										<option value="{$language}" {if in_array($language, $selectedLanguages)}selected{/if}>{$language|capitalize}</option>
									{/foreach}
								</select>	
							</div>
						</div>
					</div>
					<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
						<div class="row">
							<div class="col-12">
								<fieldset class="form-icon-group left-icon position-relative">
									<input type="text" class="form-control mt-2 mb-2" name="meta_keys" id="meta_keys" value="{$page.meta_keys}">
									<div class="form-icon position-absolute">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
											<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
											<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
										</svg>
									</div>
								</fieldset>
							</div>
							<div class="col-12">
								<fieldset class="form-icon-group left-icon position-relative">
									<input type="text" class="form-control mt-2 mb-2" name="meta_desc" id="meta_desc" value="{$page.meta_desc}">
									<div class="form-icon position-absolute">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
											<path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
											<path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
										</svg>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-12">
				<h6 class="mt-2">Описание страницы:</h6>
				{*<div style="position: relative; margin-bottom: 20px;">
					<span class="tooltips" id="username-tooltip">
       					 Что бы использовать виджет напишите в описании { payment-widget } и выберите нужный вам виджет внизу
    				</span>
				</div>*}
				<textarea id="full_desc" name="full_desc">  {if !empty($page.full_meta_desc) } {$page.full_meta_desc} {else} {$page.full_desc} {/if}</textarea>
			</div>

	{*		<div>
				<!-- Чекбокс -->
				<div style="display: inline-block;">
					<label for="show-select-widget">Выбрать виджет</label>
				</div>
				<div style="display: inline-block;">
					<input
							id="show-select-widget"
							type="checkbox"
							{if !empty($oldWidgetId) } checked {/if}
							class="form-check large-checkbox"
							name="show_select_widget"
							onchange="toggleSelect()">
				</div>

				<!-- Скрытые элементы -->
				<div id="widget-container" style="display: none; margin-top: 10px;">
					<label for="select-widget">Выбрать виджет для страницы</label>
					<select style="width: 60%" class="form-control" id="select-widget" name="selected_widget">
						{foreach $p_widgets as $widget }
							<option {if !empty($oldWidgetId) && $oldWidgetId == $widget.id } selected {/if} value="{$widget.id}">{$widget.name}</option>
						{/foreach}
					</select>
					<br>
				</div>
			</div>*}

			<style>
				input[type="checkbox"] {
					vertical-align: middle; /* Центрирует относительно текста */
					margin: 0 5px; /* Добавляет отступ между чекбоксом и текстом */
				}

				.tooltips {
					display: block; /* Подсказка всегда видна, можно изменить на none для скрытия */
					margin-top: 4px; /* Расстояние от label */
					font-size: 14px; /* Размер текста подсказки */
					color: #666; /* Цвет текста */
					padding: 6px 10px; /* Отступы внутри подсказки */
					border-radius: 4px; /* Скругленные углы */
					box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Тень */
					max-width: 60%; /* Ограничение ширины */
					line-height: 1.4; /* Межстрочный интервал */
				}

				/* Стили для адаптивности */
				@media (max-width: 600px) {
					.tooltips {
						font-size: 12px;
						padding: 4px 8px;
					}
				}

			</style>
			{*<script>
				debugger;
				let oldWidget = '{$oldWidgetId}';
				if (oldWidget) {
					toggleSelect();
				}

				// Функция переключения видимости
				function toggleSelect() {
					const checkbox = document.getElementById('show-select-widget');
					const widgetContainer = document.getElementById('widget-container');

					if (checkbox.checked) {
						widgetContainer.style.display = 'block';
					} else {
						widgetContainer.style.display = 'none';
					}
				}
			</script>*}

			<div class="col-3">
				<button type="submit" name="addpage" class="btn btn-success mt-2 mb-2" id="submitButton">Сохранить</button>
			</div>
			<input type="hidden" name="folder" id="folder" value="pages">
			<input type="hidden" name="p_id" id="p_id" value="{$page_id}">
			<input type="hidden" name="page_id" value="{$page.id}">
		</div>
	</form>
	{/block}
	<script>
		var contentSection = document.getElementById('contentSection');
		contentSection.classList.add('active');
		var contentBlock = document.getElementById('contentBlock');
		contentBlock.classList.add('show');
		var currentLink = document.getElementById('addPages');
		currentLink.classList.add('active');
	</script>
{/if}