{% load static %}
<section id="inputtype_{{ id }}" class="capa_inputtype">
    <div class="crystalography_problem"
         style="width:{{ width }};
                height:{{ height }}"></div>
    <div class="input_lattice">
        Lattice:
        <select></select>
    </div>
    <div class="script_placeholder" data-src="{% static 'js/raphael.js' %}"></div>
    <div class="script_placeholder" data-src="{% static 'js/sylvester.js' %}"></div>
    <div class="script_placeholder"
         data-src="{% static 'js/crystallography.js' %}"></div>
    {% if status == 'unsubmitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        <div class="status {{ status.classname }}" id="status_{{ id }}">
        {% endif %}
        <input type="text"
               name="input_{{ id }}"
               aria-describedby="answer_{{ id }}"
               id="input_{{ id }}"
               value="{{ value }}"
               style="display:none" />
        {% include "status_span.html" with status=status status_id=id %}
        <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 %}
</section>
