{% load ui_classes ui_props %}

<c-vars as="h3"
        icon="chevron__down"
        icon_position="inherit"
        open="False"
        disabled="False"
        orientation="vertical"
        class=""
        heading_class=""
        icon_class="" />
{% ui_class "ui.accordion" "heading" class=heading_class as heading_classes %}
{% ui_class "ui.accordion" "trigger" class=class as trigger_class %}
{% ui_class "ui.accordion" "triggerLabel" as label_class %}
{% ui_class "ui.accordion" "icon" class=icon_class as icon_classes %}
<c-ui.heading as="{{ as }}"
              color="inherit"
              class="{{ heading_classes }}"
              data-ui-accordion-heading
              data-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
              data-orientation="{{ orientation }}"
              {% if disabled|ui_bool %}data-disabled{% endif %}>
    <button type="button"
            data-ui-accordion-trigger
            data-state="{% if open|ui_bool %}open{% else %}closed{% endif %}"
            data-orientation="{{ orientation }}"
            data-icon-position="{{ icon_position }}"
            data-class="{{ class }}"
            aria-expanded="{% if open|ui_bool %}true{% else %}false{% endif %}"
            {% if disabled|ui_bool %}data-disabled aria-disabled="true" disabled{% endif %}
            class="{{ trigger_class }}"
            {{ attrs }}>
        <c-ui.text as="span"
                   size="sm"
                   color="inherit"
                   truncate
                   class="{{ label_class }}"
                   data-ui-accordion-trigger-label>
            {{ slot }}
        </c-ui.text>
        {% if icon %}
            <c-component is="icons.{{ icon }}"
                         class="{{ icon_classes }}"
                         data-ui-accordion-icon
                         data-icon="{{ icon }}"
                         aria-hidden="true" />
        {% endif %}
    </button>
</c-ui.heading>