{% set inputName = input.fullName ?? input.name %}
{% set listRow = value ?? [] %}

{# Note : since we use a simple subtitution to process the placeholder, special char (like '[') should be replaced #}
{% set placeholder = ('--PLACEHOLDER_ROW_ID' ~ inputName ~ '--') | replace({
    '[': '-',
    ']': '-',
}) %}

{#____________________________________________________________________________#}

{% if input.label %}
<h4>{{ input.label }}</h4>
{% endif %}
<table data-inputtable="{{ inputName | e('html_attr') }}" 
    data-inputtable-placeholder="{{ placeholder | e('html_attr') }}" 
    class="input-table {{ input.class ?? 'table' }} noColorLign striped"
    {{ input.reorderable ? 'data-jq-sortable' }}
>
    <thead class="thead-dark">
        <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 btn-reset mr-0 {{ input.disabled ? 'd-none' }}" 
                    href="javascript:void(0)" 
                    onclick="InputTable.addRow(this, {{ inputName | json | e('html_attr') }})"
                >
                    <span class="infos_tooltip left fw-normal">
                        {{ 'Ajouter' | trad }}
                    </span>
                </a>
            </th>
        </tr>
    </thead>
    <tbody>
        
        {% macro renderTableRow(rowId, input, subject) %}
            <tr>
                {% set row = createInputGroup(
                    rowId,
                    input.listChild,
                    {parent: input}
                ) %}
                {% for child in row.listChild %}
                <td>
                    {{- formInput(
                        child
                        | setObj('parent', row)
                        | setObj( 
                            'disabled',
                            (input.disabled ?? false) ? true : (child.disabled ?? false)
                        ),
                        subject,
                        ''
                    ) -}}
                </td>
                {% endfor %}
                <td class="text-center input-table-td-action nowrap">
                    <a href="javascript:void(0)"
                        class="Supprimer_v2 action-hover {{ input.disabled ? 'd-none' }} white-tooltip"
                        onclick="InputTable.removeRow(this.closest('tr'))"
                    ><span class="infos_tooltip top-left">{{ 'Supprimer' | trad }}</span></a>
                    {% if input.reorderable %}
                        <a href="javascript:void(0)"
                            class="action-hover {{ input.disabled ? 'd-none' }}"
                            data-jq-sortable-handle
                            style="
                                font-size: 1.5em;display:
                                inline-block;
                                height: 1em; width: 1em;
                                color: inherit;
                            "
                        >&duarr;</a>
                    {% endif %}
                </td>
            </tr>
        {% endmacro %}

        {# TODO subject access path #}
        {% set listRow = (listRow ?? []) | sort(
            input.sort ?? ((item) => 0)
        ) %}
        {% 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="{{ (listRow ?? []) | length != 0 ? 'display: none' }}"
            >{{ 'Aucun élément' | trad }}</td>
        </tr>
    </tbody>
</table>

{#____________________________________________________________________________#}

{# This element MUST be place right after [data-inputtable] #}
<script type="template/html">
{% apply escape %}
	{{ _self.renderTableRow(placeholder, input, {}) }}
{% endapply %}
</script>
