{% load static %}
<section id="inputtype_{{ id }}" class="capa_inputtype">
    <table>
        <tr>
            <td height='600'>
                <div id="vsepr_div_{{ id }}"
                     style="position:relative"
                     data-molecules="{{ molecules }}"
                     data-geometries="{{ geometries }}">
                    <canvas id="vsepr_canvas_{{ id }}" width="{{ width }}" height="{{ height }}">
                    </canvas>
                </div>
            </td>
            <td valign ='top'>
                <select class="molecule_select" id="molecule_select_{{ id }}" size="18"></select>
            </td>
        </tr>
    </table>
    <div class="script_placeholder"
         data-src="{% static 'js/vsepr/vsepr.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="status">
            <span class="sr">{{ status.display_name }}</span>
        </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 %}
</section>