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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        Each choice is equally likely to determine your bonus. 
    </div>
    <div class="col-3 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 color:
        </div>
        <div id="selectedColor"
            style="background-color:{{player.participant.color}};
            height: 30px; width: 30px;margin:3%;">
        </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 {{numColors}} choices in the experiment determines your entire bonus. 
            Which choice (i.e., about which safe amount) 
            determines your bonus depends on the color you click below. 
            Each of the {{numColors}} colors corresponds to one of the {{numColors}} choices. 
            Therefore, each choice is equally likely to determine your bonus. 
        </p>
        </div>
    </div>

    
    <div class="row">
        {{ for index, color in colorScheme}}
        <div class="col-2 d-flex justify-content-center" style="min-height: 100px;">
            <button type="button" id="color_{{index}}"
                class ="btn btn-block"    
                style="background-color:{{color}}; width:80px; height:80px;"
                onclick="submitColor(this.id)"></button>
        </div>
        {{ endfor }}

    </div>

    {{ 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 safe amount belonging to each color. 
                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">
     function submitColor(buttonID) {
        const usedColor = buttonID.split("_").pop()
        const hexColor = document.getElementById(buttonID).style.backgroundColor
        document.getElementById("colorSelect").value = parseInt(usedColor)
        console.log(document.getElementById("colorSelect").value)
        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 %}