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

{% block title %}
<div class="row align-items-center">
    <div class="col-9">
        The other option is a safe amount of money.
    </div>
    <div id="selectedEveTxt" class="col-3 d-flex justify-content-center align-items-right"
        style="font-size: 16px; font-weight: normal;">
        
        <div class="row">
            <div class="col-6 d-flex align-items-center justify-content-center" style="padding: 0;">
                You selected:
            </div>
            <div class="col-6 d-flex justify-content-center align-items-right">
                <svg class="envelopeHeader"
                    viewBox="0 0 200 100" 
                    stroke="rgb(86,86,86)" stroke-width="2">

                    <!--Outer frame-->
                    <polyline 
                        points="0,0 0,100 200,100 200,0 0,0"
                        style="fill: #fff8ef;"/>

                    <!--Inner lines-->
                    <line x1="0" y1="0" x2="100" y2="35"/>
                    <line x1="200" y1="0" x2="100" y2="35"/>
                    
                    <text 
                        font-size="1.8em"
                        text-anchor="end" 
                        x="95%" y="90%" 
                        fill="black">
                        {{player.participant.type}}
                    </text>
                </svg>
            </div>
        </div>  
    </div>
</div>
{% endblock %}

{% block content %}

<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col">   
            <p>
                If you instruct us to give you the <strong>safe amount</strong> as bonus, 
                you receive that amount with certainty.
            </p>
        </div>
    </div>
    
    <hr>
    <div class="row">
        <div class="col">   
            Each envelope that you could have selected contains an
                option pair
                as shown below:
            <ul>
            <li>
                The risk is identical in all 
                envelopes. It is similar to the risk 
                you just saw, but with different outcomes.  
            </li>
            <li>
                The safe amount £x varies in the different envelopes.
            </li>
            </ul>   
        </div>
    </div>

    <div class="row">
        <div class="col-10 offset-1">
            <table class="table table-bordered border-dark" style="background-color: white">
                <tbody>
                    <tr>
                        <td id="option1_header" class="clickable text-center" style="width: 50%">
                            <strong>Risk</strong>
                        </td>
                        <td id="option2_header" class="clickable text-center" style="width: 50%">
                            <strong>Safe amount</strong> 
                        </td>
                    </tr>
                    <tr>
                        <td id="option1">
                            <div class="riskPicture"></div>
                        </td>
                        <td id="option2">
                            <div id="emptyAmount" class="d-flex align-items-center justify-content-center"
                                style="
                                width: 100%;
                                left: 0px;
                                top: 0px;
                                margin: 0 auto;
                                font-size: 500%;
                                font-weight: 200;"
                            >    
                            £x
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="row">
        <div class="col">   
            <div class="alert alert-info">
                For each option pair that could be in your 
                Envelope {{player.participant.type}}, you 
                instruct us about which option
                determines your bonus. 
            </div>
        </div>
    </div>

    <button id="next_page_btn" 
        class="btn btn-primary mt-2"
        >
        Okay. What's next?
    </button>
</div>

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

<!--Load React-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

<script type="text/babel" src="{% static 'js/shellGameResolution.js' %}"></script>

<script type="text/babel">
    const payoffs = js_vars.payoffs
    const amounts = js_vars.amounts
   
    ReactDOM.render(
        <ShellGame
            payoffs = {js_vars.payoffs}
            probabilities = {[0.5, 0,5]}
        />, document.querySelector('.riskPicture'))
    
    function submitEnvelope(buttonID) {
        const selectedEnvelope = buttonID.split("_").pop()
        document.getElementById("envelopeSelect").value = parseInt(selectedEnvelope)
        document.getElementById("envelopeNum").innerHTML = selectedEnvelope
        document.getElementById("envelopeNum1").innerHTML = selectedEnvelope
        document.getElementById("envelopeNum2").innerHTML = selectedEnvelope
        document.getElementById("hint").classList.remove("d-none")
        document.getElementById("next_page_btn").classList.remove("d-none")
        //document.getElementById("pleaseSelect").classList.add("d-none")
        greyEnvelopes(selectedEnvelope)

        setTimeout(
            function () {
                document.getElementById("next_page_btn").removeAttribute("disabled")
            },
            5000 // 5 Seconds
        );
    }

    function greyEnvelopes(selectedID) {
        var envelopes = document.getElementsByClassName('envelopeInterior');
        for(let i = 0; i < envelopes.length; i++) {
            if (envelopes[i].id != selectedID) {
                envelopes[i].style.fill = 'lightgray';
            } else {
                envelopes[i].style.fill = '#fff8ef';
            }
        }
    }



</script>


{% endblock %}