{% load ui_classes ui_props %}

<c-vars gap="1" gap_x="0" gap_y="0" keep_open="False" loop="True" surface="+2" elevation="3" width="auto" min_width="auto" padding="auto" class="" />
{% ui_class "ui.menu" "menu" width=width minWidth=min_width class=class as menu_class %}
{% ui_class "ui.menu" "searchHeader" padding=padding as search_header_class %}
<div data-ui-menu
     x-bind="menu"
     data-state="closed"
     role="menu"
     popover="manual"
     tabindex="-1"
     hidden
     data-keep-open="{{ keep_open }}"
     data-loop="{{ loop }}"
     data-ui-surface="{{ surface }}"
     data-ui-elevation="{{ elevation }}"
     data-width="{{ width }}"
     data-min-width="{{ min_width }}"
     data-padding="{{ padding }}"
     data-gap="{{ gap }}" data-gap-x="{{ gap_x }}" data-gap-y="{{ gap_y }}"
     data-class="{{ class }}"
     class="{{ menu_class }}"
     {{ attrs }}>
    {% if search|ui_has_content %}<div data-ui-menu-search-header class="{{ search_header_class }}">{{ search }}</div>{% endif %}
    <c-ui.menu.content gap="{{ gap }}" gap_x="{{ gap_x }}" gap_y="{{ gap_y }}" padding="{{ padding }}">{{ slot }}</c-ui.menu.content>
</div>