<div class="clearfix" style="margin-bottom:10px;">
    <button class="button principal button_right btn" onclick="choix()">{{ 'Valider'|trad }}</button>
</div>

<div class="treeview" data-treeview="UNSPSC">
	<input type="hidden" name="UNSPSC" value="{{ value | e('html_attr') }}" 
		data-treeview-input
	/> 
	<div class="list-group">
		{% include '@catalogue/Controle/UNSPSC/_UNSPSC.twig' %}
	</div>
</div>

<div class="modal-footer">
    <button class="button principal button_right" onclick="choix()">{{ 'Valider'|trad }}</button>
</div>

<script>
window.zoomConfig = {
	targetInput: {{ post.divCode | json }},
};
	
function choix() {
	const UNSPSC = document.querySelector('[name="UNSPSC"]').value;
    setInputValue(document.getElementById(window.zoomConfig.targetInput), UNSPSC);

	desactivePopup();
}

window.Treeview = {
	setCollapse: (el, isCollapsed) => {
		const item = el.closest('[data-treeview-item]');
		const childwrapper = item.nextElementSibling;
		childwrapper.classList.toggle('d-none', isCollapsed);

        if (isCollapsed == false && !childwrapper.innerHTML.trim()) {
            $.ajax({
                url: '{{ path('Catalogue.ControleVersion.ajaxUNSPSC') }}',
                type: 'POST',
                dataType: 'html',
                data: {parent : item.getAttribute('data-treeview-item'), depth:item.getAttribute('data-treeview-depth')},
                success: function (data) {
                    childwrapper.innerHTML = data;
                }
            });
        }
	},
	handleItemClick: (event) => {
		// Ignore click on collapse button (+/-)
		if (event.target.closest('[data-treeview-collapse-cta]')) return;

		const item = event.target.closest('[data-treeview-item]');
		if (item.classList.contains('disabled')) return;
		Treeview.select(event.target);
	},
	select: (el) => {
		const treeview = el.closest('[data-treeview]');
		const listToBeReset = treeview.querySelectorAll(
			'[data-treeview-item].node-selected'
		);
		for (const item of listToBeReset) {
			item.classList.remove('node-selected');
		}

		const itemSelected = el.closest('[data-treeview-item]');
		itemSelected.classList.add('node-selected');

		const input = treeview.querySelector('[data-treeview-input]')
		input.value = itemSelected.getAttribute('data-treeview-item');
		triggerChangeEvent(input);
	},
}
</script>
{# UNSPSC.LIB_ENG #}