{% set raw_href = item.href|default(null) %}
{% set is_separator = raw_href is same as('') %}
{% set href = raw_href ? raw_href : '#' %}
{% set has_children = item.children is defined and item.children is not empty %}
{% set is_active = item.active|default(false) %}
{% set is_open = item.open|default(false) or item.hasActiveChild|default(false) %}

<li class="sidebar-item{{ item.disabled|default(false) ? ' opacity-50' : '' }}{{ is_active ? ' selected active' : '' }}{{ is_open ? ' menu-open' : '' }}">
    {% if href == '#' %}
        <span class="nav-small-cap">
            <span class="hide-menu">{{ item.label|upper }}</span>
        </span>
    {% else %}
        <a class="sidebar-link{{ has_children ? ' has-arrow' : '' }}{{ item.disabled|default(false) ? ' disabled' : '' }}{{ is_active ? ' active' : '' }}" href="{{ item.disabled|default(false) ? '#' : (has_children ? '#' : href) }}" aria-expanded="{{ is_open ? 'true' : 'false' }}" data-sidebar-target="link" {% if has_children %}data-action="sidebar#toggleSubmenu"{% endif %}>
            <iconify-icon icon="{{ item.icon|default('solar:record-circle-line-duotone') }}"></iconify-icon>
            <span class="hide-menu">{{ item.label }}</span>
            {% if item.badgeFrame|default(null) %}
                <turbo-frame id="{{ item.badgeFrame }}" class="ms-auto badge bg-primary-subtle text-primary">0</turbo-frame>
            {% endif %}
        </a>
        {% if has_children %}
            <ul class="collapse first-level{{ is_open ? ' in show' : '' }}">
                {% for child in item.children %}
                    {% set child_href = child.href is defined and child.href ? child.href : '#' %}
                    {% set child_active = child.active|default(false) %}
                    <li class="sidebar-item{{ child_active ? ' selected active' : '' }}">
                        <a href="{{ child_href }}" class="sidebar-link{{ child_active ? ' active' : '' }}" data-sidebar-target="link">
                            <span class="icon-small"></span>
                            <span class="hide-menu">{{ child.label }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endif %}
</li>