{{ block title }}

{{ if group.round_number == 1 }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 33.3%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 1 / 3 </div>
</div>
{{ elif group.round_number == 2 }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 66.6%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 2 / 3 </div>
</div>
{{ else }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 3 / 3 </div>
</div>
{{ endif }}
<br>

    Round {{ player.round_number }}
{{ endblock }}

{{ block content }}

    <div class="row">
        <div class="card bg-light m-3">
            <br>
            <!-- <h5>
                <u><strong>Round {{ player.round_number }}</strong></u>
            </h5> -->
            <p>
                You are <strong>Person A</strong> and are given <strong>{{ player.ENDOWMENT }}</strong>.
            </p>
            <p>
                How much of the {{ player.ENDOWMENT }} do you wish to transfer to 
                Person B and Person C, respectively? You get to keep the rest of the money for yourself.
            </p>
        </div>
    </div>

    <br>
    <p>   
        You have chosen to transfer {{ player.sent_amount_B }} to Person B
        and {{ 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>

    <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 percentage_A = payoff_A / endowment * 100
        let percentage_B = payoff_B / endowment * 100
        let percentage_C = payoff_C / 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: 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 (You)',
                        y: payoff_A,
                        z: percentage_A,
                        drilldown: ''
                    },
                    {
                        name: 'Person B',
                        y: payoff_B,
                        z: percentage_B,
                        drilldown: ''
                    },
                    {
                        name: 'Person C',
                        y: payoff_C,
                        z: percentage_C,
                        drilldown: ''
                    },
                ]
            }
        ],
    });

    </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 }}