const button = document.getElementById("edit-field-button");
const modal = document.getElementById("edit-field");
const modal_title = document.getElementById("edit_modal_title");
const modal_key = document.getElementById("edit_modal_key");
const modal_input = document.getElementById("edit_modal_input");
const modal_button = document.getElementById("edit_modal_submit")

function editFieldModal(field_id) {
    const field = document.getElementById(field_id);
    const label = document.getElementById(field_id + "_label");

    modal_title.textContent = "Edit " + label.textContent;
    modal_key.textContent = "New " + label.textContent;
    modal_input.value = field.textContent;
    modal_button.onclick = function () {
        editField(field, document.getElementById("edit_modal_input").value);
    }
    button.click();
}

function editField(field, newvalue) {
    if (field.textContent == newvalue) {
        return;
    }
    field.textContent = newvalue;
    window.location.hash = "#";
}

[].forEach.call(document.querySelectorAll('input[type=checkbox]'), function (checkbox) {
    checkbox.checked = checkbox.defaultChecked;
});
const editButtons = document.querySelectorAll("[id^='button_edit_']");
editButtons.forEach(function (button) {
    button.addEventListener("click", function () {
        const fieldName = button.id.slice("button_edit_".length);
        editFieldModal(fieldName);
    });
});
