<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 langtag="page-clientlist"></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                {{if eq true .isAdmin}}
                <div class="content">
                    <div class="table-responsive">
                        <div id="toolbar">
                            <div class="d-flex w-100">
                                <a class="btn btn-primary dim mr-2" href="{{.web_base_url}}/client/add">
                                    <i class="fa fa-fw fa-lg fa-plus"></i>
                                    <span langtag="word-add"></span></a>
                                <a class="btn btn-danger dim" onclick="submitform('clear', '{{.web_base_url}}/client/clear', {'id': 0, 'mode': 'flow'})">
                                    <i class="fa fa-fw fa-lg fa-eraser"></i>
                                    <span langtag="word-clearflow"></span></a>
                            </div>
                        </div>
                        <table class="table-striped table-hover" data-mobile-responsive="true" id="taskList_table"></table>
                    </div>
                </div>
                {{end}}
                <div class="ibox-content">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    /*bootstrap table*/
    $('#table').bootstrapTable({
        toolbar: "#toolbar",
        method: 'post', // 服务器数据的请求方式 get or post
        url: "{{.web_base_url}}/client/list", // 服务器数据的加载地址
        contentType: "application/x-www-form-urlencoded",
        striped: true, // 设置为true会有隔行变色效果
        search: true,
        showHeader: true,
        showColumns: true,
        showRefresh: true,
        pagination: true,//分页
        sidePagination: 'server',//服务器端分页
        pageNumber: 1,
        pageList: [5, 10, 20, 50, 100, 'all'],
        cookie: true,
        cookieIdTable: 'client',
        cookieStorage: 'localStorage',
        detailView: true,
        smartDisplay: true, // 智能显示 pagination 和 cardview 等
        onExpandRow: function () {$('body').setLang ('.detail-view');},
        onPostBody: function (data) { if ($(this)[0].locale != undefined ) $('body').setLang ('#table'); },
        detailFormatter: function (index, row, element) {
            return '<b langtag="word-maxconnections"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'conn_limit\'})">' + row.MaxConn + '</span>'
                {{else}}
                + row.MaxConn
                {{end}}
                + '&emsp;'
                + '<b langtag="word-curconnections"></b>: ' + row.NowConn + '&emsp;'
                + '<b langtag="word-flowlimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + row.Flow.FlowLimit + '</span>'
                {{else}}
                + row.Flow.FlowLimit
                {{end}}
                + 'MB&emsp;'
                + '<b langtag="word-timelimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + row.Flow.TimeLimit + '</span>'
                {{else}}
                + row.Flow.TimeLimit
                {{end}}
                + '&emsp;'
                + '<b langtag="word-ratelimit"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'rate_limit\'})">' + row.RateLimit + '</span>'
                {{else}}
                + row.RateLimit
                {{end}}
                + 'KB/s&emsp;'
                + '<b langtag="word-maxtunnels"></b>: '
                {{if eq true .isAdmin}}
                + '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'tunnel_limit\'})">' + row.MaxTunnelNum + '</span>'
                {{else}}
                + row.MaxTunnelNum
                {{end}}
                + '&emsp;<br/><br/>'
                + '<b langtag="word-createtime"></b>: ' + row.CreateTime + '&emsp;'
                + '<b langtag="word-lastonlinetime"></b>: ' + row.LastOnlineTime + '&emsp;'
                + '<b langtag="word-address"></b>: <span onclick="oCopy(this)">' + row.Addr + '</span>&emsp;'
                + '<b langtag="word-localaddress"></b>: <span onclick="oCopy(this)">' + row.LocalAddr + '</span>&emsp;<br/><br/>'
                + '<b langtag="word-webusername"></b>: ' + row.WebUserName + '&emsp;'
                + '<b langtag="word-webpassword"></b>: ' + row.WebPassword + '&emsp;'
                + '<b langtag="word-basicusername"></b>: ' + row.Cnf.U + '&emsp;'
                + '<b langtag="word-basicpassword"></b>: ' + row.Cnf.P + '&emsp;<br/><br/>'
                + '<b langtag="word-crypt"></b>: <span langtag="word-' + row.Cnf.Crypt + '"></span>&emsp;'
                + '<b langtag="word-compress"></b>: <span langtag="word-' + row.Cnf.Compress + '"></span>&emsp;'
                + '<b langtag="word-connectbyconfig"></b>: <span langtag="word-' + row.ConfigConnAllow + '"></span>&emsp;<br/><br/>'
                + '<b langtag="word-blackip"></b>: ' + row.BlackIpList + '&emsp;<br/><br/>'
                {{if index . "tcp_p"}}
                + '<b langtag="word-commandclient-tcp"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.ip}}:{{.tcp_p}} -vkey=" + row.VerifyKey + " -type=tcp</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "kcp_p"}}
                + '<b langtag="word-commandclient-kcp"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.ip}}:{{.kcp_p}} -vkey=" + row.VerifyKey + " -type=kcp</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "tls_p"}}
                + '<b langtag="word-commandclient-tls"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.ip}}:{{.tls_p}} -vkey=" + row.VerifyKey + " -type=tls</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "ws_p"}}
                + '<b langtag="word-commandclient-ws"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.ip}}:{{.ws_p}}{{.ws_path}} -vkey=" + row.VerifyKey + " -type=ws</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "wss_p"}}
                + '<b langtag="word-commandclient-wss"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server={{.ip}}:{{.wss_p}}{{.ws_path}} -vkey=" + row.VerifyKey + " -type=wss</code>&emsp;<br/><br/>"
                {{end}}
        },
        //表格的列
        columns: [
            {
                field: 'Id',//域值
                title: '<span langtag="word-id"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Remark',//域值
                title: '<span langtag="word-remark"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Version',//域值
                title: '<span langtag="word-version"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + escapeHtml(value) + '</span>'
                }
            },
            {
                field: 'Mode',//域值
                title: '<span langtag="word-scheme"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + getBridgeMode(value) + '</span>'
                }
            },
            {
                field: 'VerifyKey',//域值
                title: '<span langtag="word-verifykey"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (!row.NoStore) {
                        return '<span onclick="oCopy(this)">' + value + '</span>'
                    } else {
                        return '<span langtag="word-publicvkey"></span>'
                    }
                }
            },
            {
                field: 'Addr',//域值
                title: '<span langtag="word-address"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'LocalAddr',//域值
                title: '<span langtag="word-localaddress"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'InletFlow',//域值
                title: '<span langtag="word-inletflow"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.InletFlow)
                    {{end}}
                }
            },
            {
                field: 'ExportFlow',//域值
                title: '<span langtag="word-exportflow"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'TotalFlow',//域值
                title: '<span langtag="word-totalflow"></span>',//标题
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow\'})">' + changeunit(row.Flow.InletFlow + row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.InletFlow + row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'NowConn',//域值
                title: '<span langtag="word-nowconn"></span>',//内容
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return '<span onclick="oCopy(this)">' + value + '</span>'
                }
            },
            {
                field: 'Rate.NowRate',//域值
                title: '<span langtag="word-speed"></span>',//内容
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    return changeunit(value) + "/s"
                }
            },
            {
                field: 'Status',//域值
                title: '<span langtag="word-status"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-open"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-close"></span>'
                    }
                }
            },
            {
                field: 'IsConnect',//域值
                title: '<span langtag="word-connect"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value) {
                        return '<span class="badge badge-primary" langtag="word-online"></span>'
                    } else {
                        return '<span class="badge badge-badge" langtag="word-offline"></span>'
                    }
                }
            },
            {
                field: 'option',//域值
                title: '<span langtag="word-option"></span>',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    btn_group = '<div class="btn-group">'

                    {{if eq true .isAdmin}}
                    if (row.Status) {
                        btn_group += '<a onclick="submitform(\'stop\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 0})" class="btn btn-outline btn-warning"><i class="fa fa-pause"></i></a>'
                    } else {
                        btn_group += '<a onclick="submitform(\'start\', \'{{.web_base_url}}/client/changestatus\', {\'id\':' + row.Id
                        btn_group += ', \'status\': 1})" class="btn btn-outline btn-primary"><i class="fa fa-play"></i></a>'
                    }
                    {{if eq true .allow_local_proxy}}
                    if (row.Id > 0) {
                        btn_group += '<a onclick="submitform(\'delete\', \'{{.web_base_url}}/client/del\', {\'id\':' + row.Id
                        btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    }
                    {{else}}
                    btn_group += '<a onclick="submitform(\'delete\', \'{{.web_base_url}}/client/del\', {\'id\':' + row.Id
                    btn_group += '})" class="btn btn-outline btn-danger"><i class="fa fa-trash"></i></a>'
                    {{end}}
                    {{end}}

                    btn_group += '<a href="{{.web_base_url}}/client/edit?id=' + row.Id
                    btn_group += '" class="btn btn-outline btn-success"><i class="fa fa-edit"></i></a></div>'
                    return btn_group
                }
            },
            {
                field: 'show',//域值
                title: '<span langtag="word-show">',//内容
                align: 'center',
                halign: 'center',
                visible: true,//false表示不显示
                formatter: function (value, row, index) {
                    return '<div class="btn-group"><a href="{{.web_base_url}}/index/all?client_id=' + row.Id
                        + '" class="btn btn-outline btn-primary" langtag="word-tunnel"></a>'
                        + '<a href="{{.web_base_url}}/index/hostlist?client_id=' + row.Id
                        + '" class="btn btn-outline btn-success" langtag="word-host"></a></div>'
                }
            }
        ]
    });
</script>
