{% set route = getRouteName() %}
<form id="multipick-form"
    data-popup-multipick
    data-zoom-filter="{{ post.zoomFilter | json | e('html_attr') }}"
    onsubmit="Multipick.handlePopupSelection(this)"
>
    <table id="multipick-table" class="table table-hover">
        <thead class="thead-dark">
            <th width="1%" class="text-right" class="white-tooltip">
                <input name="selectAll" type="checkbox"
                    data-checkall-input="popup-multipick" 
                    class="form-control checkbox"
                >
                <span class='infos_tooltip left'>{{ 'Sélectionner toute la page' | trad }}</span>
            </th>
            {% for col in listCol %}
            <th>{{ triTable(
                col.key,
                post['tri_' ~ col.key],
                col.label,
                'multipick-form',
                path(route),
                'multipick-form'
            ) }}</th>
            {% endfor %}
        </thead>
        <tr>
            <td>{# action #}</th>
            {% for col in listCol %}
            <td>{{ filterTable(
                col.key,
                post['filter_' ~ col.key],
                '',
                'multipick-form',
                path(route),
                'multipick-form'
            ) }}</td>
            {% endfor %}
        </tr>
        {% for entity in listEntity %}
        <tr onclick="labelLike(this, event)">
            <td>
                {% set entityId = entity[ primaryKey ] %}
                <input class="form-control checkbox"
                    type="checkbox" name="selection[]" 
                    value="{{ entityId | e('html_attr')}}"
                    data-checkall="popup-multipick"
                    {{ entityId in (post.selection ?? []) ? 'checked' }}
                />
            </td>
            {% for col in listCol %}
            <td>{{ entity[ col.key ] }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>
    {# TODO : factorize pagination #}
    {# Note : due to post.selection we used a custom pagination #}
    <nav aria-label="Page navigation">
        <ul class="pagination" id="multipick-pagination"></ul>
    </nav>
    <script>
        ajaxPagination("#multipick-pagination", "#multipick-form", {
            pageCount: {{ infoPagination.nombreDePage | json }},
            page: {{ (infoPagination.page+0) | json }},{# page must be an int so we force it with a +0 #}
            path: {{ path(route) | json }},
            postKey: 'page',
        }, function() {
            return new FormData(document.getElementById('multipick-form'));
        });
    </script>

    {#___________________________________#}
    {% set listIdDisplayed = listEntity |column(primaryKey) %}
    {% for entityId in 
        (post.selection ?? []) 
        | filter((v) => v not in listIdDisplayed ) 
    %}
        <input type="hidden" name="selection[]" value="{{ entityId | e('html_attr') }}" />
    {% endfor %}
    <input type="hidden" name="zoomPath" value="{{ post.zoomPath | e('html_attr') }}" />
    
    {#___________________________________#}

    <div class="modal-footer text-right">
        <button class="button principal">
            {{- 'Sélectionner' | trad }}
            (<span data-multipick-selection-count>{{ post.selection | length }}</span>)
        </button>
    </div>
</form>