{%block dashboard %}
<script>
  
    $(function(){
        $('#listaroles').html('<img class="loading" width="16" src="{{asset('loadings/spin.GIF')}}" />');

        $('#listaroles').load('{{path("ListarolesxProyecto",{'idproyectos':idproyectos})}}',{},function(){
            $(".loading").hide();
        });        

        $("#multiRoles").click(function(){

            if ($("#multiRoles").prop( "checked") == true)
                $("#idroles").attr({'multiple':true, size:30});
            else{
                $("#idroles").removeAttr('multiple size');
                $("#multiRoles").prop( "checked", false );
            }
        });
    });
  
    $("#incluirRol").click(function(){
      var idroles = $('#idroles').val();
      
      $.ajax({
        type:"GET",
        async:true,
        url:"{{path('IncluirRol',{'idproyectos':idproyectos})}}",
        data:{$idroles: idroles }
      }).done(function(msj){
          $("#roles").load("{{ path('roles_proyectos',{'idproyectos':idproyectos})}}");
      });
})

</script> 

        <div class="col-lg-4 col-xs-12   main">
                <div class="form-group">
                        <label>Seleccione Rol</label>
                        <select class="form-control" id="idroles">
                            {% for rol in roles %}
                            <option value="{{ rol.idroles }}">
                                {{ rol.rol }}
                            </option>
                                {% endfor %}

                        </select>
                        <input type="checkbox" id="multiRoles">Múltiples Roles
                </div>
                           
             <button class="btn btn-info" id="incluirRol" >Incluir</button>
        </div>
                            
        <div class="col-lg-4 col-xs-12   main">
            <div class="form-group">
                    <label>Lista de Roles Incluidos</label>
                    <div id="listaroles"  class=" table-bordered" style="   height: 150px;  overflow-y: scroll; "></div>
             </div>
        </div>                            
    <div class=" col-xs-12 col-lg-12 col-md-12" id="confiProyectos"></div>
{% endblock %}