<!DOCTYPE html>
<html lang="en">
<head>
    <title>${ .FrpcPanel }</title>
    <link rel="stylesheet" href="./static/lib/layui/css/layui.css?v=${ .version }">
    <link rel="stylesheet" href="./static/css/layui-theme-dark.css?v=${ .version }">
    <link rel="stylesheet" href="./static/css/index.css?v=${ .version }">
    <link rel="stylesheet" href="./static/css/color.css?v=${ .version }">
    <script src="./static/lib/layui/layui.js?v=${ .version }"></script>
    <script src="./static/js/index-client-info.js?v=${ .version }"></script>
    <script src="./static/js/index-proxy-overview.js?v=${ .version }"></script>
    <script src="./static/js/index-proxy-list.js?v=${ .version }"></script>
    <script src="./static/js/index.js?v=${ .version }"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-blue">
        <div class="layui-logo layui-bg-black">${ .FrpcPanel }</div>
        <div class="layui-title">
            <span id="title"></span>
            ${ if .showExit }
            <span class="layui-icon layui-icon-logout" id="logout"></span>
            ${ end }
        </div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="leftNav" id="leftNav">
                <li class="layui-nav-item layui-this">
                    <a href="javascript:void(0)" id="clientInfo">${ .ClientInfo }</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)" id="overview">${ .Overview }</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed" id="proxies">
                    <a class="" href="javascript:void(0)">${ .Proxies }</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:void(0)" id="tcp">TCP</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" id="udp">UDP</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" id="http">HTTP</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" id="https">HTTPS</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" id="stcp">STCP</a>
                        </dd>
                        <dd>
                            <a href="javascript:void(0)" id="sudp">SUDP</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="version">
            <a href="https://github.com/yhl452493373/frpc-panel" target="_blank">${ .FrpcPanel } ${ .version }</a>
        </div>
    </div>
    <div class="layui-body" id="content"></div>
</div>

<!--代理列表-代理表格模板-->
<script type="text/html" id="overviewTableTemplate">
    <section class="overview">
        <table id="overviewTable" lay-filter="overviewTable"></table>
    </section>
</script>

<!--配置信息模板-->
<script type="text/html" id="clientInfoTemplate">
    <section class="client-info">
        <div class="text-info">
            <div class="text-row">
                <div class="text-col">${ .ServerAddress }</div>
                <div class="text-col">{{= d.serverAddr || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .ServerPort }</div>
                <div class="text-col">{{= d.serverPort || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .Protocol }</div>
                <div class="text-col">{{= d.transport.protocol || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .TCPMux }</div>
                <div class="text-col">{{= d.transport.tcpMux || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .User }</div>
                <div class="text-col">{{= d.user || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .UserToken }</div>
                <div class="text-col">{{= d.metadatas.token || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .AdminAddress }</div>
                <div class="text-col">{{= d.webServer.addr || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .AdminPort }</div>
                <div class="text-col">{{= d.webServer.port || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .AdminUser }</div>
                <div class="text-col">{{= d.webServer.user || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .AdminPwd }</div>
                <div class="text-col">{{= d.webServer.password || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .HeartbeatInterval }</div>
                <div class="text-col">{{= d.transport.heartbeatInterval || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .HeartbeatTimeout }</div>
                <div class="text-col">{{= d.transport.heartbeatTimeout || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .TLSEnable }</div>
                <div class="text-col">{{= d.transport.tls.enable || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .TLSKeyFile }</div>
                <div class="text-col">{{= d.transport.tls.keyFile || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .TLSCertFile }</div>
                <div class="text-col">{{= d.transport.tls.certFile || '-' }}</div>
            </div>
            <div class="text-row">
                <div class="text-col">${ .TLSTrustedCAFile }</div>
                <div class="text-col">{{= d.transport.tls.trustedCaFile || '-' }}</div>
            </div>
        </div>
    </section>
</script>

<!--用户列表-添加用户表单模板-->
<script type="text/html" id="addProxyTemplate">
    <form class="layui-form" id="addProxyForm" lay-filter="addProxyForm">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">${ .Basic }</li>
                <li>${ .Extra }</li>
            </ul>
            <div class="layui-tab-content">
                <input type="hidden" name="type">
                <input type="hidden" name="${ .OldNameKey }" id="oldName">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">${ .ProxyName }</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="${ .ProxyName }" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">${ .LocalIp }</label>
                        <div class="layui-input-block">
                            <input type="text" name="local_ip" placeholder="${ .LocalIp }" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">${ .LocalPort }</label>
                        <div class="layui-input-block">
                            <input type="text" name="local_port" placeholder="${ .LocalPort }" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                    {{# if (d.type.toLowerCase() === 'http' || d.type.toLowerCase() === 'https') { }}
                    <div class="layui-form-item http https">
                        <label class="layui-form-label">${ .CustomDomains }</label>
                        <div class="layui-input-block">
                            <textarea name="custom_domains" placeholder="${ .CustomDomains }" autocomplete="off"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text http https">
                        <label class="layui-form-label">${ .Subdomain }</label>
                        <div class="layui-input-block">
                            <textarea name="subdomain" placeholder="${ .Subdomain }" autocomplete="off"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>
                    {{# } }}
                    {{# if (d.type === 'tcp' || d.type === 'udp') { }}
                    <div class="layui-form-item tcp udp">
                        <label class="layui-form-label">${ .RemotePort }</label>
                        <div class="layui-input-block">
                            <input type="text" name="remote_port" placeholder="${ .RemotePort }" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>
                    {{# } }}
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">${ .UseEncryption }</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="use_encryption" value="true" title="${ .true }">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">${ .UseCompression }</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="use_compression" value="true" title="${ .true }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item extra-param-tab-item">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" placeholder="${ .ParamName }">
                        </div>
                        <div class="layui-form-mid">=</div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" lay-filter="addition"
                                   lay-affix="addition" placeholder="${ .ParamValue }">
                        </div>
                    </div>
                    {{# layui.each(d.extraData, function(index, extra){ }}
                    <div class="layui-form-item extra-param-item">
                        <div class="layui-input-inline">
                            <input type="text" value="{{= extra.name}}" class="layui-input"
                                   placeholder="${ .ParamName }">
                        </div>
                        <div class="layui-form-mid">=</div>
                        <div class="layui-input-inline">
                            <input type="text" value="{{= extra.value }}" class="layui-input"
                                   lay-filter="subtraction" lay-affix="subtraction" placeholder="${ .ParamValue }">
                        </div>
                    </div>
                    {{# }); }}
                </div>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="extraParamAddedTemplate">
    <div class="layui-form-item extra-param-item">
        <div class="layui-input-inline">
            <input type="text" value="{{= d.name}}" class="layui-input" placeholder="${ .ParamName }">
        </div>
        <div class="layui-form-mid">=</div>
        <div class="layui-input-inline">
            <input type="text" value="{{= d.value }}" class="layui-input"
                   lay-filter="subtraction" lay-affix="subtraction" placeholder="${ .ParamValue }">
        </div>
    </div>
</script>

<!--代理列表-代理表格模板-->
<script type="text/html" id="proxyListTableTemplate">
    <section class="proxy-list">
        <table id="proxyListTable" lay-filter="proxyListTable"></table>
    </section>
</script>

<!--代理列表-表格工具条按钮模板-->
<script type="text/html" id="proxyListToolbarTemplate">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">${ .NewProxy }</button>
        <button class="layui-btn layui-btn-sm" lay-event="remove">${ .RemoveProxy }</button>
    </div>
</script>

<!--代理列表-操作按钮模板-->
<script type="text/html" id="proxyListOperationTemplate">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">${ .Update }</a>
        <a class="layui-btn layui-btn-xs" lay-event="remove">${ .Remove }</a>
    </div>
</script>
</body>
</html>
