{% extends 'layouts/base.html' %}
{% block title %}
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Question Details</h3>
                </div>
                <div class="panel-body">
                    <h5>Lecture: {{ question.lecture }}</h5>
                    <h5>Text: <blockquote><p>{{ question.text }}</p></blockquote></h5>
                    <h5>Correct Answer: {{ question.answer.correct_answer.text }}</h5>
                    <table class="table">
                        <thead>
                        <th>#</th>
                        <th>Answer Option</th>
                        </thead>
                        {% for option in question.answer.answer_options.all %}
                        <tbody>
                            <tr>
                                <td>{{ forloop.counter }}</td>
                                <td>{{ option }}</td>
                            </tr>
                        </tbody>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Response Summary</h3>
                </div>
                <div class="panel-body">
                    <h5>Response Ratio: X/Y </h5>
                    {% for stat in response_stats %}
                        {{ stat.0 }} {{ stat.1 }} <br>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Responses</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-responsive">
                        <thead>
                            <th>#</th>
                            <th>Student</th>
                            <th>Response</th>
                        </thead>
                        <tbody>
                        {% for response in responses %}
                            {% if response.is_correct %}
                            <tr class="success">
                            {% else %}
                                <tr class="danger">
                                {% endif %}
                                <td>{{ forloop.counter }}</td>
                                <td>{{ response.student.user.first_name }}, {{ response.student.user.last_name }}</td>
                                <td>{{ response.answer_option.id }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}