{{extend 'admin/instructors.html'}}

{{ block tabcontent }}

<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/svg.jquery.js"></script>
<script type="text/javascript" src="https://kozea.github.io/pygal.js/javascripts/pygal-tooltips.js"></script>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'dashboard.css')}}"/>

<script src="../static/js/sorttable.js"></script>

<div id="dashboard">
    <h2 style="text-align:center;">{{=assignment['name']}}</h2>
    <h2>Report for {{=student[0]['first_name']}} {{=student[0]['last_name']}}</h2>
    <p>Click on the question name to display or update the grade for any question.</p>
    <div id="questions" class="col-md-12">
        <table class="sortable">
            <thead style="cursor: pointer;">
                <tr>
                    <td>Question</td>
                    <td>Student's Score</td>
                    <td>Points Possible</td>
                </tr>
            </thead>
            <tbody>
                {{for row in rows:}}
                    <tr>
                    {{for item in range(len(row)):}}
                        {{ if item == 0:}}
                            <td onclick="preview_question_id('{{=row[item]}}', 'question_viewer', '{{=student[0]['username']}}', true)"
                            class="gradeablerow">
                        {{ else: }}
                            <td>
                        {{ pass }}
                            {{=row[item]}}
                        </td>
                        {{if item == 1:}}
                            {{total += row[item] or 0}}
                        {{pass}}
                    {{pass}}
                    </tr>
                {{pass}}
            </tbody>
            <tfoot>
                <tr>
                    <td>Total</td>
                    <td>{{=total}}</td>
                    <td>{{=assignment['points']}}</td>
                </tr>
            </tfoot>
        </table>
    </div>

</div>
<p style="clear: both;"></p>
<div id="question_viewer">
</div>

{{end}}