(() => {
    const isShowModifyBtn = document.getElementById("isShowModifyBtn")
    const modifyBtn = document.getElementById("modifyBtn")
    const addBtn = document.getElementById("addBtn")
    const beforeModifiedUI = document.getElementById("beforeModifiedUI")
    const afterModifiedUI = document.getElementById("afterModifiedUI")
    const afterModifiedTitle = document.getElementById("afterModifiedTitle")
    isShowModifyBtn.addEventListener("click", () => {
        if (isShowModifyBtn.checked == true) {
            beforeModifiedUI.style.display = "block"
            beforeModifiedUI.style.border = "2px solid #000"
            beforeModifiedUI.style.padding = "10px"
            afterModifiedUI.style.borderTop = "2px solid #000"
            afterModifiedUI.style.borderRight = "2px solid #000"
            afterModifiedUI.style.borderBottom = "2px solid #000"
            afterModifiedUI.style.padding = "10px"
            afterModifiedTitle.style.display = "block"
            modifyBtn.style.display = "block"
            addBtn.style.display = "none"
        } else {
            beforeModifiedUI.style.display = "none"
            beforeModifiedUI.style.border = "none"
            beforeModifiedUI.style.padding = "0px"
            afterModifiedUI.style.border = "none"
            afterModifiedUI.style.padding = "0px"
            afterModifiedTitle.style.display = "none"
            modifyBtn.style.display = "none"
            addBtn.style.display = "block"
        }
    })
})()