{% block body %}
	<div style="display:flex;margin-top:10px;" id="refresh">
		<div id="supplier-list" class="colonne3" style="min-width:450px;">
			<div id="treeviewV2" class="treeview" style="">
				<div class="treeview jstree jstree-1 jstree-default jstree-default-large" style="margin-top:30px;">
					<ul class="jstree-container-ul jstree-children jstree-no-dots jstree-no-icons">
						{% for supplier in suppliers %}
							<li id="{{ loop.index ~ '_node' }}" class="jstree-node jstree-leaf supplier">
								<a id= "{{ loop.index ~ '_anchor' }}" class="jstree-anchor " onclick="displayRatersOfSupplier('{{ supplier.CODE_FOU|e('js') }}', '{{ supplier.RS|e('js') }}', '{{ loop.index }}');" style="position: absolute;">
									{{ supplier.RS }}
								</a>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
		<div class="colonneComplement">
			<form name="form_question_" id="form_question_">
				<input type="hidden" id="mode_form" name="mode_form" value="{{ mode }}">
				<input type="hidden" id="id" name="id" value="{{id}}">

				<div id="tableRefresh">
					<div
						class="bg_form padding_form border_form clearfix" id="detailRefresh">
						<h2 id="table_title" class="separateur_bottom" style="padding-bottom:5px;">
							{{ tableTitle }}
						</h2>
						<p id = 'tableSubTitle' {% if tableSubTitle == '' %}style="display: none;"{% endif %}>
							{{ tableSubTitle }}
						</p>
						<table id="raters_table" class="table table-hover">
							
						</table>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script>
		function displayRatersOfSupplier(supplier, name, id = '') {
            if (id == '') {
                id = supplier.replace(/\s/g, '');
                id = id.replace(' ', '');
                id = id.normalize("NFD").replace(/\p{Diacritic}/gu, "");            
            }
            $('#' + id + '_anchor').addClass('jstree-clicked');
			$('#' + id + '_anchor').parent().siblings().children().removeClass('jstree-clicked');
			$('#table_title').html(name);
			$.ajax({
				dataType : 'html',
				url : '{{ path('Evaluation.Rater.ratersTable', {mode: mode, id: id}) }}',
				data: {'supplier' : supplier},
				type: "POST",
				success: function(result){
					$('#raters_table').html(result);
				}
			});
			$('#tableSubTitle').hide();
		};

		{% if chosenSupplier %}
			displayRatersOfSupplier('{{ chosenSupplier }}', '{{ chosenName }}');
		{% endif %}

		function showMenu(objet) {
			event.stopPropagation();
			let id = $(objet).parent().parent().attr('id');
	
			$.ajax({
				dataType : 'html',
				url: '{{ baseUrl() }}evaluation/ajaxMenuContextuel/{{ mode }}/{{ idCamp }}/'+id,
				type: "POST",
				success: function(result){
					$(objet).parent().find('.ss_parametres').html(result);
				}
			});
		}
	</script>

	<style>
		.divMenuContextuel {
			width: 50px;
			height: 34px;
			float: right;
			position: absolute;
			top: 1px;
			right: 0;
		}

		.divMenuContextuel .imagePoint {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -6px;
		}
	</style>
{% endblock %}
