function showDeletePopup(id, name) {
    let popup = document.getElementById("delete-popup")
    popup.dataset.id = id
    popup.querySelectorAll(".elmt-name").forEach(elmt => {
        elmt.innerText = name
    })
    popup.classList.add("show")
}

function deleteElement(id) {
    let url = window.location.href
    if (!url.endsWith("/")) {
        url += "/"
    }
    url += `${id}/`
    req(url, {
        method: "DELETE"
    }).then(res => {
        return res.json()
    }).then(res => {
        if (res.status === "success") {
            window.location.reload()
        }
    })
}

let onBeforeDelete = null

window.addEventListener("load", () => {
    document.querySelector("button.new").addEventListener("click", () => {
        window.location.href = "new/"
    })

    document.querySelectorAll(".list li").forEach(row => {
        let id = row.dataset.id
        row.querySelector("button.edit").addEventListener("click", () => {
            window.location.href = `${id}/`
        })

        row.querySelector("button.delete")?.addEventListener("click", async () => {
            if (onBeforeDelete) {
                await onBeforeDelete(row)
            }
            showDeletePopup(id, row.dataset.name)
        })
    })

    let deletePopup = document.getElementById("delete-popup")
    deletePopup.querySelector(".actions .cancel").addEventListener("click", () => {
        deletePopup.classList.remove("show")
    })
    deletePopup.querySelector(".actions .delete").addEventListener("click", () => {
        deleteElement(deletePopup.dataset.id)
    })
})