<% doinline = "inline" if inline else "" %>

<section id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline" >

    % if preprocessor is not None:
    <div class="text-input-dynamath_data" data-preprocessor="${preprocessor['class_name']}"/>
    <div class="script_placeholder" data-src="${preprocessor['script_src']}"/>
    % endif

    % if status == 'unsubmitted':
    <div class="unanswered ${doinline}" id="status_${id}">
    % elif status == 'correct':
    <div class="correct ${doinline}" id="status_${id}">
    % elif status == 'incorrect':
    <div class="incorrect ${doinline}" id="status_${id}">
    % elif status == 'incomplete':
    <div class="incorrect ${doinline}" id="status_${id}">
    % endif
    % if hidden:
      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
    % endif

  <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"
        % if do_math:
            class="math"
        % endif
        % if size:
            size="${size}"
        % endif
        % if hidden:
            style="display:none;"
        % endif
   />
   ${trailing_text | h}

      <p class="status" aria-describedby="input_${id}">
        % if status == 'unsubmitted':
        unanswered
        % elif status == 'correct':
        correct
        % elif status == 'incorrect':
        incorrect
        % elif status == 'incomplete':
        incomplete
        % endif
      </p>

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

      % if do_math:
      <div id="display_${id}" class="equation">`{::}`</div>
      <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">
      </textarea>

      % endif

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

  % if msg:
      <span class="message">${msg|n}</span>
  % endif

</section>
