{% block styles  %}
    <link href="{% static 'effort_task/real_effort.css' %}" rel="stylesheet"/>
{% endblock %}

{{ block title }}
<center> Part 1: Practice - Solve as many tables as you can</center>
{{ endblock }}

{{ block content }}
<style>
    .btn-green {
        background-color: #008C3C;
        color: white;
    }
    .btn-green:hover {
        background-color: #008C3C;
        color: white;
    }
</style>

<div class="d-flex flex-column align-items-center">
    <h5>Table #<span id="iter-txt"></span> </h5>
    <p>Score: <span id="solved-txt"></span></p>

    <h5>Version A</h5>
    <img class="captcha m-1" id="captcha-img">

    <br>
    <div class="input-group m-1">
        <input type="{{ input_type }}" id="answer-inp" class="form-control"
               placeholder="How many As are in the table?"
               autocorrect="off" autocapitalize="off" spellcheck="false">
        <button type="button" id="submit-btn" class="btn btn-outline-secondary">Submit</button>
    </div>

    <p class="warn" id="warning-txt"></p>

    {{ if DEBUG }}
    <button type="button" id="cheat-btn" class="btn btn-green">Cheat</button>
    {{ endif }}
</div>

<br>
{{ include Constants.instructions_template }}
<button id="next-btn" class="otree-btn-next btn btn-dark btn-primary" style="display:none;">Next</button>

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'effort_task/real_effort.js' }}"></script>
{{ if DEBUG }}<script src="{{ static 'effort_task/real_effort_cheating.js' }}"></script>{{ endif }}

<script>
    setTimeout(function() {
        document.getElementById('next-btn').click();
    }, 120000);
</script>
{{ endblock }}