<section class="container peer-grading-container">
    <div class="peer-grading" data-ajax-url="${ajax_url}" data-use-single-location="${use_single_location}">
        <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="#problem" data-location="${problem['location']}" class="problem-button">${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>
