{{ block title }}
    Your Decision
{{ endblock }}

{{ block content }}

    <div class="row">
        <div class="card bg-light m-3">
            <br>
            <p>
                Person A started with {{ player.INITIAL_ENDOWMENT }} and decided to keep {{ player.kept_amount_A }} 
                and passed on the remaining amount to Person B. 
            </p>
            <p>
                You are <strong>Person B</strong> and you received <strong>{{ player.ENDOWMENT }}</strong> from Person A.
            </p>
            <p>
                How much of the {{ player.ENDOWMENT }} do you wish to transfer to
                Person C? You get to keep the rest of the money for yourself.
            </p>
        </div>
    </div>

    <br>
    <p>
        You have chosen to transfer {{ player.sent_amount_C }} to Person C.
    </p>




<!--     Include bar chart here-->
    <script src="{{ static 'highcharts.js'}}"></script>

    <style>
        #container {
            height: 200px;
        }
    </style>

    <figure class="highcharts-figure">
        <p class="highcharts-description">   
<!--            Include description here -->
        </p>
        <div id="container"></div>
    </figure>

    <p id="your_payoff"></p>
    <p id="your_value"></p>

    <script>
        let payoff_A = js_vars.payoff_A
        let payoff_B = js_vars.payoff_B
        let payoff_C = js_vars.payoff_C
        let endowment = js_vars.endowment
        let initial_endowment = js_vars.initial_endowment

        let percentage_A = payoff_A / initial_endowment * 100
        let percentage_B = payoff_B / initial_endowment * 100
        let percentage_C = payoff_C / initial_endowment * 100


        // Create the chart
        Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            align: 'left',
            text: ''
        },
        subtitle: {
            align: 'left',
            text: ''
        },
        accessibility: {
            announceNewData: {
                enabled: false
            }
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            min: 0,
            max: initial_endowment,
            tickPositions: [0, initial_endowment/2, initial_endowment],
            title: {
                text: 'Payoff'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '${point.y:.2f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.z:.1f} %</b> of initial amount <br/>'
        },

        series: [
            {
                name: '',
                colorByPoint: false,
                data: [
                {
                        name: 'Person A',
                        y: payoff_A,
                        z: percentage_A,
                        drilldown: '',
                        color: '#CD5C5C',
                    },
                    {
                        name: 'Person B (You)',
                        y: payoff_B,
                        z: percentage_B,
                        drilldown: ''
                    },
                    {
                        name: 'Person C',
                        y: payoff_C,
                        z: percentage_C,
                        drilldown: ''
                    },
                ]
            }
        ],
    });

        // document.getElementById("your_payoff").innerHTML = "Your payoff is";
        // document.getElementById("your_value").innerHTML = payoff_A;
        // document.querySelectorAll(payoff_A);

    </script>

    <p>
        <font size="-1">(Note: Hovering the cursor over an individual column brings up a more detailed breakdown.)</font>
    </p>

    <br>

    <p>
        Click 'Make Changes' to change your decision or click 'Confirm' to finalize your decision.
    </p>

    {{ formfield_errors 'redo' }}

    <button name="redo" value="True" class="btn btn-primary">Make Changes</button>
    <button name="redo" value="False" class="btn btn-primary">Confirm</button>

{{ endblock }}