{# Partial: render questions and answers as HTML. #}

{% if casedetail.question_schema %}
  <div class="collection-question-block">
    <h4>Questions</h4>
    <dl class="row">
      {% for name, prop in casedetail.question_schema.properties.items %}
        <dt class="col-sm-4">{{ prop.title|default:name }}</dt>
        <dd class="col-sm-8">
          {% if prop.description %}
            <div class="mb-1 text-muted small">{{ prop.description }}</div>
          {% endif %}

          {% if prop.type == "string" and prop.enum %}
            <div class="mt-1 small text-muted">Options: {{ prop.enum|join:", " }}</div>
          {% else %}
            <div class="mt-1 small text-muted">Type: {{ prop.type }}</div>
          {% endif %}

          {# Safely fetch the stored/example answer using the project's `get_item` filter. #}
          {% if casedetail.question_answers %}
            {% with correct=casedetail.question_answers|get_item:name %}
              <div class="mt-2">
                <strong>Example / Correct:</strong>
                {% if correct %}
                  <span class="ms-2">{{ correct }}</span>
                {% else %}
                  <span class="text-muted ms-2">(no answer provided)</span>
                {% endif %}
              </div>
            {% endwith %}
          {% else %}
            <div class="mt-2"><strong>Example / Correct:</strong> <span class="text-muted ms-2">(no answer provided)</span></div>
          {% endif %}

          {# Optionally render and compare a user's answer passed as `user_answer` in the context #}
          {% if user_answer %}
            {% if user_answer|get_item:name %}
              {% with ua=user_answer|get_item:name %}
                {% with correct=casedetail.question_answers|get_item:name %}
                  <div class="mt-1">
                    <strong>Your answer:</strong>
                    <span class="ms-2 {% if ua == correct %}text-success{% else %}text-danger{% endif %}">{{ ua }}</span>
                    {% if ua == correct %}
                      <span class="badge bg-success ms-2">Correct</span>
                    {% else %}
                      <span class="badge bg-danger ms-2">Incorrect</span>
                    {% endif %}
                  </div>
                {% endwith %}
              {% endwith %}
            {% else %}
              <div class="mt-1"><strong>Your answer:</strong> <span class="text-muted ms-2">(no answer)</span></div>
            {% endif %}
          {% endif %}

        </dd>
      {% endfor %}
    </dl>
  </div>
{% else %}
  <div class="collection-question-block text-muted">No questions defined for this case.</div>
{% endif %}
