{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% block title %}
Раунд №{{ player.round_number }}
{% endblock %}

{% block content %}
    <!--The next line adds the task specific content, getting the file name through the get_or_create_task function.-->
    <div class="task-container mb-3">{{ player.get_or_create_task.html_body|safe }}</div>
    <div>Ваш ответ:</div>
{#    <div>Your answer:</div>#}
    <input type="text" id="answer" class="offer" style="background-color: white" required>
    <button class="answer btn btn-primary" type="button" data-feedback="false">Ответ</button>
{#    <button class="answer btn btn-primary" type="button" data-feedback="false">Answer</button>#}
    <br/><br/>
{#    <p> Right answers: <span id="num_tasks_correct"> {{ player.num_tasks_correct }}</span> </p>#}
{#    <p> Total answers: <span id="num_tasks_total">{{ player.num_tasks_total }}</span></p>#}
    <p> Правильных ответов: <span id="num_tasks_correct"> {{ player.num_tasks_correct }}</span> </p>
    <p> Всего ответов: <span id="num_tasks_total">{{ player.num_tasks_total }}</span></p>
    <div><span id="feedback"> </span></div>

    <p></p>

    <form action="" method="post">
        {% csrf_token %}
        {{ form }}
    </form>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });
        });
    </script>
    {% include 'treate_E1/includes/js_work_page.html' %}
{% endblock %}

{% block styles %}
    <style type="text/css">
        span.otree-timer__time-left{
            color:#f00;
            font-size:1.4em;
        }
        .otree-title {
            background-color: steelblue;
            color: white;
            margin: 10px 0 10px 0;
            padding: 20px;
        }
        .otree-timer {
            background: lightsteelblue;
            color: white;
            border-color: white;
        }
        .otree-body {
            text-indent: each-line;
        }

        .box-heading {
            background-color: steelblue;
            color: white;
            margin: 10px 10px 10px 10px;
            padding: 10px 10px 10px 24px;
        }

        .table-style {
            color: black;
            margin: 10px 10px 10px 10px;
        }

        .table-borders {
            border: solid;
            border: steelblue;
            background-color: #ecf2f9;
            align-content: center;
        }
        .offer {
            background-color: whitesmoke;
            color: navy;
            padding: 1px 10px 1px 10px;
            border: groove;
            border-color: lightsteelblue;
            font-weight: bold;
            margin: 1px;
        }
        .otree-btn-next {
            background-color: steelblue;
            color: white;
            padding: 5px 15px 5px 15px;
        }
        h2, h3, h4, h5, h6 {
            font-weight: bolder;
            color: #24435c;
        }
        label{
            display:none;
        }
        td {
            text-align:center !important;
        }
        .task-container {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    </style>
{% endblock %}