{{ extends 'global/Page.html' }}
{{ block title }}Addition{{ endblock }}

{{ block styles }}
<style>
    /* Container for the entire page content */
    #content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Container for the addition task */
    #ret-addition-container {
        display: flex;
        justify-content: space-around;
        width: fit-content;
        margin: 2rem auto;
        align-items: center
    }

    #ret-addition-container div {
        margin: 0 0.5rem;
    }

    #ret-addition-container .form-control {
        max-width: 100px;
        text-align: center;
    }

</style>
{{ endblock }}

{{ block content }}
<div id="content-container">
    <div id="ret-addition-container">
        <div id="addition">
            {{ for addendum in addenda }}
                <span id="addendum-{{ addendum }}"></span>
                {{ if addendum < C.NUM_ADDENDA }} + {{ endif }}
            {{ endfor }}
            =
        </div>

        <div>
            <input id="addition-answer" type="number" class="form-control" required>
        </div>

        <div>
            <button type="button" id="submit-addition" class="btn btn-outline-primary">Submit</button>
        </div>
    </div>

    <div class="text-center">
        <div>
            Number of attempts: <b id="num-attempts">{{ player.num_attempts }}</b>
        </div>
        <div>
            Number of correct answers: <b id="num-solved">{{ player.num_solved }}</b>
        </div>
    </div>


</div>
{{ endblock }}

{{ block scripts }}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const addendaSpan = document.querySelectorAll('#addition span'),
          btnSubmitAddition = document.getElementById('submit-addition'),
          answerBox = document.getElementById('addition-answer'),
          numAttempts = document.querySelector('#num-attempts'),
          numSolved = document.querySelector('#num-solved');

    window.liveRecv = (data) => {
        console.log('liveRecv got:', data);
        addendaSpan.forEach((s, i) => {
            s.innerText = data.addition[i];
        });
        numAttempts.innerHTML = data.num_attempts;
        numSolved.innerHTML = data.num_solved;
    };

    function submitAnswer() {
        if (answerBox.reportValidity()) {
            liveSend({action: 'answer', answer: answerBox.value});
            answerBox.value = '';
            answerBox.focus();
        }
    }

    btnSubmitAddition.addEventListener('click', () => {
        submitAnswer();
        btnSubmitAddition.blur();
    });

    answerBox.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
            event.preventDefault();
            submitAnswer();
        }
    });

    liveSend({action: 'load'});
});
</script>
{{ endblock }}