{% extends "base.html" %}
{% block left_pannel %}override{% endblock %}

{% block content %}

    {% if not current_user.is_authenticated %}
        <button class="unselected" onclick="location.href = '/login';">login</button>
    {% else %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/vnc-post.css') }}"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='node_modules/xterm/css/xterm.css') }}"/>
        <script src="{{ url_for('static', filename='node_modules/xterm/lib/xterm.js') }}"></script>
        <script src="{{ url_for('static', filename='node_modules/xterm-addon-fit/lib/xterm-addon-fit.js') }}"></script>
        <script>
            document.getElementsByClassName("content")[0].style.padding = "0 0"
        </script>
        <div class="container">
            <div id="console"></div>
            <div id="vnc-container">
                <iframe src="/novnc/vnc.html?resize=scale&path=novnc/websockify&autoconnect=true&view_only"
                        width="100%" height="100%" frameborder="0">
                </iframe>
            </div>
        </div>

        <script>
            var term = new Terminal();
            const fitAddon = new FitAddon.FitAddon();
            term.loadAddon(fitAddon);
            term.open(document.getElementById('console'));
            fitAddon.fit()
            addEventListener("transitionend", (event) => {
                fitAddon.fit()
            });

            document.getElementById("console").style.textAlign = "left"
            const eventSource = new EventSource('/stream');

            eventSource.onmessage = (event) => {
                term.writeln(event.data)
            };
            addEventListener("resize", (event) => {
                fitAddon.fit()
            });
        </script>

    {% endif %}

{% endblock %}