<?php
/**
 * @var string $locale
 * @var Johncms\System\Users\User $user
 * @var Johncms\Counters $counters
 * @var Johncms\Ads $ads
 */

$counters = $container->get('counters');
$notifications = $counters->notifications();
$analytics = $counters->counters();
$ads = di(Johncms\Ads::class);
$ads_array = $ads->getAds();

// Отримуємо лічильники для сайдбару
$forum_counters = $counters->forumCounters();
$guestbook_counters = $counters->guestbookCounters();
$downloads_counters = $counters->downloadsCounters();
$library_counters = $counters->libraryCounters();
$users_counters = $counters->usersCounters();
$album_counters = $counters->albumCounters();
$news_counters = $counters->news();
?>
<!DOCTYPE html>
<html lang="<?= $locale ?>" dir="<?= $locale === 'ar' ? 'rtl' : 'ltr' ?>">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="width">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="Generator" content="JohnCMS, https://johncms.com">
    <?= $this->section('meta', '') ?>
    <?php if (! empty($keywords)): ?>
        <meta name="keywords" content="<?= $this->e($keywords) ?>">
    <?php endif ?>
    <?php if (! empty($description)): ?>
        <meta name="description" content="<?= $this->e($description) ?>">
    <?php endif ?>
    <?php if (! empty($canonical)): ?>
        <link rel="canonical" href="<?= $canonical ?>">
    <?php endif ?>
    <meta name="theme-color" content="#6366f1">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        },
                        gray: {
                            50: '#f8fafc',
                            100: '#f1f5f9',
                            200: '#e2e8f0',
                            300: '#cbd5e1',
                            400: '#94a3b8',
                            500: '#64748b',
                            600: '#475569',
                            700: '#334155',
                            800: '#1e293b',
                            900: '#0f172a',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-in-out',
                        'slide-in-left': 'slideInLeft 0.3s ease-out',
                        'bounce-subtle': 'bounceSubtle 2s infinite',
                        'pulse-slow': 'pulseSlow 2s ease-in-out infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideInLeft: {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(0)' },
                        },
                        bounceSubtle: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-2px)' },
                        },
                        pulseSlow: {
                            '0%, 100%': { opacity: '1', transform: 'scale(1)' },
                            '50%': { opacity: '0.8', transform: 'scale(1.05)' },
                        }
                    }
                }
            }
        }
    </script>
    
    <?php if($locale === 'ar'): ?>
        <link rel="stylesheet" href="<?= $this->asset('css/app.rtl.css', true) ?>">
    <?php else: ?>
        <link rel="stylesheet" href="<?= $this->asset('css/app.css', true) ?>">
        <link rel="stylesheet" href="<?= $this->asset('css/tailwind.css', true) ?>">
    <?php endif; ?>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap">
    <link rel="shortcut icon" href="<?= $this->asset('images/favicon.ico') ?>">
    <?= $this->section('styles', '') ?>
    <link rel="alternate" type="application/rss+xml" title="RSS News" href="<?= $config['homeurl'] ?>/rss/">
    <title><?= (isset($title) ? $this->e($title) : $config['copyright']) ?></title>

    <style>
        
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-['Inter']">
<div class="min-h-screen flex flex-col" id="app">
    <!-- Main Layout -->
    <div class="flex flex-1">
        <!-- Fixed Sidebar for Desktop -->
        <div class="hidden lg:block">
            <div class="w-80 bg-white shadow-lg border-r border-gray-200 h-screen sticky top-0 overflow-y-auto">
                <div class="p-6 h-full flex flex-col">
                    <!-- Logo -->
                    <div class="mb-8">
                        <a href="/" class="block hover-lift group">
                            <div class="bg-gradient-to-br from-primary-500 to-purple-600 p-4 rounded-2xl shadow-lg shadow-primary-500/25 border border-white/20">
                                <img src="<?= $this->asset('images/logo.svg') ?>" alt="JohnCMS" class="w-full brightness-0 invert drop-shadow-lg">
                            </div>
                            <div class="mt-3 text-center">
                                <span class="text-lg font-bold gradient-text">JohnCMS</span>
                                <span class="text-xs text-gray-500 block"><?= CMS_VERSION ?></span>
                            </div>
                        </a>
                    </div>
                    
                    <!-- User Menu -->
                    <div class="mb-6">
                        <?= $this->section('sidebar-user', $this->fetch('system::app/sidebar-user-menu', ['notifications' => $notifications])) ?>
                    </div>

                    <!-- Main Menu -->
                    <div class="flex-1">
                        <!-- Ads Before Menu -->
                        <?php if (! empty($ads_array['before_menu'])): ?>
                            <div class="mb-6 space-y-3">
                                <?php foreach ($ads_array['before_menu'] as $item): ?>
                                    <div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-lg p-4 rounded-2xl border border-white/20 shadow-lg">
                                        <?= $item ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>

                        <!-- Navigation Menu -->
                        <nav class="space-y-2">
                            <!-- News -->
                            <a href="/news/" class="sidebar-menu-item menu-news">
                                <div class="sidebar-menu-icon icon-news">
                                    <svg class="sidebar-menu-svg svg-news" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                                    </svg>
                                </div>
                                <span class="flex-1"><?= d__('system', 'News archive') ?></span>
                                <?php if ($news_counters['new'] > 0): ?>
                                    <span class="sidebar-badge">+ <?= $news_counters['new'] ?></span>
                                <?php endif ?>
                            </a>

                            <!-- Forum -->
                            <?php if ($config['mod_forum'] || $user->rights >= 7): ?>
                                <a href="/forum/" class="sidebar-menu-item menu-forum">
                                    <div class="sidebar-menu-icon icon-forum">
                                        <svg class="sidebar-menu-svg svg-forum" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                                        </svg>
                                    </div>
                                    <span class="flex-1"><?= d__('system', 'Forum') ?></span>
                                    <?php if ($forum_counters['new_messages'] > 0): ?>
                                        <span class="sidebar-badge">+ <?= $forum_counters['new_messages'] ?></span>
                                    <?php endif; ?>
                                </a>
                            <?php endif ?>

                            <!-- Guestbook -->
                            <?php if ($config['mod_guest'] || $user->rights >= 7): ?>
                                <a href="/guestbook/" class="sidebar-menu-item menu-guestbook">
                                    <div class="sidebar-menu-icon icon-guestbook">
                                        <svg class="sidebar-menu-svg svg-guestbook" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                                        </svg>
                                    </div>
                                    <span class="flex-1"><?= d__('system', 'Guestbook') ?></span>
                                    <?php if ($guestbook_counters['guestbook'] > 0): ?>
                                        <span class="sidebar-badge">+ <?= $guestbook_counters['guestbook'] ?></span>
                                    <?php endif ?>
                                </a>
                            <?php endif ?>

                            <!-- Downloads -->
                            <?php if ($config['mod_down'] || $user->rights >= 7): ?>
                                <a href="/downloads/" class="sidebar-menu-item menu-downloads">
                                    <div class="sidebar-menu-icon icon-downloads">
                                        <svg class="sidebar-menu-svg svg-downloads" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                        </svg>
                                    </div>
                                    <span class="flex-1"><?= d__('system', 'Downloads') ?></span>
                                    <?php if ($downloads_counters['new'] > 0): ?>
                                        <span class="sidebar-badge"><?= $downloads_counters['new'] ?></span>
                                    <?php endif ?>
                                </a>
                            <?php endif ?>

                            <!-- Library -->
                            <?php if ($config['mod_lib'] || $user->rights >= 7): ?>
                                <a href="/library/" class="sidebar-menu-item menu-library">
                                    <div class="sidebar-menu-icon icon-library">
                                        <svg class="sidebar-menu-svg svg-library" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                        </svg>
                                    </div>
                                    <span class="flex-1"><?= d__('system', 'Library') ?></span>
                                    <?php if ($library_counters['new'] > 0): ?>
                                        <span class="sidebar-badge">+ <?= $library_counters['new'] ?></span>
                                    <?php endif ?>
                                </a>
                            <?php endif ?>

                            <!-- Users -->
                            <a href="/community/" class="sidebar-menu-item menu-users">
                                <div class="sidebar-menu-icon icon-users">
                                    <svg class="sidebar-menu-svg svg-users" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                                    </svg>
                                </div>
                                <span class="flex-1"><?= d__('system', 'Users') ?></span>
                                <?php if ($users_counters['new'] > 0): ?>
                                    <span class="sidebar-badge">+ <?= $users_counters['new'] ?></span>
                                <?php endif ?>
                            </a>

                            <!-- Photo Albums -->
                            <a href="/album/" class="sidebar-menu-item menu-albums">
                                <div class="sidebar-menu-icon icon-albums">
                                    <svg class="sidebar-menu-svg svg-albums" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                </div>
                                <span class="flex-1"><?= d__('system', 'Photo Albums') ?></span>
                                <?php if ($album_counters['new'] > 0): ?>
                                    <span class="sidebar-badge">+ <?= $album_counters['new'] ?></span>
                                <?php endif ?>
                            </a>

                            <!-- Information, FAQ -->
                            <a href="/help/" class="sidebar-menu-item menu-help">
                                <div class="sidebar-menu-icon icon-help">
                                    <svg class="sidebar-menu-svg svg-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <span class="flex-1"><?= d__('system', 'Information, FAQ') ?></span>
                            </a>

                            <!-- Admin Section -->
                            <?php if ($user->rights >= 1): ?>
                                <div class="sidebar-separator">
                                    <span class="sidebar-separator-text">
                                        <?= d__('system', 'Administration') ?>
                                    </span>
                                </div>

                                <!-- Admin Panel -->
                                <?php if ($user->rights >= 7): ?>
                                    <a href="/admin/" class="sidebar-menu-item menu-admin">
                                        <div class="sidebar-menu-icon icon-admin">
                                            <svg class="sidebar-menu-svg svg-admin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                            </svg>
                                        </div>
                                        <span class="flex-1 font-bold"><?= d__('system', 'Admin Panel') ?></span>
                                    </a>
                                <?php endif ?>

                                <!-- Admin Chat -->
                                <a href="/guestbook/?type=admin" class="sidebar-menu-item menu-admin-chat">
                                    <div class="sidebar-menu-icon icon-admin">
                                        <svg class="sidebar-menu-svg svg-admin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                                        </svg>
                                    </div>
                                    <span class="flex-1 font-bold"><?= d__('system', 'Admin Chat') ?></span>
                                    <?php if ($guestbook_counters['admin_club'] > 0): ?>
                                        <span class="sidebar-badge"><?= $guestbook_counters['admin_club'] ?></span>
                                    <?php endif ?>
                                </a>
                            <?php endif ?>
                        </nav>

                        <!-- Footer Section -->
                        <div class="mt-8 pt-6 border-t border-gray-200/50 space-y-4">
                            <!-- Online Counter -->
                            <div>
                                <a href="/online/" class="flex items-center text-sm font-semibold text-gray-700 hover:text-blue-600 transition-all duration-300">
                                    <div class="relative mr-3">
                                        <div class="w-4 h-4 bg-green-500 rounded-full animate-ping absolute -top-1 -right-1"></div>
                                        <div class="w-4 h-4 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full relative shadow-lg"></div>
                                    </div>
                                    <span class="font-bold">
                                        <?= $container->get('counters')->online() ?> <?= d__('system', 'online') ?>
                                    </span>
                                </a>
                            </div>

                            <!-- Language Selector -->
                            <?php if (count($config['lng_list']) > 1): ?>
                                <div>
                                    <button class="flex items-center text-sm font-semibold text-gray-700 hover:text-purple-600 transition-all duration-300" data-url="/language/" data-toggle="modal" data-target=".ajax_modal">
                                        <div class="w-8 h-6 rounded-lg border-2 border-gray-300 overflow-hidden shadow-lg mr-3">
                                            <img class="w-full h-full object-cover" src="<?= $this->asset('images/flags/' . strtolower($locale) . '.svg') ?>" alt="<?= $locale ?>">
                                        </div>
                                        <span class="font-bold">
                                            <?= $config['lng_list'][$locale]['name'] ?>
                                        </span>
                                    </button>
                                </div>
                            <?php endif ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="flex-1 flex flex-col min-w-0">
            <!-- Top Navigation -->
            <nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-20">
                <div class="px-4 sm:px-6 lg:px-8">
                    <div class="flex justify-between items-center h-16">
                        <!-- Left Section -->
                        <div class="flex items-center space-x-4">
                            <!-- Mobile Menu Toggle -->
                            <button id="sidebarToggle" class="lg:hidden p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-all duration-300 hover-lift">
                                <div class="w-6 h-6 relative">
                                    <span class="absolute top-1/2 left-0 w-6 h-0.5 bg-gray-700 transform -translate-y-1/2 transition-all duration-300"></span>
                                    <span class="absolute top-1/2 left-0 w-6 h-0.5 bg-gray-700 transform -translate-y-1/2 transition-all duration-300"></span>
                                    <span class="absolute top-1/2 left-0 w-6 h-0.5 bg-gray-700 transform -translate-y-1/2 transition-all duration-300"></span>
                                </div>
                            </button>

                            <!-- Mobile Logo -->
                            <div class="lg:hidden">
                                <a href="/" class="flex items-center space-x-3 hover-lift">
                                    <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                                        <img src="<?= $this->asset('images/logo_mobile.svg') ?>" alt="JohnCMS" class="w-6 h-6 brightness-0 invert">
                                    </div>
                                    <span class="font-bold text-gray-800">JohnCMS</span>
                                </a>
                            </div>

                            <!-- Breadcrumbs for Desktop -->
                            <div class="hidden lg:flex items-center space-x-2 text-sm">
                                <a href="/" class="text-gray-500 hover:text-gray-700">Home</a>
                                <?php if (! empty($page_title)): ?>
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                    <span class="text-gray-700 font-medium"><?= $this->e($page_title) ?></span>
                                <?php endif ?>
                            </div>
                        </div>

                        <!-- Right Section -->
                        <div class="flex items-center space-x-3">
                            <?php if ($user->isValid()): ?>
                                <!-- Notifications -->
                                <a href="/notifications/" class="relative p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-all duration-300 hover-lift">
                                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM8.515 4.486A4 4 0 0112 3a4 4 0 013.485 1.486M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <?php if (! empty($notifications['all'])): ?>
                                        <span class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center border-2 border-white shadow-lg animate-bounce-subtle">
                                            <?= $notifications['all'] ?>
                                        </span>
                                    <?php endif ?>
                                </a>

                                <!-- User Avatar -->
                                <div class="relative">
                                    <button class="flex items-center space-x-2 p-1 rounded-2xl bg-gray-100 hover:bg-gray-200 transition-all duration-300 hover-lift">
                                        <div class="w-8 h-8 bg-gradient-to-br from-primary-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-sm shadow-lg">
                                            <?= mb_substr($user->name, 0, 1) ?>
                                        </div>
                                    </button>
                                </div>
                            <?php else: ?>
                                <!-- Auth Buttons -->
                                <div class="flex items-center space-x-3">
                                    <a href="/login/" class="px-4 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white font-semibold rounded-xl hover:from-primary-600 hover:to-primary-700 transition-all duration-300 hover-lift shadow-lg">
                                        Login
                                    </a>
                                    <a href="/register/" class="hidden sm:block px-4 py-2 bg-white border border-gray-300 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition-all duration-300 hover-lift">
                                        Register
                                    </a>
                                </div>
                            <?php endif ?>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- Page Content -->
            <main class="flex-1 p-4 sm:p-6 lg:p-8">
                <div class="max-w-7xl mx-auto">
                    <!-- Page Header -->
                    <?php if (! empty($page_title)): ?>
                        <div class="mb-8">
                            <h1 class="text-3xl font-bold text-gray-900 mb-2"><?= $this->e($page_title) ?></h1>
                            <div class="w-20 h-1 bg-gradient-to-r from-primary-500 to-purple-500 rounded-full"></div>
                        </div>
                    <?php endif ?>

                                        <!-- Breadcrumbs -->
                    <div class="mb-8">
                        <?= $this->fetch('system::app/breadcrumbs') ?>
                    </div>

                    <!-- Header Ads -->
                    <?php if (! empty($ads_array['content_header'])): ?>
                        <div class="mb-8 space-y-4">
                            <?php foreach ($ads_array['content_header'] as $item): ?>
                                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
                                    <?= $item ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                    <!-- Main Content Area -->
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
                        <?= $this->section('content') ?>
                    </div>

                    <!-- Footer Ads -->
                    <?php if (! empty($ads_array['content_footer'])): ?>
                        <div class="mt-8 space-y-4">
                            <?php foreach ($ads_array['content_footer'] as $item): ?>
                                <div class="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
                                    <?= $item ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </main>
        </div>
    </div>

    <!-- Footer Content Section -->
    <?php if ($this->section('footer_content')): ?>
        <div class="bg-gray-50 border-t border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <?= $this->section('footer_content') ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- Main Footer -->
    <footer class="bg-white border-t border-gray-200 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
                <!-- Social Links -->
                <div class="flex items-center space-x-4">
                    <a href="https://twitter.com/johncms" class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-all duration-300 hover-lift">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                        </svg>
                    </a>
                    <a href="https://t.me/johncms_official" class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center text-gray-600 hover:bg-gray-200 transition-all duration-300 hover-lift">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                        </svg>
                    </a>
                </div>

                <!-- Analytics & Copyright -->
                <div class="flex flex-col lg:flex-row items-center space-y-4 lg:space-y-0 lg:space-x-8 text-center lg:text-left">
                    <?php if (! empty($analytics)): ?>
                        <div class="flex items-center space-x-3">
                            <?php foreach ($analytics as $counter): ?>
                                <div class="bg-gray-100 px-4 py-2 rounded-xl font-semibold text-sm">
                                    <?= $counter ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                    <div class="text-gray-600">
                        &copy; <?= date('Y') ?>, <a href="https://johncms.com" class="text-primary-600 hover:text-primary-700 font-semibold transition-colors duration-200">JohnCMS</a>
                        <span class="text-gray-500 ml-2"><?= CMS_VERSION ?></span>
                    </div>
                    <?= $this->fetch('system::app/debug') ?>
                </div>
            </div>
        </div>
    </footer>
</div>

<!-- Back to Top Button -->
<div class="fixed bottom-8 right-8 z-30">
    <button id="backToTop" class="bg-gradient-to-r from-primary-500 to-purple-600 p-4 rounded-2xl shadow-lg hover:shadow-xl border border-white/20 text-white transition-all duration-300 hover-lift opacity-0 transform translate-y-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
        </svg>
    </button>
</div>

<!-- Mobile Sidebar Overlay -->
<div id="mobileOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden hidden"></div>

<!-- Mobile Sidebar -->
<div id="mobileSidebar" class="fixed top-0 left-0 w-80 h-full bg-white shadow-xl border-r border-gray-200 z-50 transform -translate-x-full sidebar-transition lg:hidden overflow-y-auto">
    <div class="p-6 h-full flex flex-col">
        <!-- Mobile Header -->
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <a href="/" class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                        <img src="<?= $this->asset('images/logo_mobile.svg') ?>" alt="JohnCMS" class="w-6 h-6 brightness-0 invert">
                    </div>
                    <span class="font-bold text-gray-800">JohnCMS</span>
                </a>
                <button id="closeSidebar" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors duration-200">
                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>

        <!-- Mobile User Menu -->
        <div class="mb-6">
            <?= $this->section('sidebar-user', $this->fetch('system::app/sidebar-user-menu', ['notifications' => $notifications])) ?>
        </div>

        <!-- Mobile Main Menu -->
        <div class="flex-1">
            <!-- Ads Before Menu -->
            <?php if (! empty($ads_array['before_menu'])): ?>
                <div class="mb-6 space-y-3">
                    <?php foreach ($ads_array['before_menu'] as $item): ?>
                        <div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-lg p-4 rounded-2xl border border-white/20 shadow-lg">
                            <?= $item ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <!-- Navigation Menu -->
            <nav class="space-y-2">
                <!-- News -->
                <a href="/news/" class="sidebar-menu-item menu-news">
                    <div class="sidebar-menu-icon icon-news">
                        <svg class="sidebar-menu-svg svg-news" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                        </svg>
                    </div>
                    <span class="flex-1"><?= d__('system', 'News archive') ?></span>
                    <?php if ($news_counters['new'] > 0): ?>
                        <span class="sidebar-badge">+ <?= $news_counters['new'] ?></span>
                    <?php endif ?>
                </a>

                <!-- Forum -->
                <?php if ($config['mod_forum'] || $user->rights >= 7): ?>
                    <a href="/forum/" class="sidebar-menu-item menu-forum">
                        <div class="sidebar-menu-icon icon-forum">
                            <svg class="sidebar-menu-svg svg-forum" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                            </svg>
                        </div>
                        <span class="flex-1"><?= d__('system', 'Forum') ?></span>
                        <?php if ($forum_counters['new_messages'] > 0): ?>
                            <span class="sidebar-badge">+ <?= $forum_counters['new_messages'] ?></span>
                        <?php endif; ?>
                    </a>
                <?php endif ?>

                <!-- Guestbook -->
                <?php if ($config['mod_guest'] || $user->rights >= 7): ?>
                    <a href="/guestbook/" class="sidebar-menu-item menu-guestbook">
                        <div class="sidebar-menu-icon icon-guestbook">
                            <svg class="sidebar-menu-svg svg-guestbook" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                            </svg>
                        </div>
                        <span class="flex-1"><?= d__('system', 'Guestbook') ?></span>
                        <?php if ($guestbook_counters['guestbook'] > 0): ?>
                            <span class="sidebar-badge">+ <?= $guestbook_counters['guestbook'] ?></span>
                        <?php endif ?>
                    </a>
                <?php endif ?>

                <!-- Downloads -->
                <?php if ($config['mod_down'] || $user->rights >= 7): ?>
                    <a href="/downloads/" class="sidebar-menu-item menu-downloads">
                        <div class="sidebar-menu-icon icon-downloads">
                            <svg class="sidebar-menu-svg svg-downloads" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </div>
                        <span class="flex-1"><?= d__('system', 'Downloads') ?></span>
                        <?php if ($downloads_counters['new'] > 0): ?>
                            <span class="sidebar-badge"><?= $downloads_counters['new'] ?></span>
                        <?php endif ?>
                    </a>
                <?php endif ?>

                <!-- Library -->
                <?php if ($config['mod_lib'] || $user->rights >= 7): ?>
                    <a href="/library/" class="sidebar-menu-item menu-library">
                        <div class="sidebar-menu-icon icon-library">
                            <svg class="sidebar-menu-svg svg-library" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <span class="flex-1"><?= d__('system', 'Library') ?></span>
                        <?php if ($library_counters['new'] > 0): ?>
                            <span class="sidebar-badge">+ <?= $library_counters['new'] ?></span>
                        <?php endif ?>
                    </a>
                <?php endif ?>

                <!-- Users -->
                <a href="/community/" class="sidebar-menu-item menu-users">
                    <div class="sidebar-menu-icon icon-users">
                        <svg class="sidebar-menu-svg svg-users" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                    </div>
                    <span class="flex-1"><?= d__('system', 'Users') ?></span>
                    <?php if ($users_counters['new'] > 0): ?>
                        <span class="sidebar-badge">+ <?= $users_counters['new'] ?></span>
                    <?php endif ?>
                </a>

                <!-- Photo Albums -->
                <a href="/album/" class="sidebar-menu-item menu-albums">
                    <div class="sidebar-menu-icon icon-albums">
                        <svg class="sidebar-menu-svg svg-albums" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <span class="flex-1"><?= d__('system', 'Photo Albums') ?></span>
                    <?php if ($album_counters['new'] > 0): ?>
                        <span class="sidebar-badge">+ <?= $album_counters['new'] ?></span>
                    <?php endif ?>
                </a>

                <!-- Information, FAQ -->
                <a href="/help/" class="sidebar-menu-item menu-help">
                    <div class="sidebar-menu-icon icon-help">
                        <svg class="sidebar-menu-svg svg-help" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <span class="flex-1"><?= d__('system', 'Information, FAQ') ?></span>
                </a>

                <!-- Admin Section -->
                <?php if ($user->rights >= 1): ?>
                    <div class="sidebar-separator">
                        <span class="sidebar-separator-text">
                            <?= d__('system', 'Administration') ?>
                        </span>
                    </div>

                    <!-- Admin Panel -->
                    <?php if ($user->rights >= 7): ?>
                        <a href="/admin/" class="sidebar-menu-item menu-admin">
                            <div class="sidebar-menu-icon icon-admin">
                                <svg class="sidebar-menu-svg svg-admin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <span class="flex-1 font-bold"><?= d__('system', 'Admin Panel') ?></span>
                        </a>
                    <?php endif ?>

                    <!-- Admin Chat -->
                    <a href="/guestbook/?type=admin" class="sidebar-menu-item menu-admin-chat">
                        <div class="sidebar-menu-icon icon-admin">
                            <svg class="sidebar-menu-svg svg-admin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                            </svg>
                        </div>
                        <span class="flex-1 font-bold"><?= d__('system', 'Admin Chat') ?></span>
                        <?php if ($guestbook_counters['admin_club'] > 0): ?>
                            <span class="sidebar-badge"><?= $guestbook_counters['admin_club'] ?></span>
                        <?php endif ?>
                    </a>
                <?php endif ?>
            </nav>

            <!-- Footer Section -->
            <div class="mt-8 pt-6 border-t border-gray-200/50 space-y-4">
                <!-- Online Counter -->
                <div>
                    <a href="/online/" class="flex items-center text-sm font-semibold text-gray-700 hover:text-blue-600 transition-all duration-300">
                        <div class="relative mr-3">
                            <div class="w-4 h-4 bg-green-500 rounded-full animate-ping absolute -top-1 -right-1"></div>
                            <div class="w-4 h-4 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full relative shadow-lg"></div>
                        </div>
                        <span class="font-bold">
                            <?= $container->get('counters')->online() ?> <?= d__('system', 'online') ?>
                        </span>
                    </a>
                </div>

                <!-- Language Selector -->
                <?php if (count($config['lng_list']) > 1): ?>
                    <div>
                        <button class="flex items-center text-sm font-semibold text-gray-700 hover:text-purple-600 transition-all duration-300" data-url="/language/" data-toggle="modal" data-target=".ajax_modal">
                            <div class="w-8 h-6 rounded-lg border-2 border-gray-300 overflow-hidden shadow-lg mr-3">
                                <img class="w-full h-full object-cover" src="<?= $this->asset('images/flags/' . strtolower($locale) . '.svg') ?>" alt="<?= $locale ?>">
                            </div>
                            <span class="font-bold">
                                <?= $config['lng_list'][$locale]['name'] ?>
                            </span>
                        </button>
                    </div>
                <?php endif ?>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade ajax_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
    </div>
</div>

<!-- Scripts -->
<script src="<?= $this->asset('js/manifest.js', true) ?>"></script>
<script src="<?= $this->asset('js/vendor.js', true) ?>"></script>
<script src="<?= $this->asset('js/app.js', true) ?>"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sidebarToggle = document.getElementById('sidebarToggle');
    const closeSidebar = document.getElementById('closeSidebar');
    const mobileSidebar = document.getElementById('mobileSidebar');
    const mobileOverlay = document.getElementById('mobileOverlay');
    const backToTop = document.getElementById('backToTop');

    // Mobile sidebar toggle
    function openSidebar() {
        mobileSidebar.classList.remove('-translate-x-full');
        mobileSidebar.classList.add('translate-x-0');
        mobileOverlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeMobileSidebar() {
        mobileSidebar.classList.remove('translate-x-0');
        mobileSidebar.classList.add('-translate-x-full');
        mobileOverlay.classList.add('hidden');
        document.body.style.overflow = '';
    }

    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', openSidebar);
    }
    if (closeSidebar) {
        closeSidebar.addEventListener('click', closeMobileSidebar);
    }
    if (mobileOverlay) {
        mobileOverlay.addEventListener('click', closeMobileSidebar);
    }

    // Close sidebar on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && mobileSidebar && !mobileSidebar.classList.contains('-translate-x-full')) {
            closeMobileSidebar();
        }
    });

    // Back to top functionality
    function toggleBackToTop() {
        if (window.pageYOffset > 300) {
            backToTop.classList.remove('opacity-0', 'translate-y-10');
            backToTop.classList.add('opacity-100', 'translate-y-0');
        } else {
            backToTop.classList.remove('opacity-100', 'translate-y-0');
            backToTop.classList.add('opacity-0', 'translate-y-10');
        }
    }

    if (backToTop) {
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        window.addEventListener('scroll', toggleBackToTop);
        toggleBackToTop(); // Initialize
    }
});
</script>

<?php if ($locale !== 'en'): ?>
    <?php
    try {
        ?>
        <script src="<?= $this->asset('js/flatpickr/' . $locale . '.js') ?>"></script>
        <script>flatpickr.localize(flatpickr.l10ns.<?= $locale ?>);</script>
        <?php
    } catch (Exception $exception) {
    }
    ?>
<?php endif; ?>
<?= $this->section('scripts', '') ?>
</body>
</html>