{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:dropdown" %}

<c-vars heading="" disabled="False" class="" panel_class="" />
{% ui_class "ui.menu" "submenu" as submenu_class %}
{% ui_class "ui.menu" "item" class=class as trigger_class %}
{% ui_class "ui.menu" "itemLabel" as label_class %}
{% ui_class "ui.menu" "itemIcon" position="trailing" as icon_class %}
{% ui_class "ui.menu" "menu" class=panel_class as panel_class_resolved %}

<div data-ui-menu-submenu data-state="closed" class="{{ submenu_class }}">
    <button type="button"
            role="menuitem"
            data-ui-menu-item
            data-ui-option-recipe
            data-ui-interactive
            data-ui-submenu-trigger
            aria-haspopup="menu"
            aria-expanded="false"
            tabindex="-1"
            {% if disabled|ui_bool %}disabled data-disabled="true" aria-disabled="true"{% endif %}
            data-class="{{ class }}"
            class="{{ trigger_class }}">
        <c-ui.text as="span" size="2" color="inherit" truncate="True" class="{{ label_class }}">
            {{ heading }}
        </c-ui.text>
        <c-component is="icons.chevron__right" class="{{ icon_class }}" aria-hidden="true" />
    </button>
    <div data-ui-menu
         data-ui-menu-submenu-panel
         data-state="closed"
         role="menu"
         popover="manual"
         tabindex="-1"
         hidden
         data-loop="true"
         data-ui-surface="+2"
         data-ui-elevation="3"
         data-class="{{ panel_class }}"
         class="{{ panel_class_resolved }}">
        {{ slot }}
    </div>
</div>