{% load ui_classes ui_props %}

<c-vars value=""
        heading=""
        open="False"
        disabled="False"
        icon_position="inherit"
        heading_as="inherit"
        class="" />
{% ui_class "ui.accordion" "item" class=class as item_class %}
<div data-ui-accordion-item
     data-value="{{ value }}"
     data-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
     {% if open|ui_bool %}data-open{% endif %}
     {% if disabled|ui_bool %}data-disabled{% endif %}
     data-icon-position="{{ icon_position }}"
     data-heading-as="{{ heading_as }}"
     data-class="{{ class }}"
     class="{{ item_class }}"
     {{ attrs }}>
    {% if heading %}
        {% if heading_as == "inherit" %}
            <c-ui.accordion.trigger icon_position="{{ icon_position }}" open="{{ open }}" disabled="{{ disabled }}">
                {{ heading }}
            </c-ui.accordion.trigger>
        {% else %}
            <c-ui.accordion.trigger as="{{ heading_as }}"
                                    icon_position="{{ icon_position }}"
                                    open="{{ open }}"
                                    disabled="{{ disabled }}">
                {{ heading }}
            </c-ui.accordion.trigger>
        {% endif %}
        <c-ui.accordion.content open="{{ open }}" disabled="{{ disabled }}">
            {{ slot }}
        </c-ui.accordion.content>
    {% else %}
        {{ slot }}
    {% endif %}
</div>