{% load i18n %}
    <link rel="stylesheet" href="/static/js/hummingbird-treeview-master/hummingbird-treeview.min.css" />
	<script src="/static/js/hummingbird-treeview-master/hummingbird-treeview.min.js" type="text/javascript"></script>    
<style>
  
    #div-edit{
        min-height:750px;
        max-height:750px;
        border-left:1px solid #ddd;
        overflow-y:auto;
    }
    #div-edit .tt{
        cursor:pointer;
    }

    #div-edit .tt i{
        margin-left:5px;
    }


   

    #div-edit .active{
        color:red;
        font-weight:bold;
    }

    #chart-main .chart-list div{
        margin-bottom:5px;
    }
    #chart-main .chart-list div a.active{
        color:red;
        font-weight:bold;
    }
    #treeview li label{
        font-size:13px;
    }
    #treeview li i.fa{
        font-size:13px;
    }

</style>


<script type="text/javascript">
    $(document).ready(function(){         

       
        $('#chart-main .chart-list div a').click(function(){
            var me=$(this);
            $('#chart-main .chart-list div a').removeClass('active');
            $(this).addClass('active');
        
        });

        $('#chart-main .chart-list a').click(function(){            
            event.stopPropagation(); 
            event.preventDefault();
            
            var url=$(this).attr('href');
            $.ajax({
                type:'GET',
                processData: false,
                contentType: 'application/json; charset=utf-8',
                url:url,
                success: function (html) { 
                    $('#div-edit').html(html);  
                    return;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }
            });  
            
        });

    });
</script>






<ol class="breadcrumb">
    <li>{% trans "系统设置" %}</li>
    <li>{% trans "菜单设置" %}</li>    
</ol>


<div class="clearfix"></div>


<div class='x_panel' id='chart-main'>
    <div class='col-sm-2 chart-list'>
        {% for g in cgroups %}
        <div>
            <i class="fa fa-user"></i><a href='/rbac/action/cgroup_menu/?cgroup_id={{g.id}}'>{{g.name}}</a>
        </div>
        {% endfor %}
    </div>
    <div class='col-sm-10' id="div-edit"></div>

</div>


