{% extends "page.html" %}

{% block title %}{{page_title}}{% endblock %}


{% block bodyclasses %}terminal-app {{super()}}{% endblock %}

{% block params %}

data-base-url="{{base_url | urlencode}}"
data-ws-url="{{ws_url | urlencode}}"
data-ws-path="{{ws_path}}"

{% endblock %}

{% block stylesheet %}
{{super()}}

<link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
<link rel="stylesheet" href="{{static_url("components/xterm.js-css/index.css") }}" type="text/css" />
{% endblock %}

{% block headercontainer %}
<span id="save_widget" class="save_widget"></span>
{{super()}}
{% endblock headercontainer %}

{% block site %}
<div class="terminado-container-container" style="padding-top: 25px;padding-bottom: 10px;">
        <div id="terminado-container" class="container"></div>
      </div>
{% endblock %}

{% block script %}
    {{super()}}

<script src="{{ static_url('terminal/js/main.min.js') }}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

    require([
        'jquery',
        'terminal/js/main',
        'terminal/js/terminado'
    ], function ($) {

        var header = $("header")[0];
        var footer = $("footer")[0];

        function resize() {

            // take the margins into consideration
            var height = $(window).height() - header.offsetHeight - footer.offsetHeight - 45;
            $('.terminado-container-container').height(height);

            terminal.term.fit();
        }

        window.onresize = resize;

        terminal.socket.addEventListener('open', function () {
            resize();
        });
    });

</script>


{% endblock %}
