{% load static %}
{% load filters %}

<section class="faq sect bg--gray1">
    <div class="container">

      <div class="d-flex justify-content-between align-items-center sectHead">
        <h2 class="h2">Часто задаваемые вопросы</h2>
      </div>

      <div class="row">
        <div class="col-lg-6">
          <div class="accordion" id="accordion_1">
            {% with questions|questions_order as slice_end %}
                {% for question in questions|slice:slice_end %}
                    <div class="accordion-item">
                    <h4 class="accordion-header h4" id="heading_1">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapse_{{ question.id }}" aria-expanded="true" aria-controls="collapse_1">
                        {{ question.title }}
                        </button>
                    </h4>
                    <div id="collapse_{{ question.id }}" class="accordion-collapse collapse" aria-labelledby="heading_1"
                        data-bs-parent="#accordion_{{ question.id }}">
                        <div class="accordion-body">
                        {{ question.content|safe }}
                        </div>
                    </div>
                    </div>
                {% endfor %}
            {% endwith %}
          </div>
        </div>

        <div class="col-lg-6">
          <div class="accordion" id="accordion_2">
            {% with questions|questions_order|add:":" as slice_start %}
                {% for question in questions|slice:slice_start%}
                    <div class="accordion-item">
                    <h4 class="accordion-header h4" id="headingOne">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne{{ question.id }}" aria-expanded="true" aria-controls="collapseOne">
                        {{ question.title }}
                        </button>
                    </h4>
                    <div id="collapseOne{{ question.id }}" class="accordion-collapse collapse" aria-labelledby="headingOne"
                        data-bs-parent="#accordion_{{ question.id }}">
                        <div class="accordion-body">
                            {{ question.content|safe }}
                        </div>
                    </div>
                    </div>
                {% endfor %}
            {% endwith %}
          </div>
        </div>
      </div>



    </div>
  </section>