window.onload = () => {
    main()
}
function main() {
    const tableContainer = document.getElementById("table-outer-scrollable-container")
    const tableItems = tableContainer.children
    const backgroundColor = "rgba(164,168,157,0.16)"
    const addItemButton = document.getElementById("add-item-button")
    const addItemDialog = document.getElementById("add-item-dialog")
    const addItemDialogCloseButton = document.getElementById("add-item-dialog-close-button")

    for (let i = 1; i < tableItems.length; i += 2) {
        if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
            tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
        }
    }

    addItemButton.addEventListener("click", () => {
        addItemDialog.showModal()
    })

    addItemDialogCloseButton.addEventListener("click", ()=>{
        addItemDialog.close()
    })
}

function hasSpecificClassNameByNode(node, className) {
    const classList = node.classList
    let isContain = false

    classList.forEach((value) => {
        if (value === className) {
            isContain = true
        }
    })

    return isContain
}