{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
Decolor a colored ball triangle
{% endblock %}

{% block content %}

<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div class="row">
            <div class="col">   
                <p>
                    You instruct the computer 
                    to <i>continue</i> or <i>stop</i> risk-taking
                    for each path leading to each {{player.participant.color}} ball
                    <strong>by decoloring the balls of an initially {{player.participant.color}} ball triangle.</strong>
                </p>   
            </div>
        </div>
    </div>

    <!-- REACT component loaded here -->
    <div class="component-container"></div>

    <div id="startColoring" class="row collapse show">
        <div class="col alert alert-success">
            Please click and decolor at least three {{player.participant.color}} balls!
            You must decolor at least one <b>outer</b> and one <b>interior</b> ball.
        </div>
    </div>

    <div id="endColoring" class="row collapse">
        <div class="col">
            <div class="row alert alert-info"> 
                <div class="col">
                    Thank you for decoloring at least three {{player.participant.color}} balls.
                </div>
            </div>
            <div class="row">
                <div class="col" style="padding:0px;">
                    <button id="next_page_btn" class="btn btn-primary px-3">
                        Continue with comprehension questions
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{% if testing %}
    <button id="skipBtn" class="btn btn-secondary px-3">
    Skip for testing</button>
{% endif %}

<!--Load Components-->
<script type="text/babel" src="{% static 'js/decisionPanelInstr.js' %}"></script>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>
<script type="text/babel" src="{% static 'js/nodeDecision.js' %}"></script>

<script type="text/babel">
    ReactDOM.render(<ChoiceSituationWrapper 
                show = {true}
                whatToShow = {3}
                allColored = {() => {allColored()}}
                initialColor = {js_vars.initialColor}
            />, document.querySelector('.component-container'))
    
    function allColored () {
        $('#startColoring').collapse('hide')
        
        setTimeout(() => {
            $('#endColoring').collapse('show')
            
        }, 400)

    }

    $( document ).ready(function() {
        const all = document.getElementsByClassName('ball');
        for (let i = 0; i < all.length; i++) {
            all[i].removeAttribute("disabled") 
        }
    });

</script>

{% endblock %}