{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2024 Bryan Tanady
    Copyright (C) 2024 Elisa Pan
    Copyright (C) 2024, 2026 Colin B. Macdonald
{% endcomment %}
<!-- Modal for confirmation -->
<div class="modal fade"
     id="confirmSetQuota"
     tabindex="-1"
     role="dialog"
     aria-labelledby="confirmSetQuotaLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h5>
                    The marker has already marked more tasks than the default quota limit.
                    Do you insist on setting a quota limit for them?
                </h5>
                <form id="confirmSetQuotaForm" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="force_set_quota" id="force_set_quota">
                    <input type="hidden" name="username" id="confirmUsername">
                    <div>
                        <button type="submit" class="btn btn-success" style="margin-top: 10px">Yes</button>
                        <button type="button"
                                class="btn btn-danger"
                                style="margin-top: 10px"
                                data-bs-dismiss="modal">No</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Editing Default Limit-->
<div class="modal fade"
     id="modifyDefaultLimit"
     tabindex="-1"
     role="dialog"
     aria-labelledby="modifyDefaultLimitLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modifyDefaultLimitLabel">Modify Default Quota Limit</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="modifyDefaultLimitForm"
                      method="post"
                      action="{% url 'modify_default_limit' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="default_limit">New Limit</label>
                        <input type="number"
                               class="form-control"
                               id="default_limit"
                               name="default_limit"
                               required>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary" style="margin-top: 10px">Set</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Editing Limit (for each user) -->
<div class="modal fade"
     id="editLimit"
     tabindex="-1"
     role="dialog"
     aria-labelledby="editLimitLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editLimitLabel">Edit Quota Limit</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editLimitForm"
                      method="post"
                      action="{% url 'edit_quota_limit' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="hidden" id="username" name="username">
                        <label for="limit">New Limit</label>
                        <input type="number" class="form-control" id="limit" name="limit" required>
                    </div>
                    <div>
                        <button type="submit" class="btn btn-primary" style="margin-top: 10px">Set</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Modifying Quota State/Limit -->
<div class="modal fade"
     id="modifyQuotaModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="modifyQuotaModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modifyQuotaModalLabel">Modify Quota Limit</h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="modifyQuotaForm" method="post" action="{% url 'modify_quota' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="usersWithQuota">Select Users</label>
                        <select id="usersWithQuota"
                                name="users"
                                class="form-control select2"
                                multiple="multiple"
                                style="width: 100%">
                            {% for user in users_with_quota_as_objects %}<option value="{{ user.pk }}">{{ user.username }}</option>{% endfor %}
                        </select>
                    </div>
                    <button type="button" class="btn btn-warning" id="selectAllBtn">Select All Users</button>
                    <div class="form-group mt-3">
                        <label for="newLimit">New Limit</label>
                        <input type="number"
                               class="form-control"
                               id="newLimit"
                               name="limit"
                               required>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary">Update Limits</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    document.querySelectorAll('[data-bs-target="#confirmSetQuota"]').forEach(item => {
        item.addEventListener('click', function(event) {
            const username = event.target.getAttribute('data-username');
            document.getElementById('confirmUsername').value = username;
            const formAction = "{% url 'set_quota' 'username_placeholder' %}".replace('username_placeholder', username);
            document.getElementById('confirmSetQuotaForm').action = formAction;
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var selectElement = document.getElementById('usersWithQuota');
        $(selectElement).select2();

        // Add event listener for the Select All button
        document.getElementById('selectAllBtn').addEventListener('click', function() {
            for (var i = 0; i < selectElement.options.length; i++) {
                selectElement.options[i].selected = true;
            }
            // Trigger the change event on the select2 element
            $(selectElement).trigger('change');
        });
    });
</script>