<?php
// templates/article.php
$contentStyle = '/css/article.css';
$mode = $_GET['mode'] ?? $mode ?? 'view';
$isEditMode = $mode === 'edit';
$isNew = $isNew ?? false;
?>

<!-- Единая форма для обоих режимов -->
<form class="article-panel" id="formId" method="POST" action="/articles.save/<?= htmlspecialchars($article['slug']) ?>">
	<!-- Заголовок: в режиме редактирования - input, в просмотре - текст -->
	<?php if ($isEditMode || $isNew): ?>
		<div>Заголовок:</div>
		<input type="text" 
			   name="title" 
			   id="title"
			   class="article-title-input" 
			   value="<?= htmlspecialchars($article['title'] ?? '') ?>"
			   placeholder="Заголовок статьи"
			   required>
	<?php else: ?>
		<h1 class="article-title"><?= htmlspecialchars($article['title'] ?? '') ?></h1>
	<?php endif; ?>
	
	<!-- Единое текстовое поле для обоих режимов -->
	<?php if ($isEditMode || $isNew): ?>
		<div>Содержание:</div>
		<textarea name="content" 
				  id="content" 
				  class="article-content-textarea" 
				  placeholder="Введите текст статьи..."
				  required><?= htmlspecialchars($article['raw_content'] ?? '') ?></textarea>
		
		<div>Поддерживается Markdown-подобная разметка:<br>
			<ol>
				# Заголовок 1<br>
				## Заголовок 2<br>
				**жирный**<br>
				*курсив*<br>
				- пункт списка<br>
				[ссылка](url)<br>
				![изображение](url)<br>
				> цитата<br>
				`код`<br>
				```блок кода```<br>
				--- горизонтальная линия<br>
			</ol>
		</div>
	<?php else: ?>
		<div class="article-content">
			<?= textToHtml($article['raw_content']) ?? '' ?>
		</div>
	<?php endif; ?>
</form>

<script>
// Отключаем прокрутку у всех textarea
document.querySelectorAll('textarea').forEach(textarea => {
	textarea.style.overflow = 'hidden';
	
	// Включаем прокрутку только при фокусе (клик или Tab)
	textarea.addEventListener('focus', function onFocus() {
		this.style.overflow = 'auto';
	});
	
	// Отключаем при потере фокуса
	textarea.addEventListener('blur', function onBlur() {
		this.style.overflow = 'hidden';
		this.scrollTop = 0; // Сбрасываем позицию прокрутки
	});
});
</script>

<script>
// Функция для экранирования HTML
function escapeHtml(text) {
	const div = document.createElement('div');
	div.textContent = text;
	return div.innerHTML;
}
</script>

