<%! from openedx.core.djangolib.markup import HTML %>
<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 in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', '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|h}" style="display:none;"/>

    <%include file="status_span.html" args="status=status, status_id=id"/>

    <p id="answer_${id}" class="answer"></p>

    % if msg:
        <span class="message" tabindex="-1">${HTML(msg)}</span>
    % endif

    % if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
        </div>
    % endif
</section>
