// frontend/static/js/modal.js
// static/js/modal.js
function createModal(title, content, onSave = null) {
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50';
    
    modal.innerHTML = `
        <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">${title}</h3>
            </div>
            <div class="px-6 py-4">
                ${content}
            </div>
            <div class="px-6 py-4 bg-gray-50 rounded-b-lg flex justify-end gap-3">
                <button onclick="closeModal(this)" 
                        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Cancel
                </button>
                ${onSave ? `
                    <button onclick="saveModal(this)" 
                            class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        Save
                    </button>
                ` : ''}
            </div>
        </div>
    `;

    document.body.appendChild(modal);
    return modal;
}

function closeModal(button) {
    const modal = button.closest('.fixed');
    if (modal) {
        modal.remove();
    }
}