{% load static %}
<div id="inputtype_{{ id }}" class="capa_inputtype">
    <div class="drag_and_drop_problem_div"
         id="drag_and_drop_div_{{ id }}"
         data-plain-id="{{ id }}"></div>
    <div class="drag_and_drop_problem_json"
         id="drag_and_drop_json_{{ id }}"
         style="display:none">{{ drag_and_drop_json|safe }}</div>
    <div class="script_placeholder"
         data-src="{% static 'js/capa/drag_and_drop.js' %}"></div>
    {% if status == 'unsubmitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        <div class="{{ status.classname }}" id="status_{{ id }}">
        {% endif %}
        <input type="text"
               name="input_{{ id }}"
               id="input_{{ id }}"
               aria-describedby="answer_{{ id }}"
               value="{{ value }}"
               style="display:none" />
        <p class="indicator-container drag-and-drop--status"
           aria-describedby="input_{{ id }}">{% include "status_span.html" with status=status status_id=id %}</p>
        <p id="answer_{{ id }}" class="answer"></p>
        {% if msg %}<span class="message" tabindex="-1">{{ msg|safe }}</span>{% endif %}
        {% if status == 'unsubmitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        </div>
    {% endif %}
</div>
