{# API #}
{%- set props = props | default([]) -%}
{%- set _id = props.id -%}
{%- set _elementType = (props.elementType is defined) ? props.elementType : 'h3' -%}
{%- set _for = props.for -%}
{%- set _isOpen = props.isOpen | default(false) -%}
{%- set _unsafeSlot = props.UNSAFE_slot | default(null) -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'Accordion__itemHeader' -%}
{%- set _toggleClassName = _spiritClassPrefix ~ 'Accordion__itemToggle' -%}
{%- set _sideClassName = _spiritClassPrefix ~ 'Accordion__itemSide' -%}
{%- set _slotClassName = _spiritClassPrefix ~ 'Accordion__itemSlot' -%}
{%- set _iconClassName = _spiritClassPrefix ~ 'Accordion__itemIcon' -%}

{# Attributes #}
{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
{%- set _dataTargetAttr = _for ? 'data-spirit-target="' ~ _for | escape('html_attr') ~ '"' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _ariaExpanded = _isOpen ? 'true' : 'false' -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
{%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}

<{{ _elementType }}
    {{ mainProps(_mainPropsWithoutId) }}
    {{ styleProp(_styleProps) }}
    {{ _idAttr | raw }}
    {{ classProp(_classNames) }}
>
    <button
        type="button"
        class="{{ _toggleClassName }}"
        data-spirit-toggle="collapse"
        {{ _dataTargetAttr | raw }}
        aria-expanded="{{ _ariaExpanded }}"
        aria-controls="{{ _for }}"
    >
        {% block content %}{% endblock %}
    </button>
    <span class="{{ _sideClassName }}">
        {% if _unsafeSlot %}
            <span class="{{ _slotClassName }}">
                {{ _unsafeSlot | raw }}
            </span>
        {% endif %}
        <span class="{{ _iconClassName }}">
            <Icon name="chevron-down" aria-hidden="true" />
        </span>
    </span>
</{{ _elementType }}>
