{% extends 'generic/cid_group_base.html' %}

{% block content %}
    <h2>Group: {{group.name}}</h2>

    <details>
        <summary>Help</summary>
        <p>This page shows an overview of the candidates and exams that are associated with the group.</p>

        <p>Once a candidate has been added to a group and the group has been added to an exam individual candidates can be allocated to the exam. Please note: simply adding the group to the exam will not automatically give the group candidates access to that exam, they will have to be added individually/as a group.</p>
    </details>

    <h3>Users</h3>
    <p title="The number of users that have been added to this group">Count: {{users|length}}</p>

    {% if users %}
        <table>
            <thead>

                {% if group_type == "cid" %}
                    <tr><th>Name</th><th>Email</th><th>CID</th><th>Passcode</th></tr>
                {% else %}
                    <tr><th>User</th></tr>
                {% endif %}
            </thead>
            {% for user in users %}
                {% if group_type == "cid" %}
                    <tr><td>{{user.name}}</td><td>{{user.email}}</td><td>{{user.cid}}</td><td>{{user.passcode}}</td></tr>
                {% else %}
                    <tr><td>{{user.username}}</td></tr>
                {% endif %}
            {% endfor %}
        </table>
    {% else %}
        This group has no users.

        {% if group_type == "cid" %}
            They can be created (or added) <a href="{% url 'generic:manage_cids' %}">here</a>
        {% endif %}
    {% endif %}

    <div class="border border-secondary">
        <details>
            <summary >Add users by email</summary>
            <div >
                <form method="post">
                    {% csrf_token %}
                    <textarea name="emails" placeholder="Email addresses (one per line)"></textarea>
                    <button type="submit"
                            hx-post="{% url 'generic:user_group_add_by_email_user' group.pk %}"
                            hx-target="#add-users-by-email-results"
                    >Add</button>
                </form>
                <div id="add-users-by-email-results"></div>
            </div>
        </details>
    </div>

    <h3>Exams</h3>
    The group is currently associated with the following exams. This allows the users within the group to be easily added to the exam. It will not automatically give members of the group access to the exam.
    {% if group_type == "cid" %}
        Add more <a href='{% url "generic:cid_group_exams" group.pk %}'>here</a>.
    {% else %}
        Add more <a href='{% url "generic:user_group_exams" group.pk %}'>here</a>.
    {% endif %}
    <p>It is possible to quickly add or remove all group candidates from an exam by clicking the buttons below. This will only affect the <b>{{users|length}}</b> candidates in this group. You will need to refresh the page to see updated candidate counts.</p>
    {% with group.GetGroupExams as exam_map %}
        {% for key, value in exam_map.items %}
            <h4>{{key}}</h4>
            <div>
                {% for exam in value %}
                    <div class="d-flex">
                        <a href="{{exam.get_absolute_url}}" class="px-2">{{exam}}</a>
                        {% if group_type == "cid" %}
                            <a href="{{exam.get_cid_edit_url}}" class="edit-link" px-2>Edit candidates</a>
                            <form>
                                <input type="hidden" name="exam_id" value="{{exam.pk}}">
                                <input type="hidden" name="exam_type" value="{{exam.app_name}}">
                                <button
                                    class="btn btn-sm px-2"
                                    hx-post="{% url 'generic:cid_group_add_candidates_to_exams' group.pk %}"
                                    title="Add all group candidates to this exam"
                                    name="action"
                                    value="add"
                                >Add group candidates</button>
                                <button
                                    hx-post="{% url 'generic:cid_group_add_candidates_to_exams' group.pk %}"
                                    title="Remove all group candidates to this exam"
                                    class="btn btn-sm px-2"
                                    name="action"
                                    value="remove"
                                >Remove group candidates</button>
                            </form>
                        {% else %}
                            <a href="{{exam.get_user_edit_url}}" class="edit-link px-2">Edit candidates</a>
                            <form>
                                <input type="hidden" name="exam_id" value="{{exam.pk}}">
                                <input type="hidden" name="exam_type" value="{{exam.app_name}}">
                                <button
                                    class="btn btn-sm px-2"
                                    hx-post="{% url 'generic:user_group_add_candidates_to_exams' group.pk %}"
                                    title="Add all group candidates to this exam"
                                    name="action"
                                    value="add"
                                >Add group candidates</button>
                                <button
                                    hx-post="{% url 'generic:user_group_add_candidates_to_exams' group.pk %}"
                                    title="Remove all group candidates to this exam"
                                    class="btn btn-sm px-2"
                                    name="action"
                                    value="remove"
                                >Remove group candidates</button>
                            </form>
                        {% endif %}


                        <div class="px-2 ms-auto ">
                            {% if group_type == "cid" %}
                                (Cid candidate count: {{exam.valid_cid_users.count}})
                            {% else %}
                                (User candidate count: {{exam.valid_user_users.count}})
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    {% endwith %}


{% endblock %}

{% block js %}
    <style>
        td, th { padding-left: 10px }

        .edit-link {
            font-size: smaller;
            opacity: 60%;
        }
    </style>
{% endblock %}