{% extends 'ddm_core/base.html' %}

{% block page_title %}Questionnaire Setup{% endblock %}

{% block main_heading %}Questionnaire{% endblock %}

{% block sub_heading %}
  <p>
    The questionnaire appears after participants complete their data donation.
    If no questions are defined, participants skip directly to the debriefing page.
  </p>
  <p>
    Questions are organized into pages.
    All questions on a page display together, and participants navigate to the next page using a "Next" button (no back navigation between pages).
    Responses are submitted only when the questionnaire is complete—partial responses are not currently saved.
  </p>
{% endblock sub_heading %}

{% block main_body %}

  <div class="mt-3">
    {% for page, page_questions in pages.items %}
      <div class="ddm-section-container ddm-section-collapsible">

        {% with page_number=page|stringformat:"s" n_questions=page_questions.count|stringformat:"s" %}
          {% with accordion_description="Questions: "|add:n_questions %}
            {% with content_include_path="ddm_questionnaire/_question_table.html" accordion_id="Page"|add:page_number title="Page "|add:page_number %}
              {% include "ddm_core/components/accordion_card.html" with questions=page_questions extra_classes="narrow-accordion" accordion_id=accordion_id accordion_title=title is_expanded=True %}
            {% endwith %}
          {% endwith %}
        {% endwith %}

      </div>
    {% endfor %}
  </div>

  <div class="pt-3">
    {% include "ddm_core/components/info_collapsible.html" with extra_classes="white" element_id="bp-questions-infobox" title="About General Questions and Blueprint-Related Questions" include_path="ddm_questionnaire/text_blocks/text_blueprint_questions.html" body="" %}
  </div>

  {% include "ddm_questionnaire/partials/modal_question_selection.html" %}

{% endblock main_body %}

{% block pre_footer %}

  <div class="form-controls">
    <div class="container">
      <div class="row justify-content-center align-items-center">

        <div class="col-6">
          <div><a href="{% url 'ddm_projects:detail' project_url_id %}"><i class="bi bi-arrow-left-short"></i> Back</a></div>
        </div>
        <div class="col-6 justify-content-end text-end">
          <button type="button" class="ddm-btn-base ddm-btn-green" data-bs-toggle="modal" data-bs-target="#questionPickerModal">Create new question</button>
        </div>
      </div>

    </div>
  </div>

{% endblock pre_footer %}