<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='/static_content.html'/>

## The JS for this is defined in xqa_interface.html
${block_content}
%if location.category in ['problem','video','html','combinedopenended','graphical_slider_tool']:
%  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 aria-hidden="true" class="wrap-instructor-info">
  <a class="instructor-info-action" href="#${element_id}_debug" id="${element_id}_trig">${_("Staff Debug Info")}</a>

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

<section aria-hidden="true" id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" >
  <div class="inner-wrapper">
    <header>
      <h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</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 aria-hidden="true" class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto; display:none" >
  <div class="inner-wrapper" style="color:black">
    <header>
      <h2>${_('Staff Debug')}</h2>
    </header>

    <hr />
    <div class="staff_actions">
      <h3>${_('Actions')}</h3>
      <div>
        <label for="sd_fu_${location.name}">${_('Username')}:</label>
        <input type="text" id="sd_fu_${location.name}" placeholder="${user.username}"/>
      </div>
      <div>
        [
        <a href="#" id="staff-debug-reset" data-location="${location.name}">${_('Reset Student Attempts')}</a>
        |
        <a href="#" id="staff-debug-sdelete" data-location="${location.name}">${_('Delete Student State')}</a>
        |
        <a href="#" id="staff-debug-rescore" data-location="${location.name}">${_('Rescore Student Submission')}</a>
        
        ]
      </div>
      <div id="result_${location.name}"/>
    </div>

    <div class="staff_info" style="display:block">
is_released = ${is_released}
location = ${location | h}
<table summary="${_('Module Fields')}">
  <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>${_('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 aria-hidden="true" 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

