{% macro render(request, menu) %}
    {% for menu_item in menu %}
        {{ menu_item.render(request) }}
    {% endfor %}
{% endmacro %}

{% macro menu_item(request, menu_item, level=1) %}
    {% set is_active = menu_item.is_active(request) %}
    {% set default_classes = 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' %}
    {% set active_classes = 'bg-blue-100 text-blue-900' %}
    {% set style_classes = active_classes if is_active else default_classes %}
    {% set url = menu_item.url(request) %}

    <a
        href="{{ url }}"
        {% if menu_item.external %}target="_blank"{% endif %}
        class="group w-full flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md select-none active:text-blue-900 active:bg-blue-200 {{ style_classes }}">
        {% if menu_item.icon %}
            {{ icon(menu_item.icon) }}
        {% endif %}
        <span>{{ menu_item }}</span>
        {% if menu_item.external %}
            <span class="ml-auto">{{ icon('external-link') }}</span>
        {% endif %}
    </a>
{% endmacro %}

{% macro menu_group(request, menu) %}
    {% set is_open = menu.is_open(request) %}
    {% set style_classes = 'text-gray-600 hover:bg-gray-50 hover:text-gray-900' %}
    <nav x-data="{open: {{ 'true' if is_open else 'false' }} }">
        <div
            @click="open = !open"
            class="group flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md cursor-pointer select-none {{ style_classes }}">
            {% if menu.icon %}
                {{ icon(menu.icon) }}
            {% endif %}
            {{ menu }}

            {% if menu.collapsible %}
                <button class="ml-auto" type="button">
                    <template x-if="open">
                        {{ icon('chevron-up') }}
                    </template>
                    <template x-if="!open">
                        {{ icon('chevron-down') }}
                    </template>
                </button>
            {% endif %}
        </div>
        <div class="pl-5" x-show="open">
            {% for item in menu %}
                {{ menu_item(request, item, level=2) }}
            {% endfor %}
        </div>
    </nav>
{% endmacro %}