{% extends 'knp_menu.html.twig' %}

{% block list %}
    {% if item.hasChildren and options.depth is not same as(0) and item.displayChildren %}
        {% if item.level == 0 %}
            <div class="min-h-full flex grow flex-col gap-y-5 lg:border-r border-gray-200 bg-white md:pr-6">
                <nav class="flex flex-1 flex-col">
                    <ul role="list" class="space-y-1">
                        {{ block('children') }}
                    </ul>
                </nav>
            </div>
        {% else %}
            <ul class="{{ html_classes('mt-1 px-2', { 'hidden': not matcher.isCurrent(item) }) }}" {{ stimulus_target('sidebar-menu', 'submenu') }}>
                {{ block('children') }}
            </ul>
        {% endif %}
    {% endif %}
{% endblock %}

{% block item %}
    {% if item.displayed %}
        <li>
            {%- if item.hasChildren and item.displayChildren %}
                <div {{ stimulus_controller('sidebar-menu', {'expanded': matcher.isAncestor(item)}, {'closed': 'hidden', 'iconClosed': 'text-gray-400', 'iconExpanded': 'text-gray-500'}) }}>
            {%- endif %}
            {%- if item.uri is not empty %}
                {{ block('linkElement') }}
            {%- else %}
                {{ block('spanElement') }}
            {%- endif %}
            {{ block('list') }}
            {%- if item.hasChildren and item.displayChildren %}
                </div>
            {%- endif %}
        </li>
    {% endif %}
{% endblock %}

{% block linkElement %}
    {% import _self as knp_menu %}
    <a href="{{ item.uri }}"
       class="{{ html_classes('', {
        'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-700 hover:bg-gray-50': item.level == 1,
        'block rounded-md py-2 pr-2 pl-9 text-sm leading-6 text-gray-700 hover:bg-gray-50': item.level > 1,
        'bg-gray-50': matcher.isCurrent(item) or matcher.isAncestor(item)
        }) }}"
       {{ knp_menu.attributes(item.linkAttributes) }}>
        {{ block('label') }}
    </a>
{% endblock %}

{% block spanElement %}
    {% import _self as knp_menu %}
    {% if item.hasChildren %}
        <button type="button"
                {{ stimulus_action('sidebar-menu', 'toggleSubmenu') }}
                {{ stimulus_target('sidebar-menu', 'button') }}
                {{ knp_menu.attributes(item.linkAttributes) }}
                class="{{ html_classes('hover:bg-gray-50 flex items-center w-full text-left rounded-md p-2 gap-x-3 text-sm leading-6 font-semibold text-gray-700', { 'bg-gray-50': matcher.isAncestor(item) }) }}"
                aria-expanded="false">
            {{ block('label') }}
        </button>
    {% elseif item.extras.divider is defined %}
        <hr class="my-4 h-px bg-gray-200">
    {% else %}
        <div class="hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 text-sm leading-5 font-semibold text-gray-700"
             role="button">
            {{ block('label') }}
        </div>
    {% endif %}
{% endblock %}

{% block label %}
    {% if item.extras.icon is defined %}
        {{ icon(item.extras.icon, 'h-5 w-5 shrink-0 text-gray-400') }}
        <span class="flex-1">{{ item.label|raw }}</span>
    {% else %}
        {{ item.label|raw }}
    {% endif %}
{% endblock %}