<!-- Main container -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden relative">
    <!-- Sidebar Overlay (Mobile) -->
    <div id="sidebar-overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black/50 z-40 hidden md:hidden"></div>

    <!-- Sidebar -->
    <div id="admin-sidebar"
        class="fixed md:static inset-y-0 left-0 w-64 bg-white dark:bg-black text-gray-900 dark:text-white flex flex-col z-50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out border-r border-gray-200 dark:border-gray-800">
        <div
            class="p-6 text-2xl font-black tracking-tight uppercase border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
            <%= t('admin.dashboard.panelTitle') %>
            <button onclick="toggleSidebar()"
                class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="flex-grow p-4 space-y-2 overflow-y-auto">
            <a href="#dashboard" onclick="showSection('dashboard')"
                class="flex items-center px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-800 text-blue-600 dark:text-white font-bold sidebar-link">
                <i class="fas fa-tachometer-alt w-6 mr-3"></i> <%= t('admin.dashboard.dashboard') %>
            </a>
            <a href="#portfolio" onclick="showSection('portfolio')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-id-card w-6 mr-3"></i> <%= t('admin.dashboard.portfolio') %>
            </a>
            <a href="#blogs" onclick="showSection('blogs')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-blog w-6 mr-3"></i> <%= t('admin.dashboard.blogs') %>
            </a>
            <a href="#gallery" onclick="showSection('gallery')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-images w-6 mr-3"></i> <%= t('admin.dashboard.gallery') %>
            </a>
            <a href="#music" onclick="showSection('music')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-music w-6 mr-3"></i> <%= t('admin.dashboard.musicGazals') %>
            </a>
            <a href="#books" onclick="showSection('books')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-book w-6 mr-3"></i> <%= t('admin.dashboard.books') %>
            </a>
            <a href="#settings" onclick="showSection('settings')"
                class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors sidebar-link">
                <i class="fas fa-cog w-6 mr-3"></i> <%= t('admin.dashboard.settings') %>
            </a>
        </nav>
        <div class="p-4 border-t border-gray-200 dark:border-gray-800">
            <button onclick="logout()"
                class="w-full bg-red-600 text-white px-4 py-3 rounded-lg font-bold hover:bg-red-700 transition-colors">
                <%= t('admin.dashboard.logout') %> <i class="fas fa-sign-out-alt ml-2"></i>
            </button>
        </div>
    </div>

    <!-- Main Content -->
    <main class="flex-1 flex flex-col h-full overflow-hidden">
        <!-- Top bar (Mobile) -->
        <header
            class="md:hidden bg-white dark:bg-black shadow-sm dark:shadow-gray-900 border-b border-gray-200 dark:border-gray-800 p-4 flex justify-between items-center">
            <span class="font-bold text-gray-900 dark:text-white"><%= t('admin.dashboard.mobileTitle') %></span>
            <button onclick="toggleSidebar()" class="text-gray-600 dark:text-gray-400">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </header>

        <div id="section-content" class="flex-1 p-4 md:p-12 overflow-y-auto">
            <!-- Dashboard Overview -->
            <div id="dashboard-section" class="section">
                <%- include('../partials/dashboard-overview') %>
            </div>
            <!-- Portfolio Management -->
            <div id="portfolio-section" class="section hidden">
                <%- include('../partials/portfolio-management') %>
            </div>
            <!-- Blogs Management -->
            <div id="blogs-section" class="section hidden">
                <%- include('../partials/blogs-management') %>
            </div>
            <!-- Gallery Management -->
            <div id="gallery-section" class="section hidden">
                <%- include('../partials/gallery-management') %>
            </div>
            <!-- Music Management -->
            <div id="music-section" class="section hidden">
                <%- include('../partials/music-management') %>
            </div>
            <!-- Books Management -->
            <div id="books-section" class="section hidden">
                <%- include('../partials/books-management') %>
            </div>
            <!-- Settings Management -->
            <div id="settings-section" class="section hidden">
                <%- include('../partials/settings-management') %>
            </div>
        </div>
    </main>
</div>


<script>
    async function logout() {
        await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
        location.href = '/admin/login';
    }

    function toggleSidebar() {
        const sidebar = document.getElementById('admin-sidebar');
        const overlay = document.getElementById('sidebar-overlay');
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }

    function showSection(name) {
        // Toggle sidebar if on mobile
        if (window.innerWidth < 768) {
            toggleSidebar();
        }
        // Update active link
        document.querySelectorAll('nav a').forEach(link => {
            link.classList.remove('bg-gray-100', 'dark:bg-gray-800', 'text-blue-600', 'dark:text-white', 'font-bold');
            if (link.getAttribute('href') === `#${name}`) {
                link.classList.add('bg-gray-100', 'dark:bg-gray-800', 'text-blue-600', 'dark:text-white', 'font-bold');
            }
        });

        // Hide all sections
        document.querySelectorAll('.section').forEach(section => {
            section.classList.add('hidden');
        });

        // Show the selected section
        const sectionId = `${name}-section`;
        const section = document.getElementById(sectionId);
        if (section) {
            section.classList.remove('hidden');
        }
    }

    // Initial load
    showSection('dashboard');
</script>
