{% trans_default_domain 'front_ec_international' %}

<div id="accordion-{{ faq.id }}">

    {% set isActive = true %}

    {% for question in faq.questions %}

        {% set i18n = question|i18n %}

        {% if i18n %}

            {% set title = i18n.title %}
            {% set titleForce = i18n.titleForce ? i18n.titleForce : 2 %}
            {% set titleAlignment = i18n.titleAlignment ? i18n.titleAlignment : 'text-left' %}
            {% set intro = i18n.introduction %}
            {% set introAlignment = i18n.introductionAlignment ? i18n.introductionAlignment : 'text-left' %}
            {% set body = i18n.body %}
            {% set bodyAlignment = i18n.bodyAlignment ? i18n.bodyAlignment : 'text-left' %}

            <div class="card">

                <div class="card-header" id="heading-{{ loop.index }}">
                    <h{{ titleForce }} class="title mb-0 {{ titleAlignment }}">
                        <button class="btn btn-link {% if not isActive %} collapsed{% endif %}"
                                data-toggle="collapse"
                                data-target="#collapse-{{ loop.index }}"
                                aria-expanded="{% if isActive %}true{% else %}false{% endif %}"
                                aria-controls="collapse-{{ loop.index }}">
                            {{ title|unescape|raw }}
                        </button>
                    </h{{ titleForce }}>
                </div>

                <div id="collapse-{{ loop.index }}"
                     class="collapse{% if isActive %} show{% endif %}"
                     aria-labelledby="heading-{{ loop.index }}"
                     data-parent="#accordion-{{ faq.id }}">

                    <div class="card-body">
                        {% if intro|striptags|length > 0 %}
                            <p class="introduction text-bold {{ introAlignment }}">{{ intro|unescape|raw|nl2br }}</p>
                        {% endif %}
                        {% if body|striptags|length > 0 %}
                            <p class="body {{ bodyAlignment }}">{{ body|unescape|raw }}</p>
                        {% endif %}
                    </div>

                </div>

            </div>

            {% set isActive = false %}

        {% endif %}

    {% endfor %}

</div>