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

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

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

{% block main_body %}

  <div>
    <p>
      An optional questionnaire can be defined that will be presented to participants after they have concluded the data donation. Questions in this questionnaire can either be <i>General Questions</i> or <i>associated to a File Blueprint</i>.
      If no questions are defined, participants will be directed to the debriefing page after they have concluded their data donation.
    </p>
  </div>

  <div>
    <table class="table">
      <tr class="lh-1 align-bottom">
        <th class="border-bottom-0">Questions</th>
        <th class="border-bottom-0"></th>
        <th class="border-bottom-0"></th>
        <th class="border-bottom-0"></th>
        <th class="border-bottom-0"></th>
      </tr>
      <tr class="lh-1 align-bottom border-bottom-dark">
        <th class="fs-08">Page</th>
        <th class="fs-08">Index</th>
        <th class="fs-08">Name</th>
        <th class="fs-08">Type</th>
        <th class="fs-08">Blueprint</th>
        <th></th>
      </tr>

      {% for question in questions %}
        <tr {% if forloop.last %}class="border-bottom-dark"{% endif %}>
          <td>{{ question.page }}</td>
          <td>{{ question.index }}</td>
          <td>{{ question.name }}</td>
          <td>{{ question.get_question_type_display }}</td>
          <td>{% if question.blueprint == None %}<span class='text-muted'>General Question</span>{% else %}{{ question.blueprint }}{% endif %}</td>
          <td> <a href="{% url 'ddm_questionnaire:edit' project_url_id question.question_type question.pk %}">Edit Question</a> | <a href="{% url 'ddm_questionnaire:delete' project_url_id question.question_type question.pk %}">Delete Question</a></td>
          {% empty %}
        <tr class="border-bottom-dark">
          <td>General Questions</td>
          <td colspan="4" class="text-muted">No general questions defined.</td>
        </tr>
      {% endfor %}

    </table>
  </div>

  <div>
  <button type="button" class="ddm-btn" data-bs-toggle="modal" data-bs-target="#exampleModal"><b>+</b>&nbsp;&nbsp;Create new question</button>
</div>

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

<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choose type of question:</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% for question_type in question_types %}
        {% if question_type.0 != 'generic' %}
        <p><a href="{% url 'ddm_questionnaire:create' project_url_id question_type.0 %}">{{ question_type.1 }}</a></p>
        {% endif %}
        {% empty %}
        <p>No question types defined.</p>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="ddm-btn" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="mt-3">
  <a href="{% url 'ddm_projects:detail' project_url_id %}">&#129040; Back</a>
</div>
{% endblock %}

{% block breadcrumbs %}
<a href="{% url 'ddm_projects:list' %}">Projects</a> /
<a href="{% url 'ddm_projects:detail' project_url_id %}">"{{ project.name|truncatechars:15 }}" Project</a> /
Questionnaire
{% endblock %}
