{% extends "base.html" %}

{% block content %}
<div class="flex h-screen bg-base-100">
    <!-- Sidebar -->
    <aside class="w-64 bg-base-200 hidden md:block overflow-y-auto">
        <div class="h-full flex flex-col">
            <!-- User Profile -->
            <div class="p-4 border-b border-base-300">
                <div class="flex items-center gap-4">
                    <div class="avatar placeholder">
                        <div class="bg-primary text-primary-content rounded-full w-12">
                            <span class="text-xl">{{ current_user.user_data.username[0] | upper }}</span>
                        </div>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-semibold">{{ current_user.user_data.username }}</h3>
                    </div>
                </div>
            </div>
            
            <!-- Navigation -->
            <nav class="flex-1 p-4 space-y-2">
                <a href="{{ url_for('books_list') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'books_list' %}bg-base-300{% endif %}">
                    <i class="fas fa-book w-5 ml-3"></i>
                    <span>الكتب</span>
                </a>
                
                <a href="{{ url_for('chat_history') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'chat_history' %}bg-base-300{% endif %}">
                    <i class="fas fa-comments w-5 ml-3"></i>
                    <span>المحادثات</span>
                </a>
                
                <a href="{{ url_for('profile') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'profile' %}bg-base-300{% endif %}">
                    <i class="fas fa-user w-5 ml-3"></i>
                    <span>الملف الشخصي</span>
                </a>
            </nav>
            
            <!-- Logout Button -->
            <div class="p-4 border-t border-base-300">
                <a href="{{ url_for('logout') }}" 
                   class="btn btn-error btn-outline w-full">
                    <i class="fas fa-sign-out-alt ml-2"></i>
                    تسجيل الخروج
                </a>
            </div>
        </div>
    </aside>

    <!-- Mobile Sidebar -->
    <div id="mobile-sidebar" 
         class="fixed inset-y-0 right-0 w-64 bg-base-200 transform translate-x-full transition-transform duration-300 ease-in-out md:hidden z-40 overflow-y-auto">
        <!-- Mobile Sidebar Content (same as desktop) -->
        <div class="h-full flex flex-col">
            <div class="p-4 border-b border-base-300">
                <div class="flex justify-between items-center">
                    <div class="flex items-center gap-4">
                        <div class="avatar placeholder">
                            <div class="bg-primary text-primary-content rounded-full w-12">
                                <span class="text-xl">{{ current_user.user_data.username[0] | upper }}</span>
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-semibold">{{ current_user.user_data.username }}</h3>
                        </div>
                    </div>
                    <button id="mobile-sidebar-close" class="btn btn-ghost btn-circle">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <nav class="flex-1 p-4 space-y-2">
                <a href="{{ url_for('books_list') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'books_list' %}bg-base-300{% endif %}">
                    <i class="fas fa-book w-5 ml-3"></i>
                    <span>الكتب</span>
                </a>
                
                <a href="{{ url_for('chat_history') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'chat_history' %}bg-base-300{% endif %}">
                    <i class="fas fa-comments w-5 ml-3"></i>
                    <span>المحادثات</span>
                </a>
                
                <a href="{{ url_for('profile') }}" 
                   class="flex items-center px-4 py-2 rounded-lg hover:bg-base-300 transition-colors {% if request.endpoint == 'profile' %}bg-base-300{% endif %}">
                    <i class="fas fa-user w-5 ml-3"></i>
                    <span>الملف الشخصي</span>
                </a>
            </nav>
            
            <div class="p-4 border-t border-base-300">
                <a href="{{ url_for('logout') }}" 
                   class="btn btn-error btn-outline w-full">
                    <i class="fas fa-sign-out-alt ml-2"></i>
                    تسجيل الخروج
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- Mobile Header -->
        <header class="md:hidden navbar bg-base-200 px-4">
            <div class="flex-1">
                <button id="mobile-sidebar-toggle" class="btn btn-ghost btn-circle">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </header>

        <!-- Main Content Area -->
        <main class="flex-1 overflow-y-auto">
            {% block dashboard_content %}{% endblock %}
        </main>
    </div>
</div>

<!-- Mobile Sidebar Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const mobileSidebar = document.getElementById('mobile-sidebar');
    const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle');
    const mobileSidebarClose = document.getElementById('mobile-sidebar-close');
    
    function toggleSidebar() {
        mobileSidebar.classList.toggle('translate-x-full');
    }
    
    mobileSidebarToggle.addEventListener('click', toggleSidebar);
    mobileSidebarClose.addEventListener('click', toggleSidebar);
    
    // Close sidebar when clicking outside
    document.addEventListener('click', function(event) {
        const isClickInside = mobileSidebar.contains(event.target) || 
                            mobileSidebarToggle.contains(event.target);
        
        if (!isClickInside && !mobileSidebar.classList.contains('translate-x-full')) {
            toggleSidebar();
        }
    });
});
</script>
{% endblock %}


fix why i need to scrool to see logout button in the sidebar