<section id="editamoleculeinput_{{ id }}" class="editamoleculeinput">
    <div class="script_placeholder" data-src="{{ applet_loader }}" />
    {% if status == 'unsubmitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        <div class="{{ status.classname }}">
        {% endif %}
        <div id="applet_{{ id }}"
             class="applet"
             data-molfile-src="{{ file }}"
             style="display:block;
                    width:500px;
                    height:400px"></div>
        <br />
        <input type="hidden"
               name="input_{{ id }}"
               id="input_{{ id }}"
               aria-describedby="answer_{{ id }}"
               value="{{ value }}" />
        <button id="reset_{{ id }}" class="reset">Reset</button>
        <p id="answer_{{ id }}" class="answer"></p>
        <p class="indicator-container" aria-describedby="input_{{ id }}">
            {% include "status_span.html" with status=status status_id=id %}
        </p>
        <div class="error_message"
             style="padding: 5px 5px 5px 5px;
                    background-color:#FA6666;
                    height:60px;
                    width:400px;
                    display: none"></div>
        {% if status == 'unsubmitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        </div>
    {% endif %}
</section>
