{% load lbr_tags %}
<c-vars type="link" title="" href open />
{% lbr_props "menu.item" attrs=attrs type=type open=open as rx %}

{% if type == "title" %}
    <li class="{{ rx.classes }}">
        {% if slot %}{{ slot }}{% else %}{{ title }}{% endif %}
    </li>

{% elif type == "submenu-details" %}
    <li class="{{ rx.classes }}">
        <details {% if open %}open{% endif %}>
            {% if titleSlot %}
                {{ titleSlot }}
            {% else %}
                <summary>{{ title|default:"Submenu" }}</summary>
            {% endif %}
            <ul class="menu-dropdown">{{ slot }}</ul>
        </details>
    </li>

{% elif type == "submenu-toggle" %}
    <li class="{{ rx.classes }}">
        {% if titleSlot %}
            {{ titleSlot }}
        {% else %}
            <a {{ rx.attrs }}>{{ title|default:"Submenu" }}</a>
        {% endif %}
        <ul class="menu-dropdown {% if open %}menu-dropdown-show{% endif %}">{{ slot }}</ul>
    </li>

{% else %}
    <li class="{{ rx.classes }}">
        <a {% if href %}href="{{ href }}"{% endif %} {{ rx.attrs }}>
            {% if slot %}{{ slot }}{% else %}{{ title }}{% endif %}
        </a>
    </li>
{% endif %}