document.addEventListener("DOMContentLoaded", function(e) {
    const wrapper = document.getElementById("routes-wrapper");
    const btnAdd = document.getElementById("addLang");
    const rmLan = document.querySelectorAll('removeLang');
    const inputs = document.querySelectorAll('zoddak-route-input');
    if(btnAdd === null || wrapper === null) return;
    btnAdd.addEventListener("click", function() {
        const html = `
            <div class="zoddak-route-row">
            <select name="zoddak_route_lang[]" class="zoddak-lang" style="width:90px;margin-right:10px;">
                <option value="">--</option>
                <option value="en">EN</option>
                <option value="es">ES</option>
                <option value="de">DE</option>
                <option value="fr">FR</option>
            </select>

            <input type="text" 
                    name="zoddak_route_value[]" 
                    class="zoddak-route" 
                    placeholder="/ruta" 
                    style="margin-right:10px;">

                <button type="button" class="button remove-route">x</button>
            </div>
        `;
        wrapper.insertAdjacentHTML('beforeend', html);
    });
    wrapper.addEventListener("click", function(e) {
        if (e.target.classList.contains("remove-route")) {
            e.target.parentNode.remove();
        }
    });

});