{% load static %}

<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
    <div class="sidebar-brand justify-content-start h-auto">
        <a href="{% url 'home' %}" class="brand-link">
            <img src="{% block ecom_statics_logo %}{% static 'ecom_statics/images/logos/ecom.png' %}{% endblock %}" alt="Logo" class="brand-image">

            <span class="brand-text fw-light text-uppercase">{% block ecom_statics_sidebar_title %}Ecom Statics{% endblock %}</span>
        </a>
    </div>

    <div class="sidebar-wrapper">
        <nav class="mt-2">
            <ul id="navigation" class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="navigation" aria-label="Main navigation" data-accordion="false">
                {% block ecom_statics_sidebar_items %}
                    <li class="nav-header">Módulo</li>

                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon bi bi-circle-fill"></i>
                            <p>Sección 1</p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="nav-icon bi bi-circle-fill"></i>
                            <p>
                                Sección 2
                                <i class="nav-arrow bi bi-chevron-right"></i>
                            </p>
                        </a>

                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon bi bi-circle"></i>
                                    <p>Sección 2.1</p>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon bi bi-circle"></i>
                                    <p>
                                        Sección 2.2
                                        <i class="nav-arrow bi bi-chevron-right"></i>
                                    </p>
                                </a>

                                <ul class="nav nav-treeview">
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i class="nav-icon bi bi-record-circle-fill"></i>
                                            <p>Sección 2.2.1</p>
                                        </a>
                                    </li>
                                    
                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i class="nav-icon bi bi-record-circle-fill"></i>
                                            <p>Sección 2.2.2</p>
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a href="#" class="nav-link">
                                            <i class="nav-icon bi bi-record-circle-fill"></i>
                                            <p>Sección 2.2.3</p>
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nav-icon bi bi-circle"></i>
                                    <p>Sección 2.3</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                {% endblock %}
            </ul>
        </nav>
    </div>
</aside>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector('.sidebar-wrapper'), {
            scrollbars: {
                theme: 'os-theme-light',
                autoHide: 'leave',
                clickScroll: true
            }
        });
    });
</script>
