{% extends 'base_main.html' %}

{% 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) {
            if (data == 'done') {
                return
            }
            else {
                document.getElementById('solutions').innerHTML = data;
                setTimeout(function() {doPoll()}, 2000);
            }
        })
        jQuery.get('/solutions_table?task_id={{ task.id }}&render=true', function(data) {
            document.getElementById('solutions').innerHTML = data;
        })
    }
{% endblock %}

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

{% block main %}
    <h2>{{ task.name }}</h2>
{% 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 %}
    <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 }}">{{ 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 %}