{% if items %}
<div class="accordion" id="accordion{{ id }}">
  {% for key, item in items %}
    <div class="accordion-item">
      <h2 class="accordion-header" id="heading{{ id }}-{{ key }}">
          <button class="accordion-button{% if ((openfirst == true) and (key != 0)) or (openfirst == false) %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ id }}-{{ key }}" aria-expanded="{% if (openfirst == true) and (key == 0) %}true{% else %}false{% endif %}" aria-controls="collapse{{ id }}-{{ key }}">
            <div class="open-close">
              <i class="fa fa-solid fa-plus"></i>
              <i class="fa fa-solid fa-minus"></i>
            </div>
            {{ item.title }}
          </button>
      </h2>

      <div id="collapse{{ id }}-{{ key }}" class="accordion-collapse collapse{% if (openfirst == true) and (key == 0) %} show{% endif %}" data-bs-parent="#accordion{{ id }}">
        <div class="card-body">
          {{ item.content }}
        </div>
      </div>
    </div>
  {% endfor %}
</div>
{% endif %}