{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2023 Edith Coates
    Copyright (C) 2023 Julian Lapenna
    Copyright (C) 2023 Divy Patel
    Copyright (C) 2023-2026 Colin B. Macdonald
    Copyright (C) 2024 Aden Chan
    Copyright (C) 2024 Aidan Murphy
    Copyright (C) 2025 Deep Shah
{% endcomment %}
<script>
    function populateFields() {
        updateQuestion();
        updateKind();
    }

    function getMaximumMarks() {
        var question_dict = JSON.parse('{{ question_max_marks_dict|escapejs }}');
        var question_idx = document.getElementById("id_question_index").value;
        return question_dict[question_idx];
    }

    function updateQuestion() {
        updateKindConstraints();
    }

    function updateKind() {
        updateKindConstraints();
    }

    function updateKindConstraints() {
        var max_value = getMaximumMarks();
        var kind = document.getElementById("id_kind").value;
        var valueField = document.getElementById("id_value");
        var outOfField = document.getElementById("id_out_of");
        if (kind === "absolute") {
            valueField.readOnly = false;
            valueField.disabled = false;
            var out_of = outOfField.value;
            valueField.min = 0;
            valueField.max = out_of;
            valueField.value = Math.max(0, valueField.value);
            valueField.value = Math.min(out_of, valueField.value);

            outOfField.readOnly = false;
            outOfField.disabled = false;
            outOfField.min = 0;
            outOfField.max = max_value;
        } else if (kind === "relative") {
            valueField.readOnly = false;
            valueField.disabled = false;
            valueField.min = -1 * max_value;
            valueField.max = max_value;
            outOfField.value = ""
            outOfField.readOnly = true;
            outOfField.disabled = true;
        } else {
            valueField.value = 0
            valueField.readOnly = true;
            valueField.disabled = true;
            outOfField.value = ""
            outOfField.readOnly = true;
            outOfField.disabled = true;
        }
    }

    function updateValueConstraints() {
        var valueField = document.getElementById("id_value");
        var out_of = document.getElementById("id_out_of").value;
        valueField.max = out_of;
        if (valueField.value > out_of) {
            valueField.value = out_of;
        }
    }
</script>
<!-- Create/Edit Modal-->
<div class="modal fade"
     id="editModal"
     tabindex="-1"
     aria-labelledby="editModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">
                    {% if rid %}
                        Editing Rubric
                    {% else %}
                        Creating Rubric
                    {% endif %}
                </h5>
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
            <!-- the action of the form depends on whether we are editing or creating -->
            <form action="{% if rid %} {% url 'rubric_edit' rid %} {% else %} {% url 'rubric_create' %} {% endif %}"
                  method="post">
                {% csrf_token %}
                <div class="modal-body">
                    {{ edit_form.non_field_errors }}
                    <div class="row form-group">
                        <div class="col">
                            {{ edit_form.question_index.errors }}
                            <label for="{{ edit_form.question.id_for_label }}">Question:</label>
                            {{ edit_form.question_index }}
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col">
                            {{ edit_form.text.errors }}
                            <label for="{{ edit_form.text.id_for_label }}">Rubric Text:</label>
                            {{ edit_form.text }}
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col">
                            {{ edit_form.kind.errors }}
                            <label for="{{ edit_form.kind.id_for_label }}">Rubric Kind:</label>
                            {{ edit_form.kind }}
                        </div>
                    </div>
                    <div class="row mt-2">
                        {{ edit_form.value.errors }}
                        <label class="col-sm-2 col-form-label"
                               for="{{ edit_form.value.id_for_label }}">Value:</label>
                        <div class="col">{{ edit_form.value }}</div>
                        <label class="col-sm-2 col-form-label"
                               for="{{ edit_form.out_of.id_for_label }}">out of</label>
                        <div class="col">{{ edit_form.out_of }}</div>
                    </div>
                    <div class="row form-group">
                        <div class="col">
                            {{ edit_form.meta.errors }}
                            <label for="{{ edit_form.meta.id_for_label }}">Rubric Meta (not shown to students):</label>
                            {{ edit_form.meta }}
                        </div>
                    </div>
                    <div class="accordion mt-2" id="accordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button collapsed"
                                        type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#collapseOne"
                                        aria-controls="collapseOne">Advanced Settings</button>
                            </h2>
                            <div id="collapseOne"
                                 class="accordion-collapse collapse"
                                 aria-labelledby="headingOne"
                                 data-bs-parent="#accordion">
                                <div class="accordion-body p-2">
                                    <div class="row form-group">
                                        <div class="col">
                                            {{ edit_form.versions.errors }}
                                            <label for="{{ edit_form.meta.id_for_label }}">Versions:</label>
                                            {{ edit_form.versions }}
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col">
                                            {{ edit_form.parameters.errors }}
                                            <label for="{{ edit_form.parameters.id_for_label }}">Parameters:</label>
                                            {{ edit_form.parameters }}
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col">
                                            {{ edit_form.tags.errors }}
                                            <label for="{{ edit_form.tags.id_for_label }}">Org tags:</label>
                                            {{ edit_form.tags }}
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col">
                                            {{ edit_form.pedagogy_tags.errors }}
                                            <label for="{{ edit_form.pedagogy_tags.id_for_label }}">Pedagogy Tags:</label>
                                            {{ edit_form.pedagogy_tags }}
                                        </div>
                                    </div>
                                    <div class="row form-group">
                                        <div class="col">
                                            {{ edit_form.published.errors }}
                                            <!-- TODO: why not edit_form[dot]published and have it do everything? -->
                                            <div class="form-check form-check-inline mt-1 mb-0">
                                                <input class="form-check-input"
                                                       type="checkbox"
                                                       name="{{ edit_form.published.name }}"
                                                       id="{{ edit_form.published.id_for_label }}"
                                                       {% if edit_form.published.value %}checked{% endif %}>
                                                <label class="form-check-label"
                                                       for="{{ edit_form.published.id_for_label }}">
                                                    Published
                                                    <small class="d-block text-muted mb-0 mt-0">Publishing a rubric makes it usable by markers.</small>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if rid %}
                        <h5 class="mt-2">Existing annotations</h5>
                        <p class="mb-0">Should existing annotations be updated because of this change?</p>
                        <!-- TODO: would like some tooltips or popovers to help explain all this -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input"
                                   type="radio"
                                   id="minorRadio2"
                                   name="minor_change"
                                   value="no"
                                   checked>
                            <label class="form-check-label"
                                   for="minorRadio2"
                                   data-bs-toggle="tooltip"
                                   title="Increase the revision of the rubric, requesting changes to marked tasks">
                                Major edit
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input"
                                   type="radio"
                                   id="minorRadio3"
                                   name="minor_change"
                                   value="auto">
                            <label class="form-check-label"
                                   for="minorRadio3"
                                   data-bs-toggle="tooltip"
                                   title="Choose automatically based on which fields are changed">Autodetect</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input"
                                   type="radio"
                                   id="minorRadio1"
                                   name="minor_change"
                                   value="yes">
                            <label class="form-check-label"
                                   for="minorRadio1"
                                   data-bs-toggle="tooltip"
                                   title="For example, when you don't want to update any existing tasks">
                                Minor edit [experimental]
                            </label>
                        </div>
                        <!-- perhaps we want to disable this for "minor=yes"? -->
                        <div class="form-check form-check-inline">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="tagTasksCheckBox"
                                   name="tag_tasks"
                                   checked>
                            <label class="form-check-label"
                                   for="tagTasksCheckBox"
                                   data-bs-toggle="tooltip"
                                   title="All tasks effected by this change will be tagged &ldquo;rubric_changed&rdquo;">
                                Tag existing tasks
                            </label>
                            <!-- TODO: in-principle, could have custom tag chosen here -->
                        </div>
                        <div>
                            <small>
                                (You can learn more about Plom&apos;s rubrics
                                <a href="https://plom.readthedocs.io/en/latest/rubrics.html"
                                   target="_">in the docs</a>.)
                            </small>
                        </div>
                    {% endif %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <input type="submit"
                           class="btn btn-primary"
                           value="{% if rid %} Save {% else %} Create {% endif %}">
                </div>
            </form>
        </div>
    </div>
</div>