{#____________________________________________________________________________#}

{# TODO : get from ZoomHelper #}
{% set listCol = zoomConfig.listField %}
{% set uid = uid() %}

{#____________________________________________________________________________#}
{% if input.label %}
    <h4>{{ input.label }}</h4>
{% endif %}
<table class="{{ input.class ?? 'table noColorLign striped' }}"
    data-multipick="{{ input.name }}"
    data-multipick-popup="{{ path('Ajax.Multipick.popupMultipick') }}"
    data-multipick-zoompath="{{ input.zoom_path }}"
    data-multipick-zoom="{{ path(input.zoom_path, {}) }}"
    data-multipick-zoom-title="{{ 'Liste' | trad }}"
    data-multipick-tpl="tpl-multipick-{{ uid }}"
>
    <thead class="thead-dark">
        <tr>
            {% for field in listCol %}
            <th>{{ field.label }}</th>
            {% endfor %}

            <th width="1%" class="text-center">
                <button type="button"
                    class="ajouter_blanc_v2 white-tooltip btn-reset mr-0 {{ input.disabled ? 'd-none' }}" 
                    onclick="javascript:Multipick.zoom(this)"
                >
                    <span class="infos_tooltip left fw-normal">
                        {{ 'Ajouter' | trad }}
                    </span>
                </button>
            </th>
        </tr>
    </thead>
    
{#____________________________________________________________________________#}

{% macro renderTableRow(listField, input, item) %}
    <tr>
        {% for field in listField %}
            <td>
                {% if loop.first %}{# Assume first column is identity #}
                <input type="hidden" name="{{ input.name }}[]"
                    value="{{ item[ field.key ] | e('html_attr') }}"
                    data-multipick-subinput
                />
                {% endif %}
                {{ item[ field.key ] }}
            </td>
        {% endfor %}
        <td class="text-center input-table-td-action">{# TODO : Action delete #}
            <a href="javascript:void(0)"
                class="Supprimer_v2 action-hover white-tooltip"
                onclick="Multipick.removeRow(this.closest('tr'))"
            >
                <span class="infos_tooltip left">
                    {{ 'Supprimer' | trad }}
                </span>
            </a>
        </td>
    </tr>
{% endmacro %}

{#____________________________________________________________________________#}

    <tbody>
        {% set listRow = subject[ input.name ] %}
        {% set listRow = input.sort 
            ? subject[ input.name ] | sort(input.sort)
            : listRow %}
        {% for item in listRow %}
            {{ _self.renderTableRow(listCol, input, item) }}
        {% endfor %}
    </tbody>
    <tbody>
        <tr>
            <td colspan="{{ (listCol | length) + 1 }}" 
                class="text-center text-muted"
                data-label-empty
                style="{{ listRow | length != 0 ? 'display: none' }}"
            >{{ 'Aucun élément' | trad }}</td>
        </tr>
    </tbody>
</table>

{#____________________________________________________________________________#}

{# Create jsTemplate used in Multipick.js -> _addRow #}
{% apply jsTemplate('tpl-multipick-' ~ uid ) %}
	{{- _self.renderTableRow(
        listCol,
        {name: '__INPUT_NAME__'},
        listCol | reduce((carry, item) => carry + {
            (item.key): '__PLHLD_' ~ item.key ~ '__'
        }, {}))
    -}}
{% endapply %}
