function openModal() {
    document.getElementById('modal-overlay').style.display = 'flex';
}

function closeModal(event) {
    if (event && event.target !== document.getElementById('modal-overlay')) {
        if (!event.target.classList.contains('modal-overlay')) return;
    }
    document.getElementById('modal-overlay').style.display = 'none';
    document.getElementById('modal-content').innerHTML = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.getElementById('modal-overlay').style.display = 'none';
        document.getElementById('modal-content').innerHTML = '';
    }
});

document.body.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'modal-content') {
        openModal();
    }
});