{% extends "base.html" %}
{% block content %}
    <div class="flex bg-gray-100 dark:bg-gray-900 lg:p-6 lg:gap-0 lg:justify-center">
        <!-- Mobile sidebar overlay -->
        <div id="sidebar-overlay"
             class="fixed inset-0 bg-black bg-opacity-50 z-30 lg:hidden hidden"
             hx-on:click=" document.getElementById('sidebar').classList.remove('mobile-open'); this.classList.add('hidden'); this.classList.remove('show'); document.getElementById('hamburger-icon').classList.remove('hidden'); document.getElementById('close-icon').classList.add('hidden'); document.getElementById('mobile-menu-button').setAttribute('aria-expanded', 'false'); document.body.classList.remove('mobile-sidebar-open'); ">
        </div>
        <!-- Container for sidebar and main content -->
        <div class="flex w-full lg:max-w-[calc(80rem+16rem+1.5rem)] lg:gap-6">
            {% include "partials/navigation.html" %}
            <!-- Main Content Area -->
            <div class="flex-1 flex flex-col lg:ml-0">
                <div class="p-3 sm:p-6 lg:pr-6 lg:py-6 lg:pl-0">
                    <!-- Main Content Container - tabs loaded here via HTMX -->
                    <div id="main-content"
                         hx-get="{{ initial_content_url or '/api/tabs/repositories' }}"
                         hx-trigger="load">
                        <!-- Default loading state -->
                        <div class="text-gray-500 dark:text-gray-400 text-sm">
                            Loading {{ active_tab or 'repositories' }}...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
.tab-content {
    min-height: 500px;
}

.htmx-indicator {
    display: none;
}
    </style>
{% endblock content %}