{% 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 turns this anchor into a Bootstrap dropdown trigger.
          JS sets/removes data-bs-toggle on mode switch; aria-expanded is
          kept in sync by Bootstrap. The accessible label still resolves
          via the visible title in full mode and via title= in mini —
          set title= unconditionally so leaf items also get a native
          browser tooltip when the sidebar is collapsed to icons. The
          attribute is harmless in full mode (browsers only surface it
          on hover).
        {% 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 %}
          Mini-mode flyout: Bootstrap dropend menu, hidden in full mode via CSS.
          The header inside the menu names the parent item (which has no URL of
          its own when it has children), so the flyout context is obvious.
        {% 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 %}