{% extends 'base.html' %}

{% block content %}
    <div class="">
        <h2>CID: {{ cid }}</h2>
        <div class="alert alert-dark" role="alert">
            <details>
                <summary>Help</summary>
                <p>This page shows the exam(s) to which you have access.</p>
                <p>When an exam is available to take it will have a "Start" button next to it.</p>
                <p>Once you have submitted answers you will be able to view them from the Exam results section. (Please note: although your answers will be visible as soon as they are submitted, correct answers will only be available when the exam results have been published.)</p>
                <p>If you have not submitted any answer for an exam it will not appear in the Exam Results section below. In this case you can still review the pubilshed results by following the "Results Published" link in the assigend exams section.</p>
            </details>
        </div>
        <h3>Assigned exams</h3>
        <div id="exam-assigned">
            The following exams will be available to take when active.
            {% for exam_type, exams in available_exams %}
                {% if exams %}
                    <h4>{{exam_type|title}}</h4>
                    <ul class='{{exam_type|lower}}'>
                        {% for exam in exams  %}
                            <li class="exam" data-exam-id="{{exam.pk}}">{{exam}}
                                {% if exam.active %}
                                    <a href="{{exam.get_take_url}}?cid={{cid}}&passcode={{passcode}}" target="_blank" title="Click to take exam">
                                        <button class="small-url-button start-button">Start</button>
                                    </a>
                                {% endif %}
                                {% if exam.publish_results %}
                                    <a href= "{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}" title="Click to view results">
                                        <button class="small-url-button results-button">Results Published</button>
                                    </a>
                                {% endif %}
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            {% endfor %}
        </div>

        {% if all_exams %}
            <h3>Exam results</h3>
            <div id="exam-results">
                The following exam results been found. Click to view answers (and scores when the results are published):
                {% for exam_type, exams in all_exams %}
                    {% if exams %}
                        <h4>{{exam_type|title}}</h4>
                        <ul class='{{exam_type|lower}}'>
                            {% for exam in exams %}
                                <li class="exam" data-exam-id="{{exam.pk}}"><a href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}">{{exam}}</a> {% if exam.active %}[Active]{% endif %} {% if exam.publish_results %}[Results Published]{% endif %}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        {% if case_collections %}
            <div>
                <h3>Case Collection</h3>
                The following Case Collections have been found.
                <ul>
                    {% for collection in case_collections %}
                        <li><a href="{{collection.get_take_url}}?cid={{cid}}&passcode={{passcode}}">{{collection.name}}</a> {% if collection.active %}[Active]{% endif %} {% if collection.publish_results %}[Results Published]{% endif %}</li>

                    {% endfor %}
                </ul>
            </div>
        {% endif %}

    </div>
{% endblock %}