{% load static %}
{% load i18n %}
<head>
    <title>{% trans 'Task log' %}</title>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/plugins/xterm/xterm.js' %}"></script>
    <script src="{% static 'js/plugins/xterm/addons/fit/fit.js' %}"></script>
    <link rel="stylesheet" href="{% static 'js/plugins/xterm/xterm.css' %}" />
    <link rel="shortcut icon" href="{{ FAVICON_URL }}" type="image/x-icon">
    <style>
        body {
            background-color: black;
        }

        .xterm-rows {
            font-family: "Bitstream Vera Sans Mono", Monaco, "Consolas", Courier, monospace;
            font-size: 13px;
        }

        .terminal .xterm-viewport {
            background-color: #1f1b1b;
            overflow: auto;
        }

        body ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
            background-color: #272323;
            border-radius: 6px;
        }

        body ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        body ::-webkit-scrollbar-thumb {
            background-color: #494141;
            border-radius: 6px;
        }
    </style>
</head>
<div id="term" style="height: 100%;width: 100%">
</div>

<script>
    var scheme = document.location.protocol === "https:" ? "wss" : "ws";
    var port = document.location.port ? ":" + document.location.port : "";
    var taskId = "{{ task_id }}";
    var url = "/ws/ops/tasks/log/";
    var wsURL = scheme + "://" + document.location.hostname + port + url;
    var failOverPort = "{{ ws_port }}";
    var failOverWsURL = scheme + "://" + document.location.hostname + ':' + failOverPort + url;
    var term;
    var ws;

    $(document).ready(function () {
        term = new Terminal({
            cursorBlink: false,
            screenKeys: false,
            fontFamily: '"Monaco", "Consolas", "monospace"',
            fontSize: 13,
            lineHeight: 1.2,
            rightClickSelectsWord: true,
            disableStdin: true
        });
        term.open(document.getElementById('term'));
        window.fit.fit(term);

        ws = new WebSocket(wsURL);
        ws.onmessage = function(e) {
            var data = JSON.parse(e.data);
            term.write(data.message);
        };
        ws.onopen = function() {
            var msg = {"task": taskId};
            ws.send(JSON.stringify(msg))
        };
        ws.onerror = function (e) {
            ws = new WebSocket(failOverWsURL);
            ws.onmessage = function(e) {
                var data = JSON.parse(e.data);
                term.write(data.message);
            };
            ws.onerror = function (e) {
                term.write("Connect websocket server error")
            }
        }
    }).on('resize', window, function () {
        window.fit.fit(term);
    });
</script>