<div breadcrumb-start="Grupos Usuários" region="main">
    
    <div class="separador arvore" style="height: 400px; overflow: auto;">
        <ul data-bind="template: {name: 'template-grupos-usuario', foreach: model.grupos}"></ul>
    </div>

    <br />

    <div class="submit" style="clear: both">
        <button type="submit" data-bind="enable: model.possuiGrupoSelecionado, click: editar">Editar</button>
    </div>


</div>


<script id="template-grupos-usuario" type="text/html">

    <li data-bind="css:{
                        'expandido': expandido && expandido()
                       }">
        <a class="contrai" data-bind="click: $.proxy($root.expandirGrupo, $root)"></a>
        <a href="#" data-bind="text: Nome, click: $.proxy($root.selecionarGrupo, $root), event: {dblclick: $.proxy($root.editarGrupo, $root)}"></a>

        <ul data-bind="template: {name: 'template-grupos-usuario', foreach: Grupos}, style:{
                                    display: expandido && expandido() ? 'block' : 'none'
                                }"></ul>

    </li>

</script>


<script>

    if (ControllerBase.current) {
        ControllerBase.current.appendToModel({ name: 'grupos', value: @Html.Raw(Json.Encode(ViewBag.Grupos)) });
    }

</script>


