<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="/servers/new" class="btn btn-success btn-rounded"><i class="glyphicon glyphicon-plus"></i> 新增服务器</a>
            </div>
            <h4 class="panel-title">服务器设置</h4>
            <p>配置服务器连接方式、可以通过标签区分</p>
            
        </div>
        <!-- panel-heading -->

        <table id="basicTable" class="table table-striped table-bordered responsive">
            <thead class="">
                <tr>
                    <th>Host</th>
                    <th>Username</th>
                    <th>Port</th>
                    <th>Tag</th>
                    <td>DeployPath</td>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {{#each servers}}
                <tr>
                    <td>{{host}}</td>
                    <td>{{username}}</td>
                    <td>{{port}}</td>
                    <td><span class="label label-primary {{env}}">{{envName}}</span></td>
                    <td>{{deployDir}}</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>
    $(function() {
        $("#basicTable").DataTable({
            responsive: true
        });
        $(document).pjax('#new-page', '#pjax-container')
        
        $('.server-del').click(function(){
            var id = $(this).parent().data('id');
            $.post('/servers/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: '/servers/edit?id=' + id,
                container: '#pjax-container'
            });
        });
    });
    
</script>