<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href=""><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="">系统设置</a></li>
                <li>用户管理</li>
            </ul>
            <h4>用户管理</h4>
        </div>
    </div>
    <!-- media -->
</div>
<!-- pageheader -->

<div class="contentpanel">
    <div class="panel panel-primary-head">
        <div class="panel-heading">
            <div class="pull-right">
                <a id="new-page" href="/users/new" class="btn btn-success btn-rounded"><i class="glyphicon glyphicon-plus"></i> 新增用户</a>
            </div>
            <h4 class="panel-title">用户管理</h4>
            <p>&nbsp;</p>
        </div>
        <!-- panel-heading -->

        <table id="table-users" class="table table-striped table-bordered responsive">
            <thead class="">
            <tr>
                <th>用户名</th>
                <th>角色</th>
                <th>状态</th>
                <th></th>
            </tr>
            </thead>

            <tbody>
            {{#each users}}
                <tr>
                    <td>{{username}}</td>
                    <td>{{#equals role '1000'}}<span class="label label-primary">运维</span>{{^}}<span class="label label-success">开发</span>{{/equals}}</td>
                    <td>{{#equals state '1'}}<span class="label label-success">启用</span>{{^}}<span class="label label-danger">禁用</span>{{/equals}}</td>
                    <td data-id='{{_id}}'>
                        <button class="btn btn-success btn-xs server-edit">修改</button> &nbsp;
                        <button class="btn btn-danger btn-xs server-del">删除</button>
                    </td>
                </tr>
            {{/each}}
            </tbody>
        </table>
    </div>
    <!-- panel -->
</div>


<script>
    $(document).on('ready pjax:success', function() {
        $("#table-users").DataTable({
            pageLength: 25,
            retrieve: true,
            responsive: true,
            searching: false
        });
        $(document).pjax('#new-page', '#pjax-container')

        $('.server-del').click(function(){
            var id = $(this).parent().data('id');
            $.post('/users/del', {id: id}, function(ret){
                if(ret.code == 200){
                    var i = layer.alert('操作成功', function(){
                        layer.close(i);
                        $.pjax.reload('#pjax-container');
                    });
                }
            });
        });

        $('.server-edit').click(function(){
            var id = $(this).parent().data('id');
            $.pjax({
                url: '/users/edit?id=' + id,
                container: '#pjax-container'
            });
        });
    });

</script>