{{ 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? Your decision will be made known to Person B, who will then
                decide the amount 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_B }} to Person B,
        who will in turn decide the amount to transfer 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 endowment = js_vars.endowment

        let percentage_A = payoff_A / endowment * 100
        let percentage_B = payoff_B / 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,
            tickPositions: [0, endowment/2, 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 <br> ' +
                            '<br> <strong> (Person B will decide how much of this <br> amount to transfer to Person C) </strong> ',
                        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_seq' }}

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

{{ endblock }}