{% include 'views/front/' ~ template ~ '/includes/head.html.twig' %}

<div class=" w-full">

    <div class="w-full flex gap lg:gap-2" id="main-container" x-data="{}">
        
        <div  class="lg:fixed bg-white dark:bg-gray-900 h-screen">
            {% include 'views/front/' ~ template ~ '/includes/app_sidebar.html.twig' %}
        </div>

        <div class="w-full  px-0 relative overflow-hidden lg:ml-60" >
                    
            <header class="relative ">
                {% include 'views/front/' ~ template ~ '/includes/app_header.html.twig' %}
            </header>
            
            {% if offline_mode or app.offline_mode %}
            <!-- Offline Mode Banner -->
            <div class="bg-orange-500 text-white px-4 py-2 text-center text-sm">
                <div class="flex items-center justify-center space-x-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5z"></path>
                    </svg>
                    <span>You're viewing cached content - some features may be limited while offline</span>
                    <button onclick="window.location.reload()" class="ml-4 bg-orange-600 hover:bg-orange-700 px-2 py-1 rounded text-xs">
                        Retry Connection
                    </button>
                </div>
            </div>
            {% endif %}
            
            <div id="app-content" class="pb-20">
                {% include 'views/front/' ~ template ~ '/pages/' ~ layout ~ '.html.twig' %}
            </div>
            <div> 
                {% include 'views/front/' ~ template ~ '/includes/footer-menu.html.twig' %}
            </div>
        </div>
    </div>
</div>
    
<!-- Footer -->
{% include 'views/front/' ~ template ~ '/includes/footer.html.twig' %}

<!-- Modals Container -->
<div id="modal-container" class="relative" style="z-index: 991;"></div>
</body>

</html>