<div id="divSortableDataAction">
{% for struct in listStruct %} 	
    <div class="clearfix structureData" id="Action_donnee_{{ loop.index }}" style="margin-bottom: 35px;" data-order="{{ struct.ordreDon }}">
    	<div class="colonne2" style="width:33%;">
    		{% if editMode == false and canEdit %}
    			<div class="clearfix" style="position: absolute;top: 15px;right: 0px;z-index: 100;">
     				{{ hover_action('Action_donnee_'~loop.index, 'modifier_v2' , "generateTabAction('"~path('ProjetAchat.ActionData.editGestionData', {typeObjet:typeObjet,idObjet:idObjet,idTasks:action.ID_TACHE, idAction: idAction, idData : struct.ID_DONNEE})~"', '"~'Modification donnée' | trad~"', 'divGestionData');", 'float: right;') }}
     				{{ hover_action('Action_donnee_'~loop.index, 'Supprimer_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.ActionData.deleteData', {typeObjet:typeObjet,idObjet:idObjet,idTasks:action.ID_TACHE, idAction: idAction, idData : struct.ID_DONNEE})~"\', \'"~('Etes-vous sûr de vouloir supprimer la donnée' | trad |e('js')|raw)~" "~(donnee.NOM_DONNEE |e('js')|raw)~" ?\', \'dataAction\', '', '', '', '', '', \'"~('Suppression de la donnée' | trad |e('js')|raw)~"\')", 'float: right;margin-right:5px;') }}
 				</div>
    		{% endif %}
    		<div class="informations">
        		<p style="margin-bottom:25px;">
        			<span class="champs_label">{{ 'Nom de la donnée' | trad }}</span>
        			<span class="resultat">
                        <span class="{% if struct.MULTIPLE | boolSql == false %}container_Unique{% else %}container_Multiple{% endif %} white-tooltip">
                        	<span class="infos_tooltip left">
                                {% if struct.MULTIPLE | boolSql == false %}{{ 'Donnée unique' | trad }}{% else %}{{ 'Donnée multiple' | trad }}{% endif %}
                            </span>
                            <msg>{{ struct.NOM_DONNEE }}</msg>
                        </span>
    				</span>
        		</p>                		
        		<p>
        			<span class="champs_label">{{ 'Description' | trad }}</span>
        			<span class="resultat">{{ struct.DESCR }}</span>
        		</p>
    		</div>
    	</div>
		<div class="colonne2 last" style="width:63%!important;">
			<table class="table table-hover">
              	<thead class="thead-dark">
              		 <th scope="col" width="60%">{{ 'Champs' | trad }}</th>
              		 <th scope="col">{{ 'Affiché' | trad }}</th>
              		 <th scope="col">{{ 'Modifiable' | trad }}</th>
              	</thead>
				<tbody data-donnee="{{ donnee.ID_DONNEE }}">
				{% for champ in struct.ListeChamps %}
					<tr id="champ_{{ champ.ID_DATA }}" data-order="{{ champ.NUM_ORDRE }}">
						<td>{{ champ.NOM_DATA }}</td>
						<td>
							{% if editMode %}
        						{{ inputAdvance('SWITCH', {
        						    'name' : 'checkbox_AFF_'~champ.ID_DATA,
        						    'value' : champ.AFFICHEE| boolSql,
        						    'option' : (champ.MODIFIABLE| boolSql and champ.TYPE_DATA != 'C')? 'disabled':'',
        						}) }}


								{% if (champ.MODIFIABLE| boolSql and champ.TYPE_DATA != 'C') and champ.AFFICHEE| boolSql %}
									<input type="hidden" value"1" id="input_checkbox_AFF_{{ ID_DATA }}" name="checkbox_AFF_{{ ID_DATA }}" />
								{% endif %}
    						{% else %}
						        {{ champ.AFFICHEE| boolSql? 'Oui' | trad:'Non' | trad }}
							{% endif %}
						</td>
						<td class="parametrage">
							{% if editMode %}
        						{{ inputAdvance('SWITCH', {
        						    'name' : 'checkbox_MOD_'~champ.ID_DATA,
        						    'value' : (champ.MODIFIABLE| boolSql and champ.TYPE_DATA != 'C'),
        						    'option' : (champ.LIE_A_OBJET | boolSql and  champ.FLAG_ID_OBJET | boolSql == false) or (champ.LIE_A_OBJET | boolSql == false and (champ.DATA_LIE_A_OBJ | boolSql and  champ.ID_OBJET_DATA | boolSql == false)) or (champ.AFFICHEE| boolSql == false) or (champ.TYPE_DATA == 'C') ? 'disabled':'',
        						    'addClass' : (champ.LIE_A_OBJET | boolSql and  champ.FLAG_ID_OBJET | boolSql == false) or (champ.LIE_A_OBJET | boolSql == false and (champ.DATA_LIE_A_OBJ | boolSql and  champ.ID_OBJET_DATA | boolSql == false)) or (champ.TYPE_DATA == 'C')? 'disabled':'',
        						}) }}
    						{% else %}
							    {{ champ.MODIFIABLE| boolSql? 'Oui' | trad:'Non' | trad }}
						    {% endif %}
						</td>
					</tr>
				{% endfor %}
				</tbody>
          	</table>
		</div>
    </div>
{% endfor %}
</div>
<script>
	$('#divSortableDataAction').sortable({
		update: function( event, ui ) {
			let initialPosition = parseInt(ui.item.attr('data-order'))
			let prevItem = parseInt(ui.item.prev().attr('data-order'))
			let nextItem = parseInt(ui.item.next().attr('data-order'))
			let sign = ""

			if(initialPosition > prevItem || initialPosition > nextItem) {
				sign = "+"
			} else if (initialPosition < prevItem || initialPosition < nextItem) {
				sign = "-"
			}
			const newPosition = findNewPosition(prevItem, nextItem, sign)
			
			reOrder(this, 'tr', ui.item, ui.item.prev(), ui.item.next(), newPosition, sign)
			
			$.ajax({
				type: "POST",
				url: "{{ path('ProjetAchat.ActionData.ajaxReorderData') }}",
				data: {
					initialPosition: initialPosition,
					newPosition: newPosition,
					idAction: '{{ idAction }}'
				},
				success: function() {
					console.log("success")
				},
				dataType: 'json'
			});
		}
	});

</script>
