{% extends "base.html" %}
{% load djicons %}

{% block body %}
<div class="app-layout" x-data="{ sidebarOpen: true }">
    {# Sidebar #}
    <aside class="sidebar" :data-state="sidebarOpen ? 'open' : 'closed'">
        <div class="sidebar-header">
            <h2 class="sidebar-title">ERPlora Dev</h2>
        </div>
        <nav class="sidebar-nav">
            <a href="/" class="sidebar-link" hx-get="/" hx-target="#main-content-area" hx-push-url="true">
                {% icon "home-outline" %}
                <span>Dashboard</span>
            </a>
            {% if MODULE_MENU_ITEMS %}
            <div class="sidebar-section">
                <span class="sidebar-section-title">Modules</span>
                {% for item in MODULE_MENU_ITEMS %}
                <a href="{{ item.url }}" class="sidebar-link {% if item.active %}active{% endif %}"
                   hx-get="{{ item.url }}" hx-target="#main-content-area" hx-push-url="true">
                    {% icon item.icon|default:"cube-outline" %}
                    <span>{{ item.label }}</span>
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </nav>
    </aside>

    {# Main content #}
    <main class="app-main">
        {% block main %}{% endblock %}
    </main>
</div>
{% endblock %}