{{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="{{=URL('static', 'dashboard-charts.js')}}"></script>

<div id="dashboard">
    {{ import six }}
    <h1>{{=course.course_name}} <span class="dash-title-description">Instructor Dashboard</span></h1>
    <h3>{{=exercise_label}}</h3>
    <div>
        <div style="float:right;"><a href="">Go to exercise &raquo;</a></div>
    </div>

    <div class="col-md-7">
        <div class="dash-section">
            <div class="dash-section-header">
                Attempts
            </div>
            <div class="dash-section-content">
                <div id="chart-exercise-attempts"></div>
            </div>
            <script type="text/javascript">
                DashboardCharts.exerciseAttempts({{response.write(attempt_histogram,escape=False)}});
            </script>
        </div>
        <div class="dash-section">
            <div class="dash-section-header">
                Responses
            </div>
            <div class="dash-section-content">
                <table>
                    <thead>
                        <tr>
                            <td width="300px">Response</td>
                            <td width="100px">Frequency</td>
                        </tr>
                    </thead>
                    <tbody>
                        {{ for answer, frequency in six.iteritems(response_frequency):}}
                            <tr>
                                <td>{{=answer}}</td>
                                <td>{{=frequency}}</td>
                            </td>
                        {{pass}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="dash-section">
            <div class="dash-section-header">
                Responses by Student
            </div>
            <div class="dash-section-content">
                <table>
                    <thead>
                        <tr>
                            <td rowspan="2" width="150px">Student</td>
                            <td colspan="4">Responses</td>
                        </tr>
                        <tr>
                            <td width="75">1st</td>
                            <td width="75">2nd</td>
                            <td width="75">3rd</td>
                            <td width="75">4th</td>
                        </tr>
                    </thead>
                    {{ for answer in answers: }}
                        <tr>
                            <td><a href="{{=URL('studentreport')}}?id={{=answer['username']}}">{{=answer["user"]}}</a></td>
                            <td>{{=answer["answers"][0]}}</td>
                            <td>{{=answer["answers"][1]}}</td>
                            <td>{{=answer["answers"][2]}}</td>
                            <td>{{=answer["answers"][3]}}</td>
                        </tr>
                    {{ pass }}
                </table>
                <div id="questionpreview"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            preview_question_id("{{=exercise_label}}", "questionpreview");
        });
    </script>
</div>

{{ end }}