{{ block content }}
{{ include '_static/MyStyles.html'}}
{{ include '_static/JS_Functions.html'}}
{{ include '_static/GuessTitle.html' }}
{{ include '_static/Timer.html' }}


<h4 style="margin-bottom: 15px"><b>Your answer:</b></h4>
{{ include '_static/GuessSteps.html'}}
{{ include '_static/GuessPanel.html'}}

<br>
<table id="TblSubmit" style="width: 100%">
    <tr>
        <td style="display: flex; justify-content: right; margin-top: 10px">
            <button id="BtnSubmit" class="stlMyButton" type="button"
                    style="background-color: red; border-radius: 6px; display: block;"
                    onclick="btnSubmit_Click()">
                SUBMIT YOUR ANSWER
            </button>
        </td>
    </tr>
    <tr>
        <td id="TxtSubmit" style="text-align: center; font-weight: bold; color: red; display: none">
            Your guesstimate is...
        </td>
    </tr>
    <tr id="ConfirmReject" style="display: none">
        <td style="display: flex; justify-content: center">
            {{ next_button }}
            <p>
            <button id="btnReject" class="btn btn-secondary"
                    style="background-color: dimgrey; float: right; margin: 5px; height: 60px"
                    type="button" onclick="btnReject_Click()">
                <b>No, I want to edit my answer.</b>
            </button>
            </p>
        </td>
    </tr>
</table>

<div id="HiddenFormField" style="display: none">
    {{ formfield "MyGuess" }}
    {{ formfield "MyDescr" }}
    {{ formfield "MyCalc" }}
    {{ formfield "MyStepCount" }}
</div>

<br>

<script>
    let btnNext = document.getElementsByClassName('otree-btn-next')[0];
    btnNext.innerHTML = 'Yes, this is correct.';
    btnNext.className = 'btn btn-secondary';
    btnNext.style.backgroundColor = 'dimgrey';
    btnNext.style.float = 'right';
    btnNext.style.fontWeight = 'bold';
    btnNext.style.margin = '5px';
    btnNext.style.height = '60px';
    //btnNext.style.float = 'right';


    let blnTeamWork = false; //If true, server will be informed about any change.
    let me = js_vars.MyRole;
    let curEditor = me;

    let fldGuess = document.getElementById('id_MyGuess');
    let fldDescription = document.getElementById("id_MyDescr");
    let fldCalculation = document.getElementById("id_MyCalc");
    let fldStepCount = document.getElementById("id_MyStepCount")

    let btnSubmit = document.getElementById('BtnSubmit');
    let txtSubmit = document.getElementById('TxtSubmit');
    let cllConfirmReject = document.getElementById('ConfirmReject');

    showTitle(js_vars.Question, '');
    if (js_vars.TestBot) {fldGuess.value = js_vars.TestValue;}
    showGuessPanel("Your guesstimate:", "right");

    // We start with one step.
    addStep(1);

    function btnSubmit_Click() {
        checkGuessInput();
        disableInputs(true);
        btnSubmit.style.display = 'none';
        txtSubmit.innerHTML = "Your guesstimate is: " + textifyNumber(fldGuess.value) + ".";
        txtSubmit.style.display = 'block';
        cllConfirmReject.style.display = 'block';
    }

    function btnReject_Click () {
        txtSubmit.style.display = 'none';
        cllConfirmReject.style.display = 'none';
        disableInputs(false);
        btnSubmit.style.display = 'block';
    }

    if (js_vars.TestBot) {setTimeout(submitPage, 12500)}
    function submitPage() {
        btnNext.click()
    }
</script>

{{ endblock }}