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

{% block content %}
    <h1>Examinations</h1>
    <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 %}