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

{{ block title }}
What you won
{{ endblock }}
{{ block content }}

<!-- 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>

<!-- Load ChoiceList and ChoiceSimple Component -->
<script type="text/babel" src="{{ static 'global/choice_list.js'}}"></script>
<script type="text/babel" src="{{ static 'global/choice_simple.js'}}"></script>

{{if correct_check == True}}
<p>
    Round {{selected_round}} was randomly selected to determine your bonus. In it you were offered the following
    options:
</p>

<div id="root"></div>

<p>
    {{chosen_text}}
</p>
<p>
    Therefore, your bonus is {{player.payoff|to0}}.
</p>
<p>
    Thank you once again for participating.
</p>
<div class="alert alert-secondary">
    <strong>Notes:</strong><br>
    This is also where we would redirect the participant to the completion URL of Prolific or provide completion codes.
</div>


<script type="text/babel">
    class WrapperPage extends React.Component {
        render() {
            let options
            if (this.props.type == "simple") {
                options = <ChoiceSimple prob_up={js_vars.prob_up} pay_up={js_vars.pay_up} pay_down={js_vars.pay_down}
                    pay_certain={js_vars.pay_certain} />
            } else {
                options = <ChoiceList prob_up={js_vars.prob_up} pay_up={js_vars.pay_up} pay_down={js_vars.pay_down} initialListItems={js_vars.lables_choice_list.length} listLabels={js_vars.lables_choice_list} deactivated={true} />
            }
            return (
                <div>
                    {options}
                </div>
            )
        }
    }



    ReactDOM.render(<WrapperPage type={js_vars.round_type} />, document.getElementById('root'));


</script>

{{else}}
<p>
    Unfortunately you answered our comprehension questions incorrectly. The quality of the experimental data is
    extremely important to us and we cannot let you take part in the experiment. This means your bonus is
    {{player.payoff|to0}}.

</p>
{{endif}}



{{ endblock }}