{{ block title }}
    Page titles
{{ endblock }}
{{ block content }}
{{ include '_static/MyStyles.html'}}
{{ include '_static/JS_Functions.html'}}

<div id="OuterGuessPanel" style="display: block;">
    <div id="InnerGuessPanel" class="panelDiv" style="background-color: royalblue; width: 50%; margin: 20px 0 10px 0">
        <table style="width: 100%; margin-bottom: 5px">
            <tr>
                <td style="text-align: right;">
                    <label id="LblMyGuess" style="margin: 16px 10px 0 0"><b>Your guesstimate:</b></label>
                    <input id="MyGuess" type="number" name="MyGuess" maxlength="10" class="stlInputBox"
                           style="text-align: center; margin: 10px 0 0 10px" onfocus="inputFocus(this.id)">
                </td>
            </tr>
            <tr style="margin: 0">
                <td style="text-align: right; margin: 0">
                    <p id="GuessNumber" style="margin: 5px 5px 0 0; font-size: 0.75em">Zero</p>
                </td>
            </tr>
        </table>
    </div>
</div>
    {{ formfield "MyGuess" }}
    {{ next_button }}

<script>
    let fldGuess = document.getElementById('id_MyGuess');
    fldGuess.className = 'form-control stlInputBox';
    fldGuess.style.margin = '10px 0px 0px 10px';
    fldGuess.style.padding = '6px 10px';
    fldGuess.maxLength = '10';
    fldGuess.style.textAlign = 'center';
    fldGuess.style.boxSizing = 'border-box';
    fldGuess.style.fontSize = '0.9em';
    fldGuess.style.resize = 'none';

    let inpGuess = document.getElementById('MyGuess');
    inpGuess.value = 0;
    if (js_vars.TestBot) {inpGuess.value = js_vars.TestValue;}
    inpGuess.onfocus = function () {unFormatGuess()};
    inpGuess.onblur = function () {checkAndSend()};
    inpGuess.oninput = function () {liveCheckInput()};

    function inputFocus(x) {document.getElementById(x).select();}

    let pnlGuessOuter = document.getElementById('OuterGuessPanel');
    let pnlGuessInner = document.getElementById('InnerGuessPanel');

        function unFormatGuess() {
        inpGuess.value = Math.round(1000*Number(fldGuess.value))/1000;
    }

    function checkAndSend() {
        checkGuessInput();
        if (blnTeamWork) {sendData('NewGuess');}
    }

    function liveCheckInput() {
        let strValue = inpGuess.value.toString();
        if (strValue === '') {strValue = '0'}
        let strGoodChars = '0123456789';
        let strBadChars ='';
        let chr = '';
        // Collect all the illegal characters
        for (let i = 0; i < strValue.length; i++) {
            chr = strValue.charAt(i);
            if(!strGoodChars.includes(chr)) {
                strBadChars += chr;
            }
        }
        // Remove the bad characters
        for (let i = 0; i < strBadChars.length; i++) {
            chr = strBadChars.charAt(i);
            strValue = strValue.replaceAll(chr, "");
        }
        let theValue = parseInt(strValue);
        inpGuess.value = theValue;
        document.getElementById('GuessNumber').innerHTML = textifyNumber(theValue);
        fldGuess.value = theValue;
    }


</script>

{{ endblock }}