{% if show %}
    {% if collapsible %}
        <div class="flex flex-row items-center cursor-pointer mt-2" data-dropdown-toggle="{{ id }}">
            <span class="text-gray-400 font-semibold w-full">{{ title }}</span>
            <i class="fas fa-chevron-up text-gray-400 dropdown-icon"></i>
        </div>
        <div id="{{ id }}" class="dropdown-content hidden transition-all duration-300 ease-in-out overflow-hidden">
    {% else %}
        <div class="mt-2">
    {% endif %}

    <ul>
        {% for item in items %}
            {% set granted = false %}
            
            {% if item.role is not defined %}
                {% set granted = true %}
            {% elseif item.role is iterable %}
                {% for role in item.role %}
                    {% if is_granted(role) and not granted %}
                        {% set granted = true %}
                    {% endif %}
                {% endfor %}
            {% elseif is_granted(item.role) %}
                {% set granted = true %}
            {% endif %}

            {% if granted %}
                <li>
                    <a href="{{ path(item.route, item.params is defined ? item.params : {}) }}" class="flex items-center p-2 text-gray-600 rounded-lg hover:bg-gray-600 hover:text-white group">
                        <i class="{{ icon.get(item.icon) }}"></i>
                        <span class="flex-1 ms-3 whitespace-nowrap">{{ item.label }}</span>
                    </a>
                </li>
            {% endif %}
        {% endfor %}
    </ul>

    {% if collapsible %}
        </div>
        <hr class="w-full h-1 bg-gray-400">
    {% else %}
        </div>
    {% endif %}
{% endif %}