{% load ui_classes ui_props %}

<c-vars as="button"
        variant="default"
        color="neutral"
        type="button"
        disabled="False"
        keep_open=""
        icon=""
        icon_trailing=""
        icon_variant="outline"
        kbd=""
        suffix=""
        class="" />
{% ui_class "ui.menu" "item" variant=variant color=color class=class as item_class %}
{% ui_class "ui.menu" "itemIcon" position="leading" as leading_icon_class %}
{% ui_class "ui.menu" "itemIcon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.menu" "itemLabel" as label_class %}
{% ui_class "ui.menu" "itemMeta" as meta_class %}

{% partialdef menu_item_content %}
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     class="{{ leading_icon_class }}"
                     data-ui-menu-item-icon
                     data-icon="{{ icon }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
    <c-ui.text as="span" size="2" color="inherit" truncate="True" class="{{ label_class }}">
        {{ slot }}
    </c-ui.text>
    {% if suffix %}
        <c-ui.text as="span" size="1" color="inherit" class="{{ meta_class }}">
            {{ suffix }}
        </c-ui.text>
    {% endif %}
    {% if kbd %}
        <c-ui.text as="kbd" size="1" color="inherit" class="{{ meta_class }}">
            {{ kbd }}
        </c-ui.text>
    {% endif %}
    {% if icon_trailing %}
        <c-component is="icons.{{ icon_trailing }}"
                     class="{{ trailing_icon_class }}"
                     data-ui-menu-item-icon="trailing"
                     data-icon="{{ icon_trailing }}"
                     data-icon-variant="{{ icon_variant }}"
                     aria-hidden="true" />
    {% endif %}
{% endpartialdef %}

{% if as == "a" %}
    <a role="menuitem"
       data-ui-menu-item
       data-ui-option-recipe
       data-ui-interactive
       data-variant="{{ variant }}"
       data-color="{{ color }}"
       {% if disabled|ui_bool %}data-disabled="true" aria-disabled="true" tabindex="-1"{% endif %}
       data-keep-open="{{ keep_open }}"
       data-icon="{{ icon }}"
       data-icon-trailing="{{ icon_trailing }}"
       data-icon-variant="{{ icon_variant }}"
       data-class="{{ class }}"
       class="{{ item_class }}"
       {{ attrs }}>
        {% partial menu_item_content %}
    </a>
{% elif as == "div" %}
    <div role="menuitem"
         data-ui-menu-item
         data-ui-option-recipe
         data-ui-interactive
         data-variant="{{ variant }}"
         data-color="{{ color }}"
         {% if disabled|ui_bool %}data-disabled="true" aria-disabled="true" tabindex="-1"{% endif %}
         data-keep-open="{{ keep_open }}"
         data-icon="{{ icon }}"
         data-icon-trailing="{{ icon_trailing }}"
         data-icon-variant="{{ icon_variant }}"
         data-class="{{ class }}"
         class="{{ item_class }}"
         {{ attrs }}>
        {{ slot }}
    </div>
{% else %}
    <button type="{{ type }}"
            role="menuitem"
            data-ui-menu-item
            data-ui-option-recipe
            data-ui-interactive
            data-variant="{{ variant }}"
            data-color="{{ color }}"
            data-type="{{ type }}"
            {% if disabled|ui_bool %}data-disabled="true" disabled aria-disabled="true"{% endif %}
            data-keep-open="{{ keep_open }}"
            data-icon="{{ icon }}"
            data-icon-trailing="{{ icon_trailing }}"
            data-icon-variant="{{ icon_variant }}"
            data-class="{{ class }}"
            class="{{ item_class }}"
            {{ attrs }}>
        {% partial menu_item_content %}
    </button>
{% endif %}