<section class="container peer-grading-container">
    <div class="peer-grading" data-ajax-url="${ajax_url}" data-location="${problem_location}" data-use-single-location="${use_single_location}">
        <div class="error-container"></div>

        <section class="content-panel">
        <div class="instructions-panel">
            <div class="calibration-panel">
                <h3>Learning to Grade</h3>
            </div>
            <div class="grading-panel">
                <h3>Peer Grading</h3>
            </div>
        </div>

        <div class="prompt-wrapper">
            <h2>Prompt  <a href="#" class="question-header">(Hide)</a> </h2>
            <div class="prompt-information-container">
                <section>
                <div class="prompt-container">
                </div>
            </section>
            </div>

        </div>


    <section class="grading-wrapper">
    <h2>Student Response</h2>

    <div class="grading-container">
        <div class="submission-wrapper">
            <h3></h3>
            <div class="submission-container">
            </div>
            <input type="hidden" name="submission-key" value="" />
            <input type="hidden" name="essay-id" value="" />
        </div>
        <div class="evaluation">
          <p class="rubric-selection-container"></p>
          <p class="score-selection-container">
          </p>
          <h3>Written Feedback</h3>
          <p>Please include some written feedback as well.</p>
          <textarea name="feedback" placeholder="Feedback for student"
                    class="feedback-area" cols="70" ></textarea>
          <p class="flag-student-container">Flag this submission for review by course staff (use if the submission contains inappropriate content): <input type="checkbox" class="flag-checkbox" value="student_is_flagged"></p>
        </div>
          

        <div class="submission">
            <input type="button" value="Submit" class="submit-button" name="show"/>
        </div>

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

    </section>
    </section>
    <!-- Calibration feedback: Shown after a calibration is sent -->
    <section class="calibration-feedback">
    <h2>How did I do?</h2>
    <div class="calibration-feedback-wrapper">
    </div>
        <input type="button" class="calibration-feedback-button" value="Continue" name="calibration-feedback-button" />
    </section>

    <!-- Interstitial Page: Shown between calibration and grading steps -->
    <section class="interstitial-page">
        <h1>Ready to grade!</h1>
        <p> You have finished learning to grade, which means that you are now ready to start grading.</p>
        <input type="button" class="interstitial-page-button" value="Start Grading!" name="interstitial-page-button" />
    </section>

    <!-- Calibration Interstitial Page: Shown before calibration -->
    <section class="calibration-interstitial-page">
        <h1>Learning to grade</h1>
        <p> You have not yet finished learning to grade this problem.</p>
        <p> You will now be shown a series of instructor-scored essays, and will be asked to score them yourself.</p>
        <p> Once you can score the essays similarly to an instructor, you will be ready to grade your peers.</p>
        <input type="button" class="calibration-interstitial-page-button" value="Start learning to grade" name="calibration-interstitial-page-button" />
    </section>

    <input type="button" value="Go Back" class="action-button" name="back" />
    </div>
</section>
