{% load static i18n %}
{#Generic menu renderer that can be used for rendering IMenuItem instances in various contexts.#}
{#Usage: {% include "conjunto/tabler/includes/menu_renderer.html" with menu_items=menus.sidebar style="vertical" %}#}
{#Parameters:#}
{#  - menu_items: List of IMenuItem instances to render#}
{#  - style: "vertical" (default), "horizontal", "dropdown"#}
{#  - show_icons: True (default), False - whether to show icons#}
{#  - item_class: Additional CSS classes for menu items#}

{% if not style %}{% with style="vertical" %}{% endwith %}{% endif %}
{% if show_icons == None %}{% with show_icons=True %}{% endwith %}{% endif %}

{% if style == "vertical" %}
    {# Vertical menu (for sidebar) #}
    <ul class="navbar-nav {{ menu_class|default:'' }}">
        {% for item in menu_items %}
            {% if item.visible %}
                {% if item.separator_before %}
                    <li class="dropdown-divider"></li>
                {% endif %}
                <li class="nav-item{% if item.has_children %} dropdown{% endif %}{% if item.selected %} active{% endif %} {{ item_class|default:'' }}">
                    {% if item.has_children %}
                        <a class="nav-link dropdown-toggle has-submenu" href="#" role="button">
                            {% if show_icons and item.get_icon %}
                                <span class="nav-link-icon">
                <i class="ti ti-{{ item.get_icon }}"></i>
            </span>
                            {% endif %}
                            <span class="nav-link-title">{{ item.get_title }}</span>
                            {% if item.badge %}
                                <span class="badge {{ item.badge_class|default:'badge-sm bg-red ms-auto' }}">{{ item.badge }}</span>
                            {% endif %}
                        </a>
                        <ul class="submenu">
                            {% for child in item.children %}
                                {% if child.visible %}
                                    <li class="nav-item">
                                        <a class="nav-link{% if child.selected %} active{% endif %}" href="{{ child.url }}">
                                            {% if show_icons and child.get_icon %}
                                                <span class="nav-link-icon">
                        <i class="ti ti-{{ child.get_icon }}"></i>
                    </span>
                                            {% endif %}
                                            <span class="nav-link-title">{{ child.get_title }}</span>
                                            {% if child.badge %}
                                                <span class="badge {{ child.badge_class|default:'badge-sm bg-red ms-auto' }}">{{ child.badge }}</span>
                                            {% endif %}
                                        </a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    {% else %}
                        <a class="nav-link{% if item.selected %} active{% endif %}" href="{{ item.url }}">
                            {% if show_icons and item.get_icon %}
                                <span class="nav-link-icon">
                <i class="ti ti-{{ item.get_icon }}"></i>
            </span>
                            {% endif %}
                            <span class="nav-link-title">{{ item.get_title }}</span>
                            {% if item.badge %}
                                <span class="badge {{ item.badge_class|default:'badge-sm bg-red ms-auto' }}">{{ item.badge }}</span>
                            {% endif %}
                        </a>
                    {% endif %}
                </li>
                {% if item.separator_after %}
                    <li class="dropdown-divider"></li>
                {% endif %}
            {% endif %}
        {% endfor %}
    </ul>

{% elif style == "horizontal" %}
    {# Horizontal menu (for navbar) #}
    <div class="navbar-nav {{ menu_class|default:'' }}">
        {% for item in menu_items %}
            {% if item.visible %}
                <div class="nav-item{% if item.has_children %} dropdown{% endif %} {{ item_class|default:'' }}">
                    {% if item.has_children %}
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false">
                            {% if show_icons and item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-1"></i>{% endif %}
                            <span class="nav-link-title">{{ item.get_title }}</span>
                        </a>
                        <div class="dropdown-menu">
                            {% for child in item.children %}
                                {% if child.visible %}
                                    <a class="dropdown-item{% if child.selected %} active{% endif %}" href="{{ child.url }}">
                                        {% if show_icons and child.get_icon %}<i class="ti ti-{{ child.get_icon }} me-2"></i>{% endif %}
                                        {{ child.get_title }}
                                        {% if child.badge %}
                                            <span class="badge {{ child.badge_class|default:'badge-sm bg-red ms-auto' }}">{{ child.badge }}</span>
                                        {% endif %}
                                    </a>
                                    {% if child.separator %}
                                        <div class="dropdown-divider"></div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    {% else %}
                        <a class="nav-link{% if item.selected %} active{% endif %}" href="{{ item.url }}">
                            {% if show_icons and item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-1"></i>{% endif %}
                            <span class="nav-link-title">{{ item.get_title }}</span>
                            {% if item.badge %}
                                <span class="badge {{ item.badge_class|default:'badge-sm bg-red' }}">{{ item.badge }}</span>
                            {% endif %}
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        {% endfor %}
    </div>

{% elif style == "dropdown" %}
    {# Dropdown menu items #}
    <div class="dropdown-menu {{ menu_class|default:'' }}">
        {% for item in menu_items %}
            {% if item.visible %}
                <a class="dropdown-item{% if item.selected %} active{% endif %}" href="{{ item.url }}">
                    {% if show_icons and item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-2"></i>{% endif %}
                    {{ item.get_title }}
                    {% if item.badge %}
                        <span class="badge {{ item.badge_class|default:'bg-primary ms-auto' }}">{{ item.badge }}</span>
                    {% endif %}
                </a>
                {% if item.separator %}
                    <div class="dropdown-divider"></div>
                {% endif %}
            {% endif %}
        {% endfor %}
    </div>

{% elif style == "list" %}
    {# Simple list (for notifications, etc.) #}
    <div class="list-group list-group-flush {{ menu_class|default:'' }}">
        {% for item in menu_items %}
            {% if item.visible %}
                <a href="{{ item.url }}" class="list-group-item list-group-item-action{% if item.selected %} active{% endif %} {{ item_class|default:'' }}">
                    <div class="row align-items-center">
                        {% if show_icons and item.get_icon %}
                            <div class="col-auto">
                                <i class="ti ti-{{ item.get_icon }}"></i>
                            </div>
                        {% endif %}
                        <div class="col text-truncate">
                            <div class="text-body">{{ item.get_title }}</div>
                            {% if item.description %}
                                <div class="text-muted text-truncate mt-n1 small">{{ item.description }}</div>
                            {% endif %}
                        </div>
                        {% if item.badge %}
                            <div class="col-auto">
                                <span class="badge {{ item.badge_class|default:'bg-primary' }}">{{ item.badge }}</span>
                            </div>
                        {% endif %}
                    </div>
                </a>
            {% endif %}
        {% endfor %}
    </div>

{% endif %}