{{define "dashboard/terminal"}}
<!DOCTYPE html>
<html lang="{{.Conf.Language}}">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tty@{{.ServerName}} - {{.Title}}</title>
    <link rel="shortcut icon" type="image/png" href="/static/logo.svg?v20210804" />
    <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/xterm/4.11.0/xterm.css" type="text/css" rel="stylesheet"/>
</head>

<style>
    html,
    body,
    #terminal-container {
        padding: unset;
        margin: unset;
        width: 100vw;
        height: 100vh;
    }

    body {
        background-color: black;
    }
</style>

<body onresize="onResize()">
    <div id="terminal-container"></div>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/xterm/4.11.0/xterm.js" type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/xterm/4.11.0/addons/attach/xterm-addon-attach.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/xterm/4.11.0/addons/fit/xterm-addon-fit.js"></script>
    <script>
        let sendResizing = false;

        function doResize() {
            fitAddon.fit()
            const w = fitAddon.proposeDimensions();
            const prefix = new Int8Array([1]);
            const resizeMessage = new TextEncoder().encode(JSON.stringify({
                Rows: w.rows,
                Cols: w.cols,
            }));

            var msg = new Int8Array(prefix.length + resizeMessage.length);
            msg.set(prefix);
            msg.set(resizeMessage, prefix.length);

            socket.send(msg)
        }

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function onResize() {
            if (sendResizing) return;
            sendResizing = true;
            try {
                await sleep(1500);
                doResize();
            } catch (error) {
                console.log('resize', error);
            } finally {
                sendResizing = false
            }
        }

        const term = new Terminal({
            screenKeys: true,
            useStyle: true,
            cursorBlink: true,
        });
        const socket = new WebSocket((window.location.protocol == 'https:' ? 'wss' : 'ws') + '://' + window.location.host + '/terminal/' + '{{.SessionID}}');
        const attachAddon = new AttachAddon.AttachAddon(socket);
        const fitAddon = new FitAddon.FitAddon();
        term.loadAddon(attachAddon);
        term.loadAddon(fitAddon);
        term.open(document.getElementById('terminal-container'));

        socket.onopen = () => {
            onResize()
        }

        socket.onclose = () => {
            alert('{{tr "TerminalConnectionTimeOutOrSessionEnded"}}')
            window.close()
        }

        socket.onerror = () => {
            alert('{{tr "TerminalConnectionFailed"}}')
        }
    </script>
</body>

</html>
{{end}}