{% load i18n %}
{% if item.visible %}
{% if item.separator_before %}<li class="cj-sidebar-divider"></li>{% endif %}
<li class="nav-item{% if item.has_children %} has-children dropend{% endif %}{% if item.selected %} active{% endif %}"
    {% if item.has_children %}data-cj-sidebar-item-has-children="1"{% endif %}>
    <div class="d-flex align-items-center cj-sidebar-row">
        {% comment %}
          Mini mode shows only level-1 icons; a click on this anchor
          follows its own href (or is inert if the parent has no URL).
          No dropdown flyout is opened. title= is set unconditionally
          so the icon-only mini view exposes the label as a native
          browser tooltip; it is harmless in full mode.
        {% endcomment %}
        {# Boost real nav links; skip placeholders (url='#') and disabled. #}
        <a class="nav-link flex-fill cj-sidebar-link{% if item.selected %} active{% endif %}{% if item.disabled %} disabled{% endif %}"
           href="{{ item.url|default:'#' }}"
           title="{{ item.get_title }}"
           {% if item.url and item.url != '#' and not item.disabled and item.boost %}hx-boost="true"{% endif %}>
            {% if 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 ms-auto {{ item.badge_class|default:'badge-sm bg-red' }}">{{ item.badge }}</span>
            {% endif %}
        </a>
        {% if item.inline_action %}
            <a class="nav-link cj-sidebar-action px-2"
               href="{{ item.inline_action.url }}"
               title="{{ item.inline_action.title }}"
               {% if item.inline_action.url and item.inline_action.url != '#' and item.boost %}hx-boost="true"{% endif %}>
                <i class="ti ti-{{ item.inline_action.icon }}"></i>
            </a>
        {% endif %}
        {% if item.has_children %}
            <button class="btn btn-link nav-link cj-sidebar-toggle px-2 border-0 shadow-none"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#cj-sub-{{ item.get_slug }}"
                    aria-controls="cj-sub-{{ item.get_slug }}"
                    aria-expanded="{% if item.selected %}true{% else %}false{% endif %}"
                    aria-label="{% translate 'Toggle submenu' %}">
                <i class="ti ti-chevron-right cj-sidebar-arrow"></i>
            </button>
        {% endif %}
    </div>
    {% if item.has_children %}
        {# Full-mode submenu: inline Bootstrap collapse #}
        <ul class="nav-submenu collapse{% if item.selected %} show{% endif %}"
            id="cj-sub-{{ item.get_slug }}"
            data-bs-parent="#cj-sidebar-accordion">
            {% for child in item.children %}{% if child.visible %}
                <li class="nav-item{% if child.selected %} active{% endif %}">
                    <a class="nav-link{% if child.selected %} active{% endif %}{% if child.disabled %} disabled{% endif %}"
                       href="{{ child.url|default:'#' }}"
                       {% if child.url and child.url != '#' and not child.disabled and child.boost %}hx-boost="true"{% endif %}>
                        {% if 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 ms-auto {{ child.badge_class|default:'badge-sm bg-red' }}">{{ child.badge }}</span>
                        {% endif %}
                    </a>
                </li>
            {% endif %}{% endfor %}
        </ul>
        {% comment %}
          Legacy flyout markup — kept for backward compatibility but
          never displayed (CSS hides .cj-sidebar-flyout unconditionally).
          Mini mode no longer opens a submenu; the parent's href is
          followed instead. Drop this block once no consumer relies on
          it.
        {% endcomment %}
        <ul class="dropdown-menu cj-sidebar-flyout">
            <li class="dropdown-header">{{ item.get_title }}</li>
            {% if item.url and item.url != '#' %}
                <li>
                    <a class="dropdown-item{% if item.selected %} active{% endif %}"
                       href="{{ item.url }}"
                       {% if item.boost %}hx-boost="true"{% endif %}>
                        {% if item.get_icon %}<i class="ti ti-{{ item.get_icon }} me-2"></i>{% endif %}
                        {% translate "Overview" %}
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
            {% endif %}
            {% for child in item.children %}{% if child.visible %}
                <li>
                    <a class="dropdown-item{% if child.selected %} active{% endif %}{% if child.disabled %} disabled{% endif %}"
                       href="{{ child.url|default:'#' }}"
                       {% if child.url and child.url != '#' and not child.disabled and child.boost %}hx-boost="true"{% endif %}>
                        {% if child.get_icon %}<i class="ti ti-{{ child.get_icon }} me-2"></i>{% endif %}
                        {{ child.get_title }}
                        {% if child.badge %}
                            <span class="badge ms-auto {{ child.badge_class|default:'badge-sm bg-red' }}">{{ child.badge }}</span>
                        {% endif %}
                    </a>
                </li>
            {% endif %}{% endfor %}
        </ul>
    {% endif %}
</li>
{% if item.separator_after %}<li class="cj-sidebar-divider"></li>{% endif %}
{% endif %}