<section id="textbox_${id}" class="textbox">
  <textarea rows="${rows}" cols="${cols}" name="input_${id}" id="input_${id}"
       % if hidden:
      	    style="display:none;"
       % endif
  >${value|h}</textarea>

  <span id="answer_${id}"></span>

  % if state == 'unsubmitted':
  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
  % elif state == 'correct':
  <span class="correct" id="status_${id}"></span>
  % elif state == 'incorrect':
  <span class="incorrect" id="status_${id}"></span>
  % elif state == 'incomplete':
  <span class="incorrect" id="status_${id}"></span>
  % endif
  % if hidden:
      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
  % endif
  <br/>
  <span class="debug">(${state})</span>
  <br/>
  <span class="message">${msg|n}</span>
  <br/>

  <br/>

  <script>
    // Note: We need to make the area follow the CodeMirror for this to work.
    $(function(){
      var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), {
        % if linenumbers == 'true':
        lineNumbers: true,
        % endif
        mode: "${mode}",
        matchBrackets: true,
        lineWrapping: true,
        indentUnit: "${tabsize}",
        tabSize: "${tabsize}",
        smartIndent: false
      });
    });
  </script>
  <style type="text/css">
    .CodeMirror {
        border: 1px solid black;
        font-size: 14px;
        line-height: 18px;
        resize: vertical;
    }
  </style>
</section>
