{% extends 'base.html' %}

{% block content %}
    <div class="container my-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="mb-0">CID: {{ cid }}</h2>
        </div>

        <div class="card mb-4">
            <div class="card-header">Help</div>
            <div class="card-body">
                <details>
                    <summary class="mb-2">Brief guide</summary>
                    <p class="mb-1">This page shows the exam(s) to which you have access.</p>
                    <p class="mb-1">When an exam is available to take it will have a "Start" button next to it.</p>
                    <p class="mb-1">Once you have submitted answers you will be able to view them from the Exam results section. Correct answers are visible only after results are published.</p>
                    <p class="mb-0">If you have not submitted any answer for an exam it will not appear in the Exam Results section below. You can review published results from the assigned exams section.</p>
                </details>
            </div>
        </div>

        <h3 class="mb-3">Assigned exams</h3>
        <p class="lead">The following exams will be available to take when active.</p>
        <div id="exam-assigned">
            {% for exam_type, exams in available_exams %}
                {% if exams %}
                    <div class="card mb-3">
                        <div class="card-header">{{ exam_type|title }}</div>
                        <ul class="list-group list-group-flush {{ exam_type|lower }}">
                            {% for exam in exams  %}
                                <li class="list-group-item d-flex justify-content-between align-items-center" data-exam-id="{{exam.pk}}">
                                    <div>
                                        {{ exam }}
                                        {% if exam.active %}
                                            <span class="badge bg-success ms-2">Active</span>
                                        {% endif %}
                                        {% if exam.publish_results %}
                                            <span class="badge bg-info text-dark ms-2">Results Published</span>
                                        {% endif %}
                                    </div>
                                    <div class="text-end">
                                        {% if exam.active %}
                                            <a href="{{exam.get_take_url}}?cid={{cid}}&passcode={{passcode}}&exam_mode=true" target="_blank" title="Click to take exam">
                                                <button class="btn btn-sm btn-primary me-2 start-button">Start</button>
                                            </a>
                                        {% endif %}
                                        {% if exam.publish_results %}
                                            <a class="btn btn-sm btn-outline-secondary" href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}" title="Click to view results">View Results</a>
                                        {% endif %}
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        {% if all_exams %}
            <h3 class="mt-4 mb-3">Exam results</h3>
            <p>The following exam results have been found. Click to view answers (and scores when published):</p>
            <div id="exam-results">
                {% for exam_type, exams in all_exams %}
                    {% if exams %}
                        <div class="card mb-3">
                            <div class="card-header">{{ exam_type|title }}</div>
                            <ul class="list-group list-group-flush {{ exam_type|lower }}">
                                {% for exam in exams %}
                                    <li class="list-group-item d-flex justify-content-between align-items-center" data-exam-id="{{exam.pk}}">
                                        <a href="{% url exam_type|add:':exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}">{{ exam }}</a>
                                        <div>
                                            {% if exam.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
                                            {% if exam.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}

        {% if case_collections %}
            <div class="mt-4">
                <h3>Case Collections</h3>
                <p>The following Case Collections have been found.</p>
                <ul class="list-group">
                    {% for collection in case_collections %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <a href="{{collection.get_take_url}}?cid={{cid}}&passcode={{passcode}}">{{ collection.name }}</a>
                            <div>
                                {% if collection.active %}<span class="badge bg-success ms-2">Active</span>{% endif %}
                                {% if collection.publish_results %}<span class="badge bg-info text-dark ms-2">Results Published</span>{% endif %}
                            </div>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}

    </div>
{% endblock %}