{{ extends "global/Page.html" }}

{{ block title }}
<center>Arbeitsrunde</center>
{{ endblock }}

{{ block content }}
<div id="working-task-container">
    {{ include 'global/task/Task.html' with label="Aufgabe" && task=tsk && solution=False && send_btn=True &&
    opt_out_btn=True }}

</div>
<div id="option-out-container">
    {{ include 'global/option_out/OptionOut.html' }}
</div>


{{ endblock }}

{{ block styles }}
<style>
    .otree-timer {
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        background-color: #BDBDBD;
        color: rgb(53, 53, 53);
        margin: 0;
        padding: 1rem 1rem;
        border: none;
        padding: 0;
    }
</style>
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'real_effort_task.js' }}"></script>
<script>
    const optOutBtn = document.getElementById('optOutBtn');
    const optInBtn = document.getElementById('optInBtn');
    const optOutView = document.getElementById('option-out-container');
    const taskView = document.getElementById('working-task-container');

    // Hide Option Out View on load
    optOutView.style.display = "none";

    // Show Option Out View
    optOutBtn.onclick = function () {
        liveSend({ "type": "opt_out" });
        taskView.style.display = "none";
        optOutView.style.display = "block";
    }

    // Show Task View
    optInBtn.onclick = function () {
        liveSend({ type: "opt_out" });
        optOutView.style.display = "none";
        taskView.style.display = "block";
        window.scrollTo(0, 0);
    }

    // Close an Outside Option when reloading
    window.onbeforeunload = function () {
        liveSend({ type: "reload" });
    }

    // Receive data
    function liveRecv(message) {
        // console.log("received data:", message);

        switch (message.type) {
            case 'task':    // New task
                const es = message.equations;
                updateEquations(es);
                break;
        }
    }
</script>
{{ endblock }}