{% extends 'base_main.html' %}

{% load filters %}

{% 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 = "";
    }
    var page = 1;
    function setPage(number) {
        page = number;
    }
    function doPoll() {
        jQuery.get('/solutions_table?{% if in_set %}setTask_id={{ setTask.id }}{% else %}task_id={{ task.id }}{% endif %}&page=' + page.toString(), function(data) {
            var e = document.getElementById('solutions');
            if (e.innerHTML !== data)
                e.innerHTML = data;
            const name = "page_num_" + page.toString();
            elem = document.getElementById(name);
            if (elem) {
                elem.className = "btn btn-dark";
            }
            jQuery.get('/task_runtime?task_id={{ task.id }}', function(data1) {
                document.getElementById('runtime').innerHTML = data1;
                setTimeout(function() {doPoll()}, 2000);
            })
        })
    }
{% endblock %}

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

{% block main %}
    <div id="runtime"></div>
<div class="row">
<div class="col">
{% 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 %}
</div>
{% if in_set %}
    <div class="col-2">
        <h5><a href="/set?set_id={{ set.id }}">{{ set.name }}</a></h5>
        {% for settask in setTask.set.settasks_ordered %}
            {% with result=user|solved:settask.task %}
                <a href="/task?setTask_id={{ settask.id }}" style="color: {% if result %}green{% else %}{% if result == False %}red{% else %}#307df6{% endif %}{% endif %};">{% if task == settask.task %}<b>{% endif %}{{ settask.name }}. {{ settask.task.name }}{% if task == settask.task %}</b>{% endif %}</a><br>
            {% endwith %}
        {% endfor %}
    </div>
{% endif %}
</div>
    <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>
    <div id="solutions"></div>
{% endblock %}