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

{% block title %}
<div class="row align-items-center">
    <div class="col-8">
        Each choice is equally likely to determine your bonus. 
    </div>
    <div class="col-4 d-flex justify-content-center align-items-center">
        <div id="chosenColorText" class="d-none" style="font-size: 16px; font-weight: normal; margin:3%;">
            Your selected colored form:
        </div>
        <div id="selectedShape" style="--element-color: {{player.participant.color}}">
        </div>
    </div>
</div>
{% endblock %}

{% block content %}

<div class="d-none">
    {{ formfield_errors "colorSelect" }}
    <input type="hidden" id="colorSelect" name="colorSelect" value="-9999"></input>
</div>

<div class="container-fluid bg-light my-3 px-3 py-3 rounded border" style="position:relative">


    <div class="row">
        <div class="col">
            <p>
            One of your choices   
            determines your entire bonus.
            Which choice (i.e., about which number of winning cards) 
            determines your bonus depends on the colored form you click below. 
            Each of the {{numColors}} colored forms corresponds to
            another number of winning cards. 
            Therefore, each choice is equally likely to determine your bonus. 
        </p>
        </div>
    </div>

    
    {{for row in colorScheme}}
        <div class="row">
            <div class="col-1 d-flex justify-content-center" style="min-height: 70px;">
                &nbsp;
            </div>
            {{ for index, color, shape in row}}
                
                    <div class="col-1 d-flex justify-content-center" style="min-height: 70px;">
                    <button type="button" id="color_{{index}}"
                        class ="btn btn-block"    
                        onclick="submitColor(this.id)">
                        <div class="{{shape}}" style="--element-color: {{color}}">
                        </div>
                    </button>
                    </div>
                
            {{ endfor }}

        </div>
    {{endfor}}


    {{ if treatment == 0}}
    <div id="verifyDesc" class="row">
        <div class="col">
            <div class="alert alert-success">
                <b>Note:</b> 
                Verification.pdf shows the choice/the number of winning cards belonging to each colored form. 
                You can thus verify that the choice that determines your bonus is selected fairly and exactly as described above.
            </div>
        </div>
    </div>
    {{ endif }}


    <button id="next_page_btn" class="btn btn-primary mt-2" disabled>
        Got it. Let's start.</button>

      
</div>


{% if testing %}
    {{ formfield 'feedback_colorSelect' }}
{% endif %}

<!--Load Babel-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
    const colorScheme = js_vars.colorScheme
    console.log(colorScheme)

     function submitColor(buttonID) {
        const usedColor = buttonID.split("_").pop()
        const typeNumber = parseInt(usedColor)
        document.getElementById("colorSelect").value = typeNumber
        
        const row = parseInt(typeNumber / 10)
        const col = typeNumber % 10
        const currentData = colorScheme[row][col]

        const hexColor = currentData[1]
        const shape = currentData[2]

        let insertShape = document.getElementById("selectedShape")

        insertShape.classList.remove(...insertShape.classList);

        insertShape.classList.add(shape)
        insertShape.style.setProperty("--element-color", hexColor)

        console.log(usedColor)
        document.getElementById("next_page_btn").disabled = false
        //document.getElementById("selectedColor").style.backgroundColor = hexColor
        document.getElementById("chosenColorText").classList.remove("d-none")

    }
</script>



{% endblock %}