{% extends 'ddm/admin/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>
  <h5>General Questions</h5>
    <p>General questions will be displayed to all participants after they have concluded the data donation.</p>
    <table class="table">
      <tr class="lh-1 align-bottom">
        <th class="border-bottom-0"></th>
        <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 style="width: 16%"></th>
        <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></th>
      </tr>

      {% for question in general_questions %}
        <tr {% if forloop.last %}class="border-bottom-dark"{% endif %}>
          {% if forloop.first %}
            <td rowspan="{{ general_questions|length }}"></td>
          {% endif %}
          <td>{{ question.page }}</td>
          <td>{{ question.index }}</td>
          <td>{{ question.name }}</td>
          <td>{{ question.get_question_type_display }}</td>
          <td> <a href="{% url 'question-edit' project_pk question.question_type question.pk %}">Edit Question</a> | <a href="{% url 'question-delete' project_pk 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 class="pt-5">
  <h5>Questions Associated to File Blueprints</h5>
  <p>
    Questions associated to a file blueprint will only be shown to those participants who have donated some data to the respective blueprint.
    Otherwise, they will be omitted.<br>
    In questions associated to a file blueprint, the donated data is available as a variable through which specific data points can be extracted from the donated data
    of a person and included in the question body (e.g., extract the last video from a person's watch history and ask questions related to this specific video).
  </p>
  <table class="table">
    <tr class="lh-1 align-bottom">
      <th class="border-bottom-0"></th>
      <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 style="width: 16%">Blueprint</th>
      <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></th>
    </tr>

    {% for blueprint in donation_blueprints %}
      {{ blueprint.file_uploader }}
      {% if blueprint.file_uploader is not None %}
        {% for question in blueprint.get_associated_questions %}
        <tr {% if forloop.last %}class="border-bottom-dark"{% endif %}>
          {% if forloop.first %}
          <td rowspan="{{ blueprint.get_associated_questions|length }}" class="border-bottom-dark">{{ blueprint.name }}</td>
          {% endif %}
          <td>{{ question.page }}</td>
          <td>{{ question.index }}</td>
          <td>{{ question.name }}</td>
          <td>{{ question.get_question_type_display }}</td>
          <td> <a href="{% url 'question-edit' project_pk question.question_type question.pk %}">Edit Question</a> | <a href="{% url 'question-delete' project_pk question.question_type question.pk %}">Delete Question</a></td>
          {% empty %}
          <tr class="border-bottom-dark">
          <td>{{ blueprint.name }}</td>
          <td colspan="4" class="text-muted">No associated questions.</td>
        </tr>
        {% endfor %}
      {% endif %}
    {% empty %}
    <tr class="border-bottom-dark">
      <td>No blueprints created yet.</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="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 'question-create' project_pk 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 'project-detail' project_pk %}">&#129040; Back</a>
</div>
{% endblock %}

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