{% comment %}
    This page creates a submenu item. It expects an appropriate `item` as argument. 
    It also expects the global 'sorted_pages' argument. 
{% endcomment %}

{% unless item.menu_hidden %}
    {% assign base_folder = page.url | split: '/' %}

    <!-- if we are in the right folder, we are active -->
    {% if base_folder[1] == item.folder %}
        {% assign menu_active = true %}
    {% else %}
        {% assign menu_active = false %}
        {% for item in (item.items | where: "url", page.url) %}
            {% unless item.external %}
                {% assign menu_active = true %}
                <!-- active because {{item}} -->
            {% endunless %}
        {% endfor %}
    {% endif %}


    <!-- Find the current folder -->
    {% assign item_folder = item.folder %}

    <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
            <li class="bold">
                <a class="collapsible-header {% if menu_active %}active{% endif %}">
                    {% if item.menu_title %}
                        {{ item.menu_title }}
                    {% else %}
                        {{ item.title }}
                    {% endif %}
                </a>
                <div class="collapsible-body">
                    <ul>
                        <!-- If we have folders, iterate over them -->
                        {% if item.folder %}
                            {% for item in sorted_pages %}
                            
                                {% assign sub_components = item.url | split: '/' %}
                                {% if sub_components[1] == item_folder %}
                                    {% include menu_single.html %}
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                        <!-- if we have items, iterate over them -->
                        {% if item.items %}
                            {% for item in item.items %}
                                {% include menu_single.html %}
                            {% endfor %}
                        {% endif %}
                    </ul>
                </div>
            </li>
        </ul>
    </li>
{% endunless %}