<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 mr-2" 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>
                                <a class="btn btn-warning dim" onclick="triggerVisibleClientPing(this)">
                                    <i class="fa fa-fw fa-lg fa-signal"></i>
                                    <span langtag="word-ping"></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>
<div class="modal fade" id="qrModal" tabindex="-1" role="dialog" aria-labelledby="qrModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="qrModalLabel">TOTP</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <img id="qrImg" src="" alt="QR" style="max-width: 100%; height: auto;" />
            </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) {
            tmp = '<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/>'
            if (row.WebUserName || row.WebPassword) {
                tmp += '<b langtag="word-webusername"></b>: ' + row.WebUserName + '&emsp;'
                + '<b langtag="word-webpassword"></b>: ' + row.WebPassword + '&emsp;'
            }
            if (row.WebUserName && row.WebTotpSecret) {
                tmp += '<b langtag="word-webtotpsecret"></b>: <span class="btn btn-primary btn-sm" data-url="{{.web_base_url}}/client/qr?account=' + row.WebUserName + '&secret=' + row.WebTotpSecret + '" style="cursor: pointer;" onclick="showQr(this)">' + row.WebTotpSecret + '</span>&emsp;'
            }
            if (row.Cnf.U || row.Cnf.P) {
                tmp += '<b langtag="word-basicusername"></b>: ' + row.Cnf.U + '&emsp;'
                + '<b langtag="word-basicpassword"></b>: ' + row.Cnf.P + '&emsp;<br/><br/>'
            }
            tmp += '<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=\"{{.tcp_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=\"{{.kcp_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=\"{{.tls_ip}}:{{.tls_p}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"tls\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "quic_p"}}
                + '<b langtag="word-commandclient-quic"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.quic_addr}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"quic\"</code>&emsp;<br/><br/>"
                {{end}}
                {{if index . "ws_p"}}
                + '<b langtag="word-commandclient-ws"></b>: ' + '<code onclick="oCopy(this)">' + "./npc{{.win}} -server=\"{{.ws_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=\"{{.wss_ip}}:{{.wss_p}}{{.ws_path}}\" -vkey=\"" + row.VerifyKey + "\" -type=\"wss\"</code>&emsp;<br/><br/>"
                {{end}}
            return tmp
        },
        //表格的列
        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: 'FlowRemain',//域值
                title: '<span langtag="word-flowremain"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (row.Flow.FlowLimit === 0) {
                        return '∞'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + changeunit(row.Flow.FlowLimit*1024*1024 - row.Flow.InletFlow - row.Flow.ExportFlow) + '</span>'
                    {{else}}
                    return changeunit(row.Flow.FlowLimit*1024*1024 - row.Flow.InletFlow - row.Flow.ExportFlow)
                    {{end}}
                }
            },
            {
                field: 'TimeRemain',//域值
                title: '<span langtag="word-timeremain"></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\': \'time_limit\'})">' + getRemainingTime(row.Flow.TimeLimit).formatted + '</span>'
                    {{else}}
                    return getRemainingTime(row.Flow.TimeLimit).formatted
                    {{end}}
                }
            },
            {
                field: 'Flow.FlowLimit',//域值
                title: '<span langtag="word-flowlimit"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value === 0) {
                        return '<span langtag="word-false"></span>'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'flow_limit\'})">' + changeunit(value * 1024 * 1024) + '</span>'
                    {{else}}
                    return changeunit(value * 1024 * 1024)
                    {{end}}
                }
            },
            {
                field: 'Flow.TimeLimit',//域值
                title: '<span langtag="word-timelimit"></span>',//标题
                halign: 'center',
                visible: false,//false表示不显示
                sortable: true,//启用排序
                formatter: function (value, row, index) {
                    if (value === "0001-01-01T00:00:00Z") {
                        return '<span langtag="word-false"></span>'
                    }
                    {{if eq true .isAdmin}}
                    return '<span onclick="submitform(\'clear\', \'{{.web_base_url}}/client/clear\', {\'id\':' + row.Id + ', \'mode\': \'time_limit\'})">' + value + '</span>'
                    {{else}}
                    return value
                    {{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 client-online-ping" langtag="word-online" data-id="' + row.Id + '" style="cursor:pointer;" onclick="pingClient(this,' + row.Id + ')"></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>'
                }
            }
        ]
    });

    function pingClient(el, id) {
        var $el = $(el);
        if ($el.data('pinging')) return;
        var oldText = $el.text();
        $el.data('pinging', true)
            .attr('title', 'Pinging...')
            .text('...')
            .addClass('disabled');
        $.ajax({
            url: '{{.web_base_url}}/client/pingclient',
            type: 'POST',
            dataType: 'json',
            data: { id: id }
        }).done(function (res) {
            if (res && res.code === 1) {
                var ms = parseInt(res.rtt, 10);
                if (isNaN(ms)) ms = res.rtt;
                $el.text(ms + ' ms');
            } else {
                $el.text('ERR');
            }
        }).fail(function () {
            $el.text('ERR');
        }).always(function () {
            $el.data('pinging', false)
                .removeClass('disabled')
                .removeAttr('title');
        });
    }

    function triggerVisibleClientPing(btn) {
        var $btn = $(btn);
        if ($btn.data('pinging')) return;
        $btn.data('pinging', true).addClass('disabled');
        $('#table').find('span.client-online-ping[data-id]').each(function () {
            var id = parseInt($(this).attr('data-id'), 10);
            if (!isNaN(id) && id > 0) {
                pingClient(this, id);
            }
        });
        setTimeout(function () {
            $btn.data('pinging', false).removeClass('disabled');
        }, 600);
    }

    function showQr(el) {
        var url = el.getAttribute('data-url');
        document.getElementById('qrImg').src = url;
        $('#qrModal').modal('show');
    }
</script>
