{{ block title }}
    <h1 style="margin-bottom: 20px;"><b>Your guesstimation task {{ player.round_number }}</b></h1>
{{ endblock }}

{{ block content }}
{{ include '_static/MyStyles.html'}}

<p class="stlText">
    Click on the 'Start task' button to begin your <span id="Round"></span> guesstimation task. You will have
    <span id="TimeLimit"></span>
    to complete the task (a timer will be shown in the top-right corner of the page).
</p>

{{ next_button }}

<script>
    let btnNext = document.getElementsByClassName('otree-btn-next')[0];
    btnNext.innerHTML = 'Start task';
    btnNext.className = 'stlMyButton';
    btnNext.style.float = 'right';

    let spnRound = document.getElementById("Round");
    spnRound.innerHTML = js_vars.FirstSecond;
    let spnTime = document.getElementById("TimeLimit");
    let minutes = Math.trunc(js_vars.TimeLimit/60);
    let seconds = js_vars.TimeLimit - 60*minutes;
    let strTimeLimit = "";
    if (minutes>0) {
        strTimeLimit = minutes.toString() + " minutes";
        if (seconds>0) {
            strTimeLimit += " and " + seconds.toString() + " seconds";
        }
    } else {
        strTimeLimit = seconds.toString() + " seconds";
    }
    spnTime.innerHTML = strTimeLimit;
    if (js_vars.TestBot) {setTimeout(submitPage, 2500)}
    function submitPage() {
        btnNext.click()
    }
</script>
{{ endblock }}