<% math.randomseed(os.time()) %>
<link rel="stylesheet" href="/luci-static/vssr/css/vssr.css?v=<%=math.random(1,100000)%>">
<script src="/luci-static/vssr/jquery.min.js"></script>

<div class="pure-g status">
    <div class="pure-u-1-4">
        <div class="block pure-g">
            <div class="pure-u-3-5">
                <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%></span></h4>
            </div>
            <div class="pure-u-2-5">
                <div class="img-con">
                    <img src="/luci-static/vssr/img/client.svg">
                </div>
            </div>
        </div>
    </div>
    <div class="pure-u-1-4">
        <div class="block pure-g">
            <div class="pure-u-3-5">
                <h4 id="game_status"><%:Game Mode%><br /><span class="red"><%:Not Running%></span></h4>
            </div>
            <div class="pure-u-2-5">
                <div class="img-con">
                    <img src="/luci-static/vssr/img/udp.svg">
                </div>
            </div>
        </div>
    </div>
    <div class="pure-u-1-4">
        <div class="block pure-g">
            <div class="pure-u-3-5">
                <h4 id="pdnsd_status">PDNSD<br /><span class="red"><%:Not Running%></span></h4>
            </div>
            <div class="pure-u-2-5">
                <div class="img-con">
                    <img src="/luci-static/vssr/img/pdnsd.svg">
                </div>
            </div>
        </div>
    </div>
    <div class="pure-u-1-4">
        <div class="block pure-g">
            <div class="pure-u-3-5">
                <h4 id="socks5_status">SOCKS5<br /><span class="red"><%:Not Running%></span></h4>
            </div>
            <div class="pure-u-2-5">
                <div class="img-con">
                    <img src="/luci-static/vssr/img/socks5.svg">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const VSSR_ASSETS = '/luci-static/vssr/';
    const STATUS1_URL = '<%=url([[admin]], [[services]], [[vssr]], [[run]])%>';
    const CLIENT = '<%:Client%>';
    const GAME_MODE = '<%:Game Mode%>';
    const RUNNING = '<%:Running%>';
    const NOT_RUNNING = '<%:Not Running%>';
    const CHECK_IP_URL = '<%=url([[admin]], [[services]], [[vssr]], [[ip]])%>';

    XHR.poll(2, STATUS1_URL, null,
        function (x, data) {
            if (data) {
                if (data.global) {
                    $("#vssr_status").html(CLIENT + '<br><span class="green">' + RUNNING + '</span>');
                } else {
                    $("#vssr_status").html(CLIENT + '<br><span class="red">' + NOT_RUNNING + '</span>');
                }
                if (data.game) {
                    $("#game_status").html(GAME_MODE + '<br><span class="green">' + RUNNING + '</span>');
                } else {
                    $("#game_status").html(GAME_MODE + '<br><span class="red">' + NOT_RUNNING + '</span>');
                }
                if (data.pdnsd) {
                    $("#pdnsd_status").html('PDNSD<br><span class="green">' + RUNNING + '</span>');
                } else {
                    $("#pdnsd_status").html('PDNSD<br><span class="red">' + NOT_RUNNING + '</span>');
                }
                if (data.socks5) {
                    $("#socks5_status").html('SOCKS5<br><span class="green">' + RUNNING + '</span>');
                } else {
                    $("#socks5_status").html('SOCKS5<br><span class="red">' + NOT_RUNNING + '</span>');
                }
            }
        }
    );

//]]>
</script>
