{% 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/dist/xterm.css") }}" type="text/css" />
{% endblock %}

{% block site %}

<div id="terminado-container" class="container"></div>

{% endblock %}

{% block script %}

<!-- Hack: this needs to be outside the display:none block, so we can measure
     its size in JS in setting up the page. It is still invisible. Putting in
     the script block gets it outside the initially undisplayed region. -->
<!-- test size: 25x80 -->
<div style='position:absolute; left:-1000em'>
<pre id="dummy-screen" style="border: solid 5px white;" class="terminal">0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
<span id="dummy-screen-rows" style="">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
</pre>
</div>

    {{super()}}

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