<%inherit file="/main.html" />
<%block name="bodyclass">${course.css_class}</%block>
<%namespace name='static' file='/static_content.html'/>

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

<%block name="title"><title>${course.number} Peer Grading</title></%block>

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

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

<section class="container">
    <div class="peer-grading" data-ajax_url="${ajax_url}">
        <div class="error-container">${error_text}</div>
        <h1>Peer Grading</h1>
        <h2>Instructions</h2>
        <p>Here are a list of problems that need to be peer graded for this course.</p>
        % if success:
            % if len(problem_list) == 0:
            <div class="message-container">
                Nothing to grade!
            </div>
            %else:
            <div class="problem-list-container">
                <table class="problem-list">
                    <tr>
                        <th>Problem Name</th>
                        <th>Graded</th>
                        <th>Available</th>
                        <th>Required</th>
                        <th>Progress</th>
                    </tr>
                %for problem in problem_list:
                <tr data-graded="${problem['num_graded']}" data-required="${problem['num_required']}">
                    <td class="problem-name">
                        <a href="${ajax_url}problem?location=${problem['location']}">${problem['problem_name']}</a>
                    </td>
                    <td>
                        ${problem['num_graded']}
                    </td>
                    <td>
                        ${problem['num_pending']}
                    </td>
                    <td>
                        ${problem['num_required']}
                    </td>
                    <td>
                        <div class="progress-bar">
                        </div>
                    </td>
                </tr>
                %endfor
                </table>
            </div>
            %endif
        %endif
    </div>
</section>