{% extends "base.html" %}

{% block head %}
    <style>
        #container {
            height: 60vh;
            width: 100%;
        }
        #output {
            width: calc(100% - 60px);
            height: 40vh;
            border: 1px solid #e1e1e11e;
            border-radius: 4px;

            padding: 5px 10px;
            
            overflow-y: auto;
        }

        .top-bar {
            display: flex;
            justify-content: left;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="top-bar">
        <div>
            Language:
            <select id="lang"></select>
        </div>

        <button id="run">
            Run!
        </button>
        <button id="reset">
            Reset
        </button>
    </div>
    <div id='container'></div>
    <pre id="output" readonly></pre>
{% endblock %}

{% block script %}
<script src="/script/executor.js"></script>
<script src="/script/editor.js"></script>
{% endblock %}