{% if faqs is defined and faqs|length > 0 %}
<section class="faq-section my-5">
<div class="container">
<h2 class="mb-4">{{ 'Entities.FAQ.Label'| trans }}</h2>
<div class="accordion" id="faqAccordion">
{% for faq in faqs %}
<div class="accordion-item">
<h3 class="accordion-header" id="faqHead{{ loop.index }}">
<button class="accordion-button {% if not loop.first %}collapsed{% endif %}"
type="button"
data-bs-toggle="collapse"
data-bs-target="#faqBody{{ loop.index }}"
aria-expanded="{{ loop.first ? 'true' : 'false' }}">
{{ faq.question }}
</button>
</h3>
<div id="faqBody{{ loop.index }}"
class="accordion-collapse collapse {% if loop.first %}show{% endif %}"
data-bs-parent="#faqAccordion">
<div class="accordion-body">{{ faq.answer|raw }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{% for faq in faqs %}
{
"@type": "Question",
"name": {{ faq.question|json_encode|raw }},
"acceptedAnswer": {
"@type": "Answer",
"text": {{ faq.answer|striptags|json_encode|raw }}
}
}{% if not loop.last %},{% endif %}
{% endfor %}
]
}
</script>
</section>
{% endif %}