(() => {
    const form = document.getElementById('serviceForm');
    const rows = document.getElementById('serviceLanguages');
    const alert = document.getElementById('serviceLanguageAlert');
    let sequence = rows.children.length;
    let dirty = false;
    function reindex() {
        Array.from(rows.children).forEach((row, index) => row.querySelectorAll('[name]').forEach(input => {
            input.name = input.name.replace(/Languages\[\d+\]/, `Languages[${index}]`);
        }));
    }
    document.getElementById('addServiceLanguage').addEventListener('click', () => {
        const fragment = document.createElement('template');
        fragment.innerHTML = document.getElementById('serviceLanguageRow').innerHTML.replaceAll('__index__', String(sequence++));
        rows.append(fragment.content);
        reindex();
        rows.lastElementChild.querySelector('input:not([type="hidden"])').focus();
        dirty = true;
    });
    rows.addEventListener('click', event => {
        const button = event.target.closest('.remove-service-language');
        if (!button) return;
        if (Number(button.dataset.count) > 0) {
            alert.textContent = `Cannot remove this language: ${button.dataset.count} version(s) use it. Save other changes, then use the separate delete language and versions confirmation.`;
            return;
        }
        button.closest('tr').remove();
        reindex();
        dirty = true;
    });
    form.addEventListener('input', () => { dirty = true; });
    form.addEventListener('submit', () => { dirty = false; });
    window.addEventListener('beforeunload', event => {
        if (dirty) { event.preventDefault(); event.returnValue = ''; }
    });
})();