{% set uid = uid() %}

{% macro renderTableRow(rowId, input, subject) %}
    <tr>
        {% for child in input.listChild %}
        <td>
            {# This complexe expression simply set child.fullName and child.disabled #}
            {{- formInput(
                setStdClass(
                    setStdClass(
                        child,
                        'fullName',
                        input.name 
                        ~ '[' ~ rowId ~ ']'
                        ~ '[' ~ child.name ~ ']'
                    ),
                    'disabled',
                    (input.disabled ?? false) ? true : (child.disabled ?? false)
                ),
                subject
            ) -}}
        </td>
        {% endfor %}
        <td class="text-center">{# TODO : Action delete #}
            <a href="javascript:void(0)"
                class="Supprimer_v2 action-hover {{ input.disabled ? 'd-none' }}"
                onclick="removeRow(this.closest('tr'))"
            ></a>
        </td>
    </tr>
{% endmacro %}


{#____________________________________________________________________________#}

<table id="input-table-{{ uid }}" class="table mb-0">
    <thead>
        <tr>
            {% for child in input.listChild %}
            <th>{{ child.label }}{{ labelSuffixe(child.validator.mandatory ?? false) }}</th>
            {% endfor %}
            <th width="1%" class="text-center">
                <a class="ajouter_blanc_v2 white-tooltip {{ input.disabled ? 'd-none' }}" 
                    href="javascript:addRow({{ uid }}, {{ input.name | json | e('html_attr') }})"
                >
                    <span class="infos_tooltip left fw-normal">
                        {{ 'Ajouter' | trad }}
                    </span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        {% set listRow = subject[ input.name ] %}
        {% set listRow = input.sort 
            ? subject[ input.name ] | sort(input.sort)
            : listRow %}
        {% for k, row in listRow %}
            {{ _self.renderTableRow(k, input, subject) }}
        {% endfor %}
        <tr>
            <td colspan="{{ input.listChild | length + 1 }}" 
                class="text-center text-muted"
                data-label-empty
                style="{{ subject[ input.name ] | length != 0 ? 'display: none' }}"
            >{{ 'Aucun élément' | trad }}</td>
        </tr>
    </tbody>
</table>

{#____________________________________________________________________________#}

<script id="tpl-input-table-row-{{ uid }}" type="template/html">
{% apply escape %}
	{{ _self.renderTableRow('%ROW_ID%', input, {}) }}
{% endapply %}
</script>
<script>
function getNextId(uid, inputPrefix) {
    let i = 0;
    let table = document.getElementById('input-table-'+uid);
    while (table.querySelector(
        '[name^="'
        + CSS.escape(inputPrefix+'['+i+']')
        +'"]'
    ) != null) {
        i++;
    }
    return i;
}
function addRow(uid, inputPrefix) {

	let tpl = document.getElementById('tpl-input-table-row-'+uid).textContent;

    tpl = tpl.replaceAll('%ROW_ID%', getNextId(uid, inputPrefix));

	let tmp = document.createElement('table'); // Since root element is a <tr>, a <table> is requried

    // Decode html entities
    tmp.innerHTML = tpl; 
    tpl = tmp.textContent;

    // Template to DOM
    tmp.innerHTML = tpl; 
    let row = tmp.querySelector('tr');

    // Insert template
    const table = document.getElementById('input-table-'+uid);
    const tbody = table.querySelector('tbody');
    tbody.prepend(row);
    // TODO : focus first input ?

    row.scrollIntoView({block: 'center'});

    table.querySelector('[data-label-empty]').style.display = 'none';
}
function removeRow(row) {
    
    const table = row.closest('table');
    const tbody = table.querySelector('tbody');

    row.remove();

    // Case : table is empty
    if (tbody.children.length == 1) {
        table.querySelector('[data-label-empty]').style.display = '';
    }
}
</script>