<section class="[ faq ]">
  {% if faq.items %}
  <div class="[ inner-wrapper ]">
    <h1 class="faq__heading">{{ faqHeading }}</h1>
    {{ content | safe }}
    <div class="accordion accordion-flush" id="accordionFlushExample">
      {% for item in faq.items %}
        <div class="accordion-item">
          <h3 class="accordion-header" id="flush-heading{{ loop.index }}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{ loop.index }}" aria-expanded="false" aria-controls="flush-collapse{{ loop.index }}">
              {{ item.q }}
            </button>
          </h3>
          <div id="flush-collapse{{ loop.index }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{ loop.index }}" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">
              {{ item.a | urlize | safe }}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}
</section>
