{% extends app_name|add:'/base.html' %}

{% block content %}
    <h1>Examinations</h1>
    
    {% if collection %}
        <h2>Collection: {{collection.name}}</h2>    
    {% endif %}
        

    <details class="help-text">
        <summary><i class="bi bi-info-circle"></i> Help</summary>
        <p>This page shows the currently active examinations (that you have access to manage).</p>

        <p>Exams that are active will be available for candidates to take.</p>

        <p>Once candidates have completed the exam (or subimitted some answers) they will immediately be able to view their answers on the platoform. They will not be able to see the correct answers (or their scores) until the exams results have been published.</p>

        <p>A users submitted answers will remain available to the user until the exam is archived. Once an exam is archived the user will no longer be able to view their submitted answers.</p>

        <p>Supervisors will have access to all exam results (including archived exams) for which they have access (when "results supervisor visible" is set to true or the user has shared their results).</p>
    </details>
    <div class="{{app_name}}">
        Active exams:<br/>
        <ul class="exam-list exam-list-active">
            {% for exam in exams %}
                {% if exam.active %}
                    <li class="exam-item">
                        <a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam}}</a>
                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col-half">Mark</a>{% endif %}
                        <span class="flex-col">
                            <a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}">Candidates</a> <span class="candidate-counts">[<span title="Number of active CID users">
                                {{exam.valid_cid_users.count}}
                            </span> / <span title="Number of active User users">{{exam.valid_user_users.count}}]</span></span>
                        </span>
                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col-half">Scores</a>
                        <input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
                        <label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
                        <input type="checkbox" id="published-{{exam.pk}}" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
                        <label for="published-{{exam.pk}}" class="flex-col icon-container published-icon" title="Click to toggle published state">Results Published</label>
                        <a href="{% url app_name|add:':exam_update' pk=exam.pk %}" class="flex-shrink exam-list-edit-button"><i class="bi bi-pencil-square"></i></a>
                            <input type="checkbox" id="archived-{{exam.pk}}" class="exam-archived-switch" data-posturl="{% url app_name|add:':exam_toggle_archived' pk=exam.pk %}" {% if exam.archive %}checked{% endif %}>
                            <label for="archived-{{exam.pk}}" class="flex-shrink icon-archive archived-icon" title="Click to toggle archived state"><i class="bi bi-archive"></i></label>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>

        Inactive exams:<br/>
        <ul class="exam-list exam-list-inactive">
            {% for exam in exams %}
                {% if not exam.active %}
                    <li class="exam-item">
                        <a href="{% url app_name|add:':exam_overview' pk=exam.pk %}" class="flex-col-2 exam-name">{{exam}}</a>
                        {% if marking %}<a href="{% url app_name|add:':mark_overview' pk=exam.pk %}" class="flex-col-half" title="Click to mark exam">Mark</a>{% endif %}
                        <span class="flex-col">
                            <a href="{% url app_name|add:':exam_cids' exam_id=exam.pk %}" title="Click to manage candidates">Candidates</a>
                            <span class="candidate-counts">
                                [<span title="Number of active CID users">{{exam.valid_cid_users.count}}</span>
                                /
                                <span title="Number of active User users">{{exam.valid_user_users.count}}]

                                </span>
                            </span>
                        </span>
                        <a href="{% url app_name|add:':exam_scores_all' pk=exam.pk %}" class="flex-col-half">Scores</a>
                        <input type="checkbox" id="active-{{exam.pk}}" class="exam-active-switch" data-posturl="{% url app_name|add:':exam_toggle_active' pk=exam.pk %}" {% if exam.active %}checked{% endif %}>
                        <label for="active-{{exam.pk}}" class="flex-col icon-container active-icon" title="Click to toggle active state">Exam Active</label>
                        <input type="checkbox" id="{{exam.pk}}-pub" class="exam-publish-results-switch" data-posturl="{% url app_name|add:':exam_toggle_results_published' pk=exam.pk %}" {% if exam.publish_results %}checked{% endif %}>
                        <label for="{{exam.pk}}-pub" class="flex-col icon-container published-icon">Results Published</label>
                        <a href="{% url app_name|add:':exam_update' pk=exam.pk %}" class="flex-shrink exam-list-edit-button" title="Click to edit exam"><i class="bi bi-pencil-square"></i></a>
                        <input type="checkbox" id="archived-{{exam.pk}}" class="exam-archived-switch" data-posturl="{% url app_name|add:':exam_toggle_archived' pk=exam.pk %}" {% if exam.archive %}checked{% endif %}>
                        <label for="archived-{{exam.pk}}" class="flex-shrink icon-archive archived-icon" title="Click to toggle archived state"><i class="bi bi-archive"></i></label>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>


        {% if view_all %}
            <a href="{% url app_name|add:':exam_list' %}" >Hide archived</a>
        {% else %}
            <a href="{% url app_name|add:':exam_list_all' %}" title="Show all exams (including archived)">View all</a>
        {% endif %}
    </div>
    {% include 'exam_overview_js.html' %}

    <style>
        .candidate-counts {
            font-size: small;
            opacity: 50%;
        }

        .exam-list li:hover .candidate-counts {
            opacity: 100%;
            color: purple;
        }

        .published-icon, .active-icon {
            border: 1px dotted gray;
            opacity: 20%;
            border-radius: 4px;
            display: inline-block;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            text-align: center;
        }

        .archived-icon {
            color: darkgray;
            opacity: 20%;
            padding-inline-start: 10px;
        }

        .published-icon:hover, .active-icon:hover, .archived-icon:hover {
            opacity: 100%;
        }

        .exam-active-switch:checked + .active-icon {
            border: 1px solid green;
            color: green;
            opacity: 100%;
            display: inline-block;
        }

        .exam-publish-results-switch:checked + .published-icon {
            border: 1px solid purple;
            color: purple;
            opacity: 100%;
            display: inline-block;
        }

        .exam-archived-switch:checked + .archived-icon {
            color: darkblue;
            opacity: 100%;
        }

        .exam-publish-results-switch, .exam-active-switch, .exam-archived-switch {
            display: none;
        }

        .exam-list li:hover {
            border: 1px dashed gray;
            margin: -1px;
        }
        .exam-list-edit-button {
            color: darkgray!important;
            cursor: pointer;
            opacity: 20%;
            padding-inline-start: 10px;
        }
        .exam-list-edit-button:hover {
            opacity: 100%;
        }
        .flex-shrink {
            flex-shrink: 1;
        }
    </style>

{% endblock %}