<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'Мой сайт' ?></title>
    <meta name="description" content="<?= $description ?? 'Описание сайта' ?>">
    <link rel="stylesheet" href="/css/layout.css">
    <link rel="stylesheet" href="/css/global.css">
    <?php if (isset($contentStyle)): ?>
        <link rel="stylesheet" href="<?= $contentStyle ?>">
    <?php endif; ?>
</head>
<body>
    <header class="header">
		<!-- Flash-сообщения -->
		<?php if (isset($_SESSION['flash_message'])): ?>
			<div class="flash-message flash-<?= $_SESSION['flash_type'] ?? 'info' ?>">
				<?php 
					echo htmlspecialchars($_SESSION['flash_message']);
					unset($_SESSION['flash_message']);
					unset($_SESSION['flash_type']);
				?>
			</div>
		<?php endif; ?>
		<div class="page-width">
			<div class="header-content">
				<div class="header_menu-btn" id="menuToggle">☰</div>
				<img class="header_icon" src="/images/icon-100-f.png" alt="Логотип">
				<div class="header_title">vexaiv</div>
			</div>
		</div>
	</header>

	<div class="mobile-overlay" id="mobileOverlay"></div>
	
    <div class="scroller">
        <div class="page-width">
            <aside class="left" id="leftPanel">
                <a class="btn" href="/">
                    <img src="/favicon.ico" alt="🏠" style="height: 1em; vertical-align: top;"> 
                    Главная
                </a>
                <a class="btn" href="/files">📁 Файлы</a>
				<a class="btn" href="/articles">📄 Статьи</a>
            </aside>

            <div class="center">
                <main class="main">
                    <?= empty($content) ? 'Страница не найдена' : $content ?>
                </main>

				<?php if (isset($header)): ?>
					<aside class="actions">
						<?php if (isset($header['left'])): ?>
							<?php foreach ($header['left'] as $item): ?>
								<?php echo $item; ?>
							<?php endforeach; ?>
						<?php endif; ?>
						<?php if (isset($header['right'])): ?>
							<div class="actions-right">
								<?php foreach ($header['right'] as $item): ?>
									<?php echo $item; ?>
								<?php endforeach; ?>
							</div>
						<?php endif; ?>
					<?php endif; ?>
                </aside>
            </div>
        </div>
    </div>

    <script>
        const menuToggle = document.getElementById('menuToggle');
        const leftPanel = document.getElementById('leftPanel');
        const overlay = document.getElementById('mobileOverlay');
        
        function toggleMenu() {
            leftPanel.classList.toggle('mobile-open');
            overlay.classList.toggle('active');
            
            if (leftPanel.classList.contains('mobile-open')) {
                leftPanel.scrollTop = 0;
            }
        }
        
        function closeMenu() {
            leftPanel.classList.remove('mobile-open');
            overlay.classList.remove('active');
        }
        
        menuToggle.addEventListener('click', (e) => {
            e.stopPropagation();
            toggleMenu();
        });
        
        overlay.addEventListener('click', () => {
            closeMenu();
        });
        
        document.querySelector('.scroller').addEventListener('click', (e) => {
            if (leftPanel.classList.contains('mobile-open')) {
                if (!leftPanel.contains(e.target) && e.target !== menuToggle && !menuToggle.contains(e.target)) {
                    closeMenu();
                }
            }
        });
        
        window.addEventListener('resize', () => {
            if (window.innerWidth >= 768) {
                closeMenu();
            }
        });
		
		window.addEventListener('pageshow', function(event) {
            closeMenu();
        });
    </script>
 	<script>
		// Скрипт для обработки нажатий на кнопки класса copy-code-btn в шаблоне code_block.php
		document.addEventListener('DOMContentLoaded', function() {
			document.querySelectorAll('.copy-code-btn').forEach(button => {
				// Храним таймер для этой кнопки
				let timeoutId = null;
				button.addEventListener('click', function(e) {
					// Обработка нажатия для копирования текста
					e.preventDefault();
					const codeId = this.dataset.codeId;
					const code = document.getElementById(codeId)?.textContent;
					
					if (!code) return;
					
					// Отменяем предыдущий таймер, если он был
					if (timeoutId) {
						clearTimeout(timeoutId);
						timeoutId = null;
					}
					
					if (navigator.clipboard && window.isSecureContext) {
						navigator.clipboard.writeText(code).then(() => {
							this.innerHTML = '✅ Скопировано!';
						}).catch((err) => {
							this.innerHTML = '❌ Ошибка';
							console.log("Ошибка копирования navigator.clipboard: ", err);
						});
					} else {
						console.log("Fallback копирование без navigator.clipboard");
						const textarea = document.createElement('textarea');
						textarea.value = code;
						textarea.style.position = 'fixed';
						textarea.style.opacity = '0';
						document.body.appendChild(textarea);
						textarea.select();
						
						try {
							document.execCommand('copy');
							this.innerHTML = '✅ Скопировано!';
						} catch (err) {
							this.innerHTML = '❌ Ошибка';
							console.log("Ошибка fallback-копирования: ", err);
						} finally {
							document.body.removeChild(textarea);
						}
					}
					// Запускаем таймер на восстановление кнопки
					timeoutId = setTimeout(() => {
						this.innerHTML = '📋 Копировать';
						timeoutId = null;
					}, 2000);
				});
			});
		});
	</script>
	<script>
		// скрипт открытия изображений из шаблона image_block.php
		document.addEventListener('DOMContentLoaded', function() {
			// Создаём оверлей один раз
			const overlay = document.createElement('div');
			overlay.className = 'fullscreen-overlay';
			
			const closeBtn = document.createElement('button');
			closeBtn.innerHTML = '✕';
			closeBtn.className = 'close-fullscreen';
			
			const overlayImg = document.createElement('img');
			overlayImg.alt = 'Fullscreen image';
			
			overlay.appendChild(closeBtn);
			overlay.appendChild(overlayImg);
			document.body.appendChild(overlay);
			
			// Функция закрытия
			function closeFullscreen() {
				overlay.classList.remove('active');
				setTimeout(() => {
					if (!overlay.classList.contains('active')) {
						overlayImg.src = '';
					}
				}, 300);
			}
			
			// Закрытие по клику на крестик или фон
			closeBtn.addEventListener('click', closeFullscreen);
			overlay.addEventListener('click', function(e) {
				if (e.target === overlay) {
					closeFullscreen();
				}
			});
			
			// Закрытие по Escape
			document.addEventListener('keydown', function(e) {
				if (e.key === 'Escape' && overlay.classList.contains('active')) {
					closeFullscreen();
				}
			});
			
			// Функция открытия изображения
			function openFullscreen(imageSrc) {
				overlayImg.src = imageSrc;
				overlay.classList.add('active');
			}
			
			// Обработчик для кнопок
			document.querySelectorAll('.fullscreen-img-btn').forEach(function(btn) {
				btn.addEventListener('click', function(e) {
					e.stopPropagation();
					const imgSrc = btn.getAttribute('data-img-src');
					if (imgSrc) {
						openFullscreen(imgSrc);
					}
				});
			});
			
			// Обработчик для изображений
			document.querySelectorAll('.clickable-img').forEach(function(img) {
				img.addEventListener('click', function() {
					const imgSrc = img.getAttribute('data-fullscreen-img');
					if (imgSrc) {
						openFullscreen(imgSrc);
					}
				});
			});
		});
	</script>
    
    <?php flush_console_log(); ?>

</body>
</html>
