{% extends "@Contao/content_element/_base.html.twig" %}
{% use "@Contao/component/_stylesheet.html.twig" %}

{% block content %}
    {% for element in elements %}
        {% block element %}
            {% block element_header %}
                {% set accordion_header_attributes = attrs()
                    .addClass('handorgel__header')
                    .mergeWith(accordion_header_attributes|default)
                %}
                <{{ element.header_tag }}{{ accordion_header_attributes }}>
                    {% set accordion_header_button_attributes = attrs()
                        .addClass('handorgel__header__button')
                        .set('type', 'button')
                        .mergeWith(accordion_header_button_attributes|default)
                    %}
                    <button{{ accordion_header_button_attributes }}>
                        {{- element.header|insert_tag_raw -}}
                    </button>
                </{{ element.header_tag }}>
            {% endblock %}
            {% block element_content %}
                {% set accordion_content_attributes = attrs()
                    .addClass('handorgel__content')
                    .set('data-open', element.is_open)
                    .mergeWith(accordion_content_attributes|default)
                %}
                <div{{ accordion_content_attributes }}>
                    {% set accordion_content_inner_attributes = attrs()
                        .addClass('handorgel__content__inner')
                        .mergeWith(accordion_content_inner_attributes|default)
                    %}
                    <div{{ accordion_content_inner_attributes }}>
                        {{ content_element(element.reference) }}
                    </div>
                </div>
            {% endblock %}
        {% endblock %}
    {% endfor %}
{% endblock %}

{% block script %}
    {% add "handorgel_js" to body %}
        {% set script_attributes = attrs()
            .setIfExists('nonce', csp_nonce('script-src'))
            .mergeWith(script_attributes|default)
        %}
        <script src="{{ asset('js/handorgel.min.js', 'contao-components/handorgel') }}"></script>
        <script{{ script_attributes }}>
            (function () {
                document.querySelectorAll('.content-accordion').forEach(el => {
                    new handorgel(el, {
                        {% block init_options %}
                            multiSelectable: false,
                            {# Put custom options here #}
                        {% endblock %}
                    });
                });
            })();
        </script>
    {% endadd %}
{% endblock %}

{% block style %}
    {% add "handorgel_css" to stylesheets %}
        {% with {file: handorgel_css_file|default(asset('css/handorgel.min.css', 'contao-components/handorgel'))} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}
{% endblock %}
