<form class="tab-content" method="post" name="form-filtre" id="form-filtre">
    <table class="table table-hover" >
        <thead class="thead-dark"  >
            <tr>
                <th scope="col">{{ triTable('CODE', post.tri_CODE, 'Code' | trad, null, null, 'form-filtre') }}</th>
                <th scope="col">{{ triTable('NOM', post.tri_NOM, 'Nom' | trad, null, null, 'form-filtre') }}</th>
                <th scope="col">{{ triTable('CODE_STE', post.tri_CODE_STE, 'Société' | trad, null, null, 'form-filtre') }}</th>
                <th scope="col">{{ triTable('DATE_BLOC', post.tri_DATE_BLOC, 'Date' | trad, null, null, 'form-filtre') }}</th>
                <th scope="col">{{ 'Text' | trad }}</th>
                <th scope="col">{{ 'Origine' | trad }}</th>
                <th scope="col">{{ 'Adresse IP' | trad }}</th>
                <th scope="col">{{ 'OS' | trad }}</th>
                <th>{# Action #}</th>
            </tr>
        </thead>
        <tbody>
            {% for item in listItem %}
            <tr>
                <td>{{ item.CODE }}</td>
                <td>{{ item.NOM }}</td>
                <td>{{ item.Societe_RAIS_SOC }}</td>
                <td>
                    {{ item.DATE_BLOC | dateTrad }}
                    {{ item.HEURE_BLOC | heureTrad }}
                </td>
                <td>{{ item.TXT_BLOC | trad }}</td>
                <td>{{ item.ORIGINE }}</td>
                <td>{{ item.ADR_IP }}</td>
                <td>{{ item.OS_USER }}</td>
                <td class="text-right">
                    <button type="button" class="button principal" 
                        onclick="showPopupUnblock(this)"
                        data-form-userlabel="{{ 
                            item.NOM ~ ' (' ~ item.CODE ~ ')' | e('html_attr') 
                        }}"
                        data-form-action="{{ path(
                            'Administration.GestionUtilisateur.unblock',
                            {userId: item.CODE}
                        ) | e('html_attr') }}"
                    >
                        {{- 'Débloquer' | trad -}}
                    </button>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="9" class="text-center text-muted">
                    {{- 'Aucun élément' | trad -}}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {{ paginations(
        path('Administration.GestionUtilisateur.listCollab'),
        infoPagination.nombreDePage,
        infoPagination.page,
        infoPagination.post,
        'divRefresh'
    ) }}
</form>

<script>
function showPopupUnblock(el) {

    let pathAction = el.getAttribute('data-form-action');
    let userLabel = el.getAttribute('data-form-userlabel');
    
	let tpl = document.getElementById('tpl-form-unblock').textContent;
	let tmp = document.createElement('div');

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

	// Inject parameter
    tpl = tpl.replaceAll('%ACTION%', pathAction);
    tpl = tpl.replaceAll('%USER%', userLabel);

    activePopup(
        {{ 'Débloquer un utilisateur' | trad | json }},
        tpl,
        'modal_small'
    );
}
</script>
<script id="tpl-form-unblock" type="template/html">
{% apply escape %}
    <form method="POST" class="form-default"
        onsubmit="return ajaxSubmit(event)"
        action="%ACTION%"
        data-onsuccess="pageRefresh"
    >
        <div class="clearfix display_table">
            <span class="icone-modal information"></span>
            <div class="display_cell">
                {{ 'Êtes-vous sur de vouloir débloquer l’utilisateur %USER% ?' | trad }}
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="button principal button_right">
                {{- 'Débloquer' | trad -}}
            </button>
            <button type="button" class="button secondaire button_right" 
                onclick="desactivePopup();"
            >
                {{- 'Annuler' | trad -}}
            </button>
        </div>
    </form>
{% endapply %}
</script>

