## The JS for this is defined in xqa_interface.html
${module_content}
%if location.category in ['problem','video','html','combinedopenended']:
%  if edit_link:
<div>
    <a href="${edit_link}">Edit</a>
    % if xqa_key:
        / <a href="#${element_id}_xqa-modal" onclick="javascript:getlog('${element_id}', {
        'location': '${location}',
        'xqa_key': '${xqa_key}',
        'category': '${category}',
        'user': '${user}'
     })" id="${element_id}_xqa_log">QA</a>
    % endif
</div>
%  endif
<div><a href="#${element_id}_debug" id="${element_id}_trig">Staff Debug Info</a></div>

%  if settings.MITX_FEATURES.get('ENABLE_STUDENT_HISTORY_VIEW') and \
      location.category == 'problem':
<div><a href="#${element_id}_history" id="${element_id}_history_trig">Submission history</a></div>
%  endif

<section id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" >
  <div class="inner-wrapper">
    <header>
      <h2>edX Content Quality Assessment</h2>
    </header>

    <form id="${element_id}_xqa_form" class="xqa_form">
      <label>Comment</label>
      <input id="${element_id}_xqa_entry" type="text" placeholder="comment">
      <label>Tag</label>
      <span style="color:black;vertical-align: -10pt">Optional tag (eg "done" or "broken"):&nbsp;       </span>
      <input id="${element_id}_xqa_tag" type="text" placeholder="tag" style="width:80px;display:inline">
      <div class="submit">
        <button name="submit" type="submit">Add comment</button>
      </div>
      <hr>
      <div id="${element_id}_xqa_log_data"></div>
    </form>

  </div>
</section>

<section class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto;" >
  <div class="inner-wrapper" style="color:black">
    <header>
      <h2>Staff Debug</h2>
    </header>
    <div class="staff_info" style="display:block">
is_released = ${is_released}
location = ${location | h}
<table>
  <tr><th>Module Fields</th></tr>
  %for name, field in fields:
  <tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr>
  %endfor
</table>
<table>
  <tr><th>edX Fields</th></tr>
  %for name, field in lms_fields:
  <tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr>
  %endfor
</table>
<table>
  <tr><th>XML attributes</th></tr>
  %for name, field in xml_attributes.items():
  <tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr>
  %endfor
</table>
category = ${category | h}
    </div>
    %if render_histogram:
    <div id="histogram_${element_id}" class="histogram" data-histogram="${histogram}"></div>
    %endif
  </div>
</section>

<section class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" >
  <div class="inner-wrapper" style="color:black">
    <header>
      <h2>Submission History Viewer</h2>
    </header>
    <form id="${element_id}_history_form">
      <label for="${element_id}_history_student_username">User:</label>
      <input id="${element_id}_history_student_username" type="text" placeholder=""/>
      <input type="hidden" id="${element_id}_history_location" value="${location}"/>
      <div class="submit">
        <button name="submit" type="submit">View History</button>
      </div>
    </form>

    <div id="${element_id}_history_text" class="staff_info" style="display:block">
    </div>
  </div>
</section>

<div id="${element_id}_setup"></div>

<script type="text/javascript">
// assumes courseware.html's loaded this method.
$(function () {
    setup_debug('${element_id}',
        %if edit_link:
        '${edit_link}',
        %else:
        null,
        %endif
        {
            'location': '${location}',
            'xqa_key': '${xqa_key}',
            'category': '${category}',
            'user': '${user}'
        }
    );
});
</script>
%endif