{% include "generic/exam_candidate_headers.html" %}
<h3>Users</h3>
{% if groups %}
    Users from the following groups are available: {% for group in groups %}<a href='{{group.get_absolute_url}}'>{{group}}</a>, {% endfor %} .
{% else %}
    This exam is not associated with any user groups. <a href="{% url exam.app_name|add:':exam_groups_edit' exam.pk %}">Edit and add a group</a> to enable user management.
{% endif %}
<ol>
    {% for user in current_user_users %}

        <li class="current">{{user.username}}  /
            Email: {{user.email}}
            {% if user.userprofile.grade %}
                [{{user.userprofile.grade}}]
            {% endif %}
            {% if request.user.is_superuser %}
            <a href='{% url "account_profile" user.username %}'><i class="bi bi-link"></i></a>
            {% endif %}
            <button class="toggle-btn" data-pk="{{user.pk}}" data-user="{{user.username}}">Toggle</button>
        </li>

    {% endfor %}
    {% for user in available_user_users %}

        <li>{{user.username}}  /
            Email: {{user.email}}
            {% if user.userprofile.grade %}
                [{{user.userprofile.grade}}]
            {% endif %}
            {% if request.user.is_superuser %}
            <a href='{% url "account_profile" user.username %}'><i class="bi bi-link"></i></a>
            {% endif %}
            <button class="toggle-btn" data-pk="{{user.pk}}" data-user="{{user.username}}">Toggle</button>
        </li>

    {% endfor %}
</ol>

{% comment %} Hide the toggle button if there are no users (to add or remove) {% endcomment %}
<p>
{% if current_user_users or available_user_users %}
    <button class="toggle-all-btn">Toggle all</button>
{% endif %}
    <button class="add-all-btn">Add all</button>
    <button class="remove-all-btn">Remove all</button>

</p>

<script>
    $(document).ready(() => {
        $(".remove-all-btn").click((el) => {
            $(".current .toggle-btn").click();
        });
        $(".add-all-btn").click((el) => {
            $("li:not(.current) .toggle-btn").click();
        });
        $(".toggle-all-btn").click((el) => {
            $(".toggle-btn").click();
        });
        $(".toggle-btn").click((el) => {
            parent = $(el.target).parent()
            $.ajax({
                url: "{% url exam.app_name|add:':exam_json_edit' exam.pk %}",
                data: {
                    csrfmiddlewaretoken: "{{csrf_token}}",
                    edit_user_user: el.target.dataset.pk,
                    add: !parent.hasClass("current"),
                },
                type: "POST",
                dataType: "json",
            })
                        // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        if (data.added) {
                            parent.addClass("current");
                            toastr.info(`User ${el.target.dataset.user} added to exam`)
                        } else {
                            parent.removeClass("current");
                            toastr.info(`User ${el.target.dataset.user} removed from exam`)

                        }
                    }
                })
                .always(function () {
                })

        });

    })
</script>
<style>
    .current {
        color: lightgray;
    }
    .current::after {
        content: "[ADDED TO EXAM]"
    }

    button {
        padding: 0;
    }
</style>