document.addEventListener('DOMContentLoaded', () =>{
    const deleteForm = document.getElementById("deleteForm")
    const confirmModal = document.getElementById("confirmModal");
    const btnCancel = document.getElementById("btnCancel");
    console.log(btnCancel);
    const btnConfirm = document.getElementById("btnConfirm");

    deleteForm.addEventListener('submit',e => {
        e.preventDefault();
        confirmModal.classList.add('is-visible');
    })

    btnCancel.addEventListener('click', e => {
        confirmModal.classList.remove('is-visible');
    })

    btnConfirm.addEventListener('click', e => {
        confirmModal.classList.remove('is-visible');
        deleteForm.submit();
    });

    deleteForm.addEventListener('click', e => {
        if (e.target === deleteForm) {
            confirmModal.classList.remove('is-visible');
        }
    });

    document.addEventListener('keydown', e => {
        if (e.key === 'Escape' && deleteForm.classList.contains('is-visible')) {
            confirmModal.classList.remove('is-visible');
        }
    });

});