{{ block title }}
Match
{{ endblock }}

{{ block content }}

{{ include "_bots_party.html" }}

<main id="main" class="d-flex flex-column align-items-center ot-fade" hidden>
    <h3 ot-text="vars.iteration"></h3>

    <p ot-text="vars.task.question"></p>

    <div class="d-flex flex-row gap-3 justify-content-center">
        <button ot-click-input type="button" name="answer" value="0" class="btn btn-primary" ot-text="vars.task.options.0.label"></button>
        <button ot-click-input type="button" name="answer" value="1" class="btn btn-primary" ot-text="vars.task.options.1.label"></button>
        <button ot-click-input type="button" name="answer" value="2" class="btn btn-primary" ot-text="vars.task.options.2.label"></button>
        <button ot-click-input type="button" name="answer" value="3" class="btn btn-primary" ot-text="vars.task.options.3.label"></button>
    </div>
</main>

<input type="hidden" name="answers" ot-value="vars.answers" value="{{player.answers}}">
{{ formfield_errors 'answers' }}

{{ endblock }}

{{ block styles }}
<link href="{{ static 'global/otree-front-ext.css' }}" rel="stylesheet" />
<link href="{{ static 'main.css' }}" rel="stylesheet" />
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'global/otree-front-2.0.b2.js' }}"></script>
<script src="{{ static 'global/otree-front-ext.js' }}"></script>
<script>
    const TASKS = js_vars.tasks;
    const NUM_TASKS = TASKS.length;
    const FADEOUT_TIME = parseInt(getStyleProp("--ot-fade-out-time"));

    onLoad(startPage);
    onInput('answer', inputAnswer);
    onSubmit(saveAnswers);

    function startPage() {
        vars.iteration = 0;
        nextIter();
    };

    function nextIter() {
        resetTrial();

        if (vars.iteration == NUM_TASKS) {
            ot.submitPage();
        } else {
            vars.iteration += 1;
            startTrial(TASKS[vars.iteration - 1]);
        }
    };

    function resetTrial() {
        vars.task = null;
        ot.disableInputs();
        ot.updatePage();
    }

    function startTrial(task) {
        vars.task = task;
        ot.showDisplay('main');
        ot.enableInputs();
        ot.updatePage();
    };

    function inputAnswer(option) {
        ot.disableInputs();
        vars.task.answer = vars.task.options[option].value;
        completeTrial();
    };

    async function completeTrial() {
        ot.hideDisplay('main');
        await ot.delay(FADEOUT_TIME);
        nextIter();
    };

    function saveAnswers() {
        ot.enableInput("answers");
        vars.answers = TASKS.map(t => t.answer).join("|");
    }
</script>
{{ endblock }}