/**
 * Routing page JavaScript functionality
 * Handles dynamic keyword input management
 */

function addKeyword() {
    const container = document.getElementById('keywords-container');
    const newGroup = document.createElement('div');
    newGroup.className = 'keyword-input-group flex items-center space-x-2';
    newGroup.innerHTML = `
        <input type="text" 
               name="keywords[]" 
               class="flex-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
               placeholder="Enter keyword">
        <button type="button" 
                class="remove-keyword bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-md text-sm"
                onclick="removeKeyword(this)">
            Remove
        </button>
    `;
    container.appendChild(newGroup);
}

function removeKeyword(button) {
    const container = document.getElementById('keywords-container');
    const groups = container.querySelectorAll('.keyword-input-group');
    
    // Don't remove if it's the last remaining input
    if (groups.length > 1) {
        button.parentElement.remove();
    } else {
        // Clear the input value instead of removing the field
        const input = button.parentElement.querySelector('input');
        input.value = '';
    }
}

// Make functions globally available for onclick handlers
window.addKeyword = addKeyword;
window.removeKeyword = removeKeyword;