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

<c-vars mode="single"
        animate="False"
        collapsible="False"
        disabled="False"
        orientation="vertical"
        default_value=""
        default_values=""
        value=""
        values=""
        loop="True"
        icon_position="trailing"
        heading_as="h3"
        class="" />
{% ui_class "ui.accordion" "root" orientation=orientation class=class as root_class %}
<div x-data="UiAccordion"
     x-bind="root"
     data-ui-accordion
     data-mode="{{ mode }}"
     {% if animate|ui_bool %}data-animate{% endif %}
     {% if collapsible|ui_bool %}data-collapsible{% endif %}
     {% if disabled|ui_bool %}data-disabled{% endif %}
     data-orientation="{{ orientation }}"
     data-default-value="{{ default_value }}"
     data-default-values="{{ default_values }}"
     data-value="{{ value }}"
     data-values="{{ values }}"
     data-loop="{{ loop }}"
     data-icon-position="{{ icon_position }}"
     data-heading-as="{{ heading_as }}"
     data-class="{{ class }}"
     {% if animate|ui_bool and "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="$ui.motion($transition).resize({ measure: '[data-ui-accordion-content-inner]', from: 'collapsed', to: 'content', opacity: [0, 1] }).role('resize').play()"{% endif %}
     {% if animate|ui_bool and "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="$ui.motion($transition).resize({ measure: '[data-ui-accordion-content-inner]', from: 'content', to: 'collapsed', opacity: [1, 0] }).role('resize').play()"{% endif %}
     class="{{ root_class }}"
     {{ attrs }}>
    {{ slot }}
</div>