{% extends "elearning.html" %}

{% load staticfiles %}

{% block headtitle %}Exam Review - {{ course }} - {{ block.super }}{% endblock %}

{% block headstyle %}
<link rel="stylesheet" type="text/css" href="{% static 'js/libs/jquery.countdown/jquery.countdown.css' %}">
{% endblock %}

{% block content %}
    <div class="row">
        <div class="span6">
            <ul class="breadcrumb">
                <li><a href="{% url 'learner_dashboard' %}">Dashboard</a> <span class="divider">/</span></li>
                <li><a href="{% url 'learner_course' course.slug %}">{{ course }}</a> <span class="divider">/</span></li>
                <li class="active">{{ course }} Exam Review</li>
            </ul>
        </div>
        <div class="span6">
            <div class="pull-right"><div id="timer">45:00</div></div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <div class="progress progress-striped">
                <div class="bar" style="width: {{ complete_percentage }}%;"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="span12">
            <h1>Review Your Answers</h1>
            <br />
            <p>Please review your answers below. To change an answer, click on the blue circle.</p>
            <p>When you are happy with your answers, submit your exam at the bottom of the page.</p>
            <br />

            {% for submission in submissions %}
                <table class="table">
                    <tr>
                        <td width="40%">Q{{ forloop.counter }}. {{ submission.exam_question.question|safe }}</td>
                        <td width="40%">
                            <p>You answered:</p>
                            <p><strong>{{ submission.display_answer }}</strong></p>
                        </td>
                        <td width="20%"><a href="{% url 'exam' course.slug %}?question={{ forloop.counter }}" title="{{ submission.question }}"><img src="{% static 'img/review_question.png' %}" alt="Review answer" /></a></td>
                    </tr>
                </table>
            {% endfor %}
            <br />
            <div class="pull-right">
                <a href="{% url 'submit_exam' course.slug %}" title="Submit Your Answers" class="btn btn-primary btn-large">Submit Your Answers <i class="icon-white icon-chevron-right"></i></a>
            </div>
        </div>
    </div>

{% endblock %}

{% block footerscript %}
<script type="text/javascript" src="{% static 'js/libs/jquery.countdown/jquery.countdown.min.js' %}" ></script>
<script>
$('#timer').countdown({until: +{{timer}}, format: 'MS', compact: true});
</script>
{% endblock %}