<div class="tab-content">
    <form method="post" name="filtre_Bibliotheque" id="filtre_Bibliotheque" style="margin-top:20px;">

        <div class="colonne3">

		    {% if canEdit %}
    			{% if typeObjet=='B' %}
                	<a class="ajouter_blanc_v2 button_v2 white-tooltip" href="{{ path('ProjetAchat.Categorie.create', { typeObject: typeObjet, idObject: idObjet }) }}" style="float:right;">
            	{% else %}
            		<a class="ajouter_blanc_v2 button_v2 white-tooltip" onClick="generateTab('{{ path('ProjetAchat.Categorie.create', { typeObject: typeObjet, idObject: idObjet }) }}', '{{ 'Nouvelle catégorie' | trad }}','div_categorie_externe')"; style="float:right;">
            	{% endif %}
    			<span class="infos_tooltip right">
    				{{ 'Ajouter une catégorie de données' | trad }}
                </span>
                </a>
			{% endif %}

			{% if canEdit and typeObjet !='B' %}
				<a data-cy="importData" class="download_blanc_v2 button_v2 white-tooltip" onClick="generateTab('{{ path('ProjetAchat.ImportLibrary.showTabLibrary', { typeObjet: typeObjet, idObjet: idObjet }) }}', '{{ 'Importation données' | trad }}', 'divTabLibrary')"; style="float:right; margin-right:5px !important;">
        			<span class="infos_tooltip left">
        				{{ 'Importation de données' | trad }}
                    </span>
				</a>
			{% endif %}

            <div id="treeview" class="treeview" style="margin-top:30px;margin-bottom: 50px;">
            </div>
        </div>
        <div id="zoneDonnee" class="colonneComplement">
        	<div class="bg_form padding_form border_form clearfix" id="detailRefresh">
        		<h2 class="separateur_bottom"  style="padding-bottom:5px;">
        			{{ 'Toutes catégories de données' | trad }}
        		</h2>
    		</div>
        </div>
    </form>
</div>
<script>
	{% if post.onglet == 'data' %}
		$(document).ready(function(){
			setTimeout(function(){$('#treeview #{{ post.id }}_anchor').trigger( "click" );},500); 
		});
	{% endif %}
    	
    $(document).on('click', '#treeview .jstree-anchor', function(e) {

        var anchorId = $(this).parent().attr('id');
        var id = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
        
        activeLoader();
        $.ajax({
            dataType : 'html',
            url: '{{ baseUrl() }}ProjetAchat/ajaxCategorie/{{ typeObjet }}/{{ idObjet }}/'+id,
            type: "POST",
            success: function(result){
                $("#zoneDonnee").html(result);
                desactiveLoader();
            }
        });
    });

	$('#treeview').jstree({
		'core' : {
			'check_callback' : function(operation, node, node_parent, node_position, more){
				if(node_position == 0)
				{
    				if(more.ref && more.ref.li_attr["data-drop"] == 'false')
    				{
    					return false;
    				}
				}
				return true;
			},
			"themes":{
				"theme" : "default",
				"dots" : false,
				"icons":false,
				"variant" : "large"
			},
			'data' :  {{ treeBibliotheque | json }}
		},

		{% if canEdit %}"plugins" : ["dnd"]{% endif %}
	})
	.bind("loaded.jstree", function(event, data) {$(this).jstree("open_all");})
	.bind("move_node.jstree", function(e, data) {
            $.ajax({
                dataType : 'html',
                url: '{{ path('ProjetAchat.Categorie.ajaxReOrder', {typeObject:typeObjet, idObject:idObjet}) }}',
                data : {idCat:data.node.id, oldParent : data.old_parent, parent : data.parent,old_position : data.old_position,position : data.position},
                type: "POST",
                success: function(result){
                    desactiveLoader();
                }
            });
	});
	
    function AfficheMenu(objet)
    {
        event.stopPropagation();
        var id = $(objet).parent().parent().attr('id');

        $.ajax({
            dataType : 'html',
            url: '{{ baseUrl() }}ProjetAchat/ajaxMenuContextuel/'+id, // TODO : use path
            type: "POST",
            success: function(result){
                $(objet).parent().find('.ss_parametres').html(result);
            }
        });
    }
</script>
<style>

    .list-group-item {
        border: 0px solid #ddd;
    }
    
    .divMenuContextuel{
		width: 50px;
		height: 32px;
		float: right;
		position: absolute;
		top: 0px;
		right: 0px;
    }
    
    .divMenuContextuel .imagePoint{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -6px;
    }
</style>