<%! from openedx.core.djangolib.markup import HTML %>
<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 in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
    <div class="${status.classname}" id="status_${id}">
    % endif

  <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"
      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">${HTML(msg)}</span>
  % endif
% if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
</div>
% endif
</section>
