<%! from django.utils.translation import ugettext as _ %>
<%inherit file="/main.html" />
<%block name="bodyclass">${course.css_class}</%block>
<%namespace name='static' file='/static_content.html'/>

<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
</%block>

<%block name="title"><title>${_("{course_number} Staff Grading").format(course_number=course.display_number_with_default) | h}</title></%block>

<%include file="/courseware/course_navigation.html" args="active_page='staff_grading'" />

<%block name="js_extra">
  <%static:js group='staff_grading'/>
</%block>

<section class="container">

<div class="staff-grading" data-ajax_url="${ajax_url}">
<h1>${_("Staff grading")}</h1>
<div class="breadcrumbs"></div>
<div class="error-container"></div>
<br>
<div style="color:red;">
    <b>
        ${_("We're sorry, some student responses have been temporarily "
            "hidden. We appreciate your patience as we work hard "
            "to restore their visibility. Rest assured, no student "
            "data has been lost.")}
    </b>
</div>
<br>
<hr>

<div class="message-container"></div>

<!-- Problem List View -->
<section class="problem-list-container">
  <h2>${_("Instructions")}</h2>
  <div class="instructions">
    <p>${_("This is the list of problems that currently need to be graded in order to train AI grading and create calibration essays for peer grading. Each problem needs to be treated separately, and we have indicated the number of student submissions that need to be graded.  You can grade more than the minimum required number of submissions--this will improve the accuracy of AI grading, though with diminishing returns. You can see the current accuracy of AI grading in the problem view.")}</p>
  </div>

  <h2>${_("Problem List")}</h2>
      <table class="problem-list">
      </table>
</section>

<!-- Grading View -->

<section class="prompt-wrapper">
    <div class="grading-message"></div>
  <h2 class="prompt-name">
  </h2>
  <div class="meta-info-wrapper">
      <div class="problem-meta-info-container">
      </div>
      <div class="ml-error-info-container">
      </div>
      <div class="checkout-warning">
          <p>${_("Please note that when you see a submission here, it has been temporarily removed from the grading pool.  The submission will return to the grading pool after 30 minutes without any grade being submitted.  Hitting the back button will result in a 30 minute wait to be able to grade this submission again.")}</p>
      </div>
  </div>
  <div class="prompt-information-container">
    <h3>${_('Prompt')} <a href="#" class="question-header">${_("(Hide)")}</a></h3>
    <div class="prompt-container">
    </div>
  </div>
</section>

<div class="action-button">
  <input type=button value="${_("Submit")}" class="action-button" name="show" />
</div>

<section class="grading-wrapper">
  <div class="grading-container">
    <div class="submission-wrapper">
      <h3>${_("Student Response")}</h3>
    <div class="submission-container">
    </div>
  </div>
  <div class="evaluation">
    <p class="score-selection-container">
    </p>
    <p class="grade-selection-container">
    </p>
    <h3>${_("Written Feedback")}</h3>
    <textarea name="feedback" placeholder="${_("Feedback for student (optional)")}" class="feedback-area" cols="70" >
    </textarea>
    <p>
       ${_("Flag as inappropriate content for later review")} <input class="flag-checkbox" type="checkbox" />
    </p>
  </div>
  <div class="submission">
    <input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
    <input type="button" value="${_("Skip")}" class="skip-button" name="skip"/>
  </div>

  </div>
</section>
</div>

</section>
