{% extends 'base_main.html' %}

{% block title %}{{ task.name }}{% endblock %}

{% block scripts %}
    function change(num) {
        inp = document.getElementById('soltype');
        if (inp.value == num) return;
        document.getElementById('button' + inp.value).classList.remove('btn-dark');
        document.getElementById('button' + inp.value).classList.add('btn-light');
        document.getElementById('button' + inp.value).focused = false;
        document.getElementById('input' + inp.value).hidden = true;
        inp.value = 1 - inp.value;
        document.getElementById('button' + inp.value).classList.remove('btn-light');
        document.getElementById('button' + inp.value).classList.add('btn-dark');
        document.getElementById('button' + inp.value).focused = false;
        document.getElementById('input' + inp.value).hidden = false;
        document.getElementById('chosen').hidden = true;
        document.getElementById('file-upload').value = null;
        document.getElementById('input0').value = "";
    }
    function doPoll() {
        jQuery.get('/solutions_table?task_id={{ task.id }}', function(data) {
            jQuery.get('/task_runtime?task_id={{ task.id }}', function(data1) {
                if (data == 'done' && data1 == 'done')
                    return
                if (data != 'done') {
                    document.getElementById('solutions').innerHTML = data;
                }
                if (data1 != 'done') {
                    document.getElementById('runtime').innerHTML = data1;
                }
                setTimeout(function() {doPoll()}, 2000);
            })
        })
        jQuery.get('/solutions_table?id={{ task.id }}&render=true', function(data) {
            document.getElementById('solutions').innerHTML = data;
        })
        jQuery.get('/task_runtime?id={{ task.id }}&render=true', function(data) {
            document.getElementById('runtime').innerHTML = data;
        })
    }
{% endblock %}

{% block onload %}doPoll(){% endblock %}

{% block main %}
    <div id="runtime"></div>
{% if task.legend %}
<h4>Легенда</h4>
{% autoescape off %}
{{ task.legend }}
{% endautoescape %}
<hr>
{% endif %}
{% if task.input_format %}
<h4>Формат входных данных</h4>
{% autoescape off %}
{{ task.input_format }}
{% endautoescape %}
<hr>
{% endif %}
{% if task.output_format %}
<h4>Формат выходных данных</h4>
{% autoescape off %}
{{ task.output_format }}
{% endautoescape %}
<hr>
{% endif %}
{% if task.specifications %}
<h4>Примечания</h4>
{% autoescape off %}
{{ task.specifications }}
{% endautoescape %}
<hr>
{% endif %}
{% if task.samples %}
<h4 style="">Примеры</h4>
{% for sample in task.samples %}
                <h5>Пример {{ sample.num }}</h5>
                <b>
                    <table style="width: 100%">
                        <tr>
                            <td>
                                Входные данные
                            </td>
                            <td>
                                Выходные данные
                            </td>
                        </tr>
                    </table>
                </b>
                <hr>
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 50%; vertical-align: top;">
<pre>
{{ sample.input }}
</pre>
                        </td>
                        <td style="width: 50%; vertical-align: top;">
<pre>
{{ sample.output }}
</pre>
                        </td>
                    </tr>
                </table>
                <hr>
            {% endfor %}
{% endif %}
    <h2>Отправить решение</h2>
    <table style="margin-bottom: 10px;">
        <tr>
            <input type="hidden" form="solform" name="action" id="soltype" value="0">
            <td><button class="btn btn-dark" id="button0" onclick="change('0')">Текст</button></td>
            <td><button class="btn btn-light" id="button1" onclick="change('1')">Файл</button></td>
        </tr>
    </table>
    <form method="POST" enctype="multipart/form-data" id="solform">
        {% csrf_token %}
        <select name="language" style="margin-bottom: 30px; width: 10%;">
            <option disabled>Выберите язык</option>
            {% for lang in languages %}
                <option value="{{ lang.id }}"{% if user.userinfo.favourite_language_id == lang.id %} selected{% endif %}>{{ lang }}</option>
            {% endfor %}
        </select><br>
        <textarea id="input0" style="width: 1000px; height: 400px; resize: none;" name="code" placeholder="Вставьте сюда свой код"></textarea>
        <label for="file-upload" class="btn btn-outline-dark" id="input1" hidden>
            <i class="fa fa-upload"></i> Загрузить файл
        </label>
        <p id="chosen" hidden>Файл выбран</p>
        <input type="file" style="display: none;" onchange="document.getElementById('chosen').hidden = false;" class="btn form-control-file" id="file-upload" value="Выбрать файл" name="file">
        <br><button type="submit" style="margin-top: 30px; margin-bottom: 30px;" class="btn btn-dark">Отправить</button>
    </form>
    <hr>
    <h2>Решения</h2>
    <table class="table" style="margin-top: 30px;">
        <thead>
            <th scope="col">id</th>
            <th scope="col">Время отправки</th>
            <th scope="col">Язык</th>
            <th scope="col">Результат</th>
        </thead>
        <tbody id="solutions">

        </tbody>
    </table>
{% endblock %}