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

{% load static %}

{% block page_title %}Create {{ question_type }}{% endblock page_title %}

{% block main_heading %}Create New {{ question_type }}{% endblock main_heading %}

{% block submit_label %}Create Question{% endblock submit_label %}

{% block main_form %}
  <form method='post'>
    {% csrf_token %}
    {{ form.media }}

    {# General Settings #}
    {% with content_include_path="ddm_questionnaire/form_sections/general_settings.html" %}
      {% with accordion_description="" %}
        {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="GeneralSettings" accordion_title="General Settings" is_expanded=True %}
      {% endwith %}
    {% endwith %}

    {# Display Options #}
    {% if question_type == "Open Question"  %}
      {% with content_include_path="ddm_questionnaire/form_sections/display_settings.html" %}
        {% with accordion_description="How the question is displayed to participants" %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="DisplaySettings" accordion_title="Display Settings" is_expanded=True %}
        {% endwith %}
      {% endwith %}
    {% endif %}

    {# Input Settings #}
    {% if question_type != "Text Block"  %}
      {% with content_include_path="ddm_questionnaire/form_sections/input_settings.html" %}
        {% with accordion_description="Configure input restrictions" %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="InputSettings" accordion_title="Input Settings" is_expanded=True %}
        {% endwith %}
      {% endwith %}
    {% endif %}

    {# Item Configuration #}
    {% if question_type != "Text Block" and question_type != "single_choice"  %}
      {% with content_include_path="ddm_questionnaire/form_sections/item_configuration.html" %}
        {% with accordion_description="You can configure the question items once you have created the Question." %}
          {% include "ddm_core/components/accordion_card.html" with extra_classes="mb-4" accordion_id="QuestionItemsConfig" accordion_title="Question Items" is_expanded=False is_disabled=True %}
        {% endwith %}
      {% endwith %}
    {% endif %}

    <div class="ddm-btn-group">
      <div>{# Spacing element #}</div>
      <div class="inner-btn-group">
        <div><a class="ddm-btn-base ddm-btn-secondary" href="{% url 'ddm_questionnaire:overview' project_url_id %}">Cancel</a></div>
        <div><input class="ddm-btn-base ddm-btn-green" type="submit" value="Create Question"></div>
      </div>
    </div>

  </form>
{% endblock main_form %}

{% block breadcrumbs %}
  <a href="{% url 'ddm_projects:list' %}">Projects</a><i class="bi bi-chevron-right"></i>
  <a href="{% url 'ddm_projects:detail' project_url_id %}">"{{ project.name|truncatechars:15 }}" Project</a><i class="bi bi-chevron-right"></i>
  <a href="{% url 'ddm_questionnaire:overview' project_url_id %}">Questionnaire</a><i class="bi bi-chevron-right"></i>
  Create Question
{% endblock breadcrumbs %}

{% block scripts %}
  {{ block.super }}
  <script src="{% static 'ddm_datadonation/js/accordion-form-error-indicator.js' %}"></script>
{% endblock scripts %}