<div id="div_donnee_externe">
	<div class="informations" style="margin-top: 0px;">
	    <p>
        	<span class="champs_label" >{{ 'Nom' | trad }} : </span>
        	<span>{{ action.LIB }}</span>
    	</p>
	    <p>
        	<span class="champs_label" >{{ 'Description' | trad }} : </span>
        	<span>{{ action.COMMENTAIRE }}</span>
    	</p>
	</div>
	
	 <ul class="nav nav-tabs" role="tablist" id="tablist">
	 	<li id="ongletacterAction" role="presentation" class="permaAction"><a href="#acterAction" aria-controls="acterAction" role="tab" data-toggle="tab">{{ 'Acteurs' | trad }}</a></li>
	 	<li id="ongletdataAction" role="presentation" class="permaAction"><a href="#dataAction" aria-controls="dataAction" role="tab" data-toggle="tab">{{ 'Données' | trad }}</a></li>
	 	<li id="onglet_DivActionModulable" style="display:none;"><a data-toggle="tab" aria-controls="divActionModulable" href="#DivActionModulable" class="ephemere"></a></li>
	 	<li id="onglet_DivActionModulable2" style="display:none;"><a data-toggle="tab" href="#DivActionModulable2" class="ephemere"></a></li>
	 </ul>
	 
	 <div class="tab-content">
    	 <div role="tabpanel" class="tab-pane" id="acterAction" style="padding:15px;">
            <table class="table table-hover">
              	<thead class="thead-dark">
              		 <th scope="col">{{ 'RACI' | trad }}</th>
              		 <th scope="col">{{ 'Utilisateur' | trad }}</th>
              		 <th scope="col">{{ 'Mail' | trad }}</th>
					 {% if statut != 'E' and statut != 'T'  %}
              		 <th scope="col">{{ 'Déclencheur' | trad }}</th>
              		 <th scope="col">{{ 'Valeur' | trad }}</th>
              		 <th scope="col">{{ 'type d\'acteur' | trad }}</th>
              		 <th>
              		 	{% if canEdit %}
                  		 	<a class="ajouter_blanc_v2  white-tooltip" style="float: right;" onClick="generateTabAction('{{ path('ProjetAchat.ActionActor.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idTasks:action.ID_TACHE, idAction: idAction}) }}', '{{ 'Ajout d\'un acteur' | trad |e('js')|raw }}','div_data_externe');">
                    			<span class="infos_tooltip left">
                    				{{ 'Ajouter un acteur' | trad }}
                                </span>
                  		 	</a>
              		 	{% endif %}
              		 </th>
					{% else %}
						<th scope="col">{{ 'Statut' | trad }}</th>
					{% endif %}
          		 </thead>
          		 <tbody>
          		 	{% for actor in listActor %}
          		 		<tr id="detailActor_{{ loop.index }}">
          		 			<td>{{ listeRole[actor.ROLE] }}</td>
          		 			<td>{%if actor.CODE_ACTEUR %}{{ actor.NOM }} ({{ actor.CODE_ACTEUR }}){% endif %}</td>
          		 			<td>{{ actor.EMAIL }}</td>
							{% if statut != 'E' and statut != 'T'  %}
          		 			<td>
          		 				{% if listeDeclencheur[actor.TYPE_ELEM] %}
          		 					{{ listeDeclencheur[actor.TYPE_ELEM] }}
          		 				{% elseif actor.LIB_TYPE_ELEM != ''  %}
          		 					{{ actor.LIB_TYPE_ELEM }}	
          		 				{% else %}
      		 			            {{ actor.TYPE_ELEM }}
  		 			            {% endif %}
      		 			    </td>
          		 			<td>{% if actor.LIB_ID_ELEM %} {{ actor.LIB_ID_ELEM }} ({{ actor.ID_ELEM }}){% endif %}</td>
          		 			<td>{{ actor.LIB_TYPE_ACTEUR }}</td>
          		 			<td>
          		 				{% if canEdit  %}
              		 				{{ hover_action('detailActor_'~loop.index, 'modifier_v2' , "generateTabAction('"~path('ProjetAchat.ActionActor.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idTasks:action.ID_TACHE, idAction: idAction, idActor:actor.ID_ACTEUR})~"', '"~'Modification acteur' | trad~"', 'div_data_externe');", 'float: right;') }}
              		 				{% if actor.ROLE != 'R' %}
          		 				        {{ hover_action('detailActor_'~loop.index, 'Supprimer_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.ActionActor.delete', {typeObjet:typeObjet,idObjet:idObjet, idAction: idAction, idActor:actor.ID_ACTEUR})~"\', \'"~('Etes-vous sûr de vouloir supprimer l\'acteur' | trad |e('js')|raw)~" "~(actor.NOM |e('js')|raw)~" ?\', \'acterAction\', '', '', '', '', '', \'"~('Suppression de l\'acteur' | trad |e('js')|raw)~"\')", 'float: right;margin-right:5px;') }}
          		 					{% endif %}
          		 				{% endif %}
          		 			</td>
							{% else %}
								<td>
									{% if actor.TERMINE | boolSql == false and action.TERMINEE | boolSql == false %}
										{{ 'En cours' | trad }}
									{% elseif actor.TERMINE | boolSql == false and action.TERMINEE | boolSql %}
										{{ 'Pas répondu' | trad }}
									{% else %}
										{{ 'Terminé' | trad }}
									{% endif %}
								</td>
							{% endif %}
          		 		</tr>
          		 	{% endfor %}
          		 </tbody>
      		 </table>
    	 </div>
    	 <div role="tabpanel" class="tab-pane" id="dataAction" style="padding:15px;">
    	 	{% if canEdit %}
    	 		<a class="ajouter_blanc_v2 button_v2 white-tooltip" onClick="generateTabAction('{{ path('ProjetAchat.ActionData.addData', {typeObjet:typeObjet,idObjet:idObjet,idTasks:action.ID_TACHE, idAction: idAction}) }}', '{{ 'Ajout d\'une donnée' | trad |e('js')|raw }}','div_data_externe');" style="float:right;margin-bottom: 10px !important;"></a>
			{% endif %}
			
			{% if statut == 'E' or statut == 'T' %}
				{% include '@projetAchat/action/execute.twig' %}
			{% else %}
        	 	{% include '@projetAchat/action/tabs/data.twig' %}
			{% endif %}
			
    	 </div>
    	 
		<div id="DivActionModulable" class="tab-pane fade clearfix bg_form padding_form border_form">
		</div>
		<div id="DivActionModulable2" class="tab-pane fade clearfix bg_form padding_form border_form">
		</div>
	 </div>
	 
     <script>
    	$( document ).ready(function() {
    		{% if post.onglet != '' %}
    			$('#{{ post.onglet }}').addClass('active');
    			$('#onglet{{ post.onglet }}').addClass('active');
    		{% else %}
    			$('#acterAction').addClass('active');
    			$('#ongletacterAction').addClass('active');
    		{% endif %}
    	});
    	
		function generateTabAction(path, titre, div, onglet2)
		{
			activeLoader();
			
			var onglet = '';
			if(onglet2)
			{
				onglet = '2';
			}
			
        	$('#onglet_DivActionModulable'+onglet).show();
        	$('#onglet_DivActionModulable'+onglet).find('a').html(titre);
        	$('#onglet_DivActionModulable'+onglet).find('a').trigger('click');

        	$.ajax({
    		  	dataType : 'html',
        		url: path,
        		type: "POST",
        		success: function(htmlData){
        			var result = $('<div />').append(htmlData).find('#'+div).html();
        			$('#DivActionModulable'+onglet).html(result);
        			desactiveLoader();
        		},
    		});
		}
		
		$('#onglet_DivActionModulable').click(function(){ 		
    		$('#onglet_DivActionModulable2').hide();
    		$('#DivActionModulable2').html('');
        });
		
        $('.permaAction').click(function(){
    		$('#onglet_DivActionModulable').hide();
    		$('#DivActionModulable').html('');
    		
    		$('#onglet_DivActionModulable2').hide();
    		$('#DivActionModulable2').html('');
        });
	 </script>
</div>