{{ block title }}
    {{ if player.round_number == 1 }}
        Period 0 - Initial Estimates
    {{ elif player.round_number < 5 }}
        Estimates for Period {{ round }}
    {{ elif player.round_number == 5 }}
        Previous Participant
    {{ endif }}
{{ endblock }}
{{ block content }}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

{{ if player.round_number == 5 and partner_estimates.Round4.Selection == None }}
    <p>
    Unfortunately, the previous participant did not complete the study.
    <br>
    You can proceed by clicking "Next".
    </p>
    <br>
{{ elif player.round_number == 5 and partner_estimates.Round4.Selection != None }}
<p>
 <table style="width:100%">
  <tr>
      <th style="width:48%">The previous participant made the following choices:</th>
      <th style="text-align: center; width:13%">Initial Choice</th>
      <th style="text-align: center; width:13%">Period 1</th>
      <th style="text-align: center; width:13%">Period 2</th>
      <th style="text-align: center; width:13%">Period 3</th>
  </tr>
  <tr>
      <td style="width:48%"></td>
      <td style="text-align: center">{{ partner_estimates.Round1.Selection }}</td>
      <td style="text-align: center">{{ partner_estimates.Round2.Selection }}</td>
      <td style="text-align: center">{{ partner_estimates.Round3.Selection }}</td>
      <td style="text-align: center">{{ partner_estimates.Round4.Selection }}</td>
  </tr>
</table>
</p>
{{ endif }}

{{ if player.round_number < 5 }}
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

<script>
    let signalsA = js_vars.changesA;
    let signalsB = js_vars.changesB;
    let signalsC = js_vars.changesC;
    let signalsD = js_vars.changesD;
    let InitialBelieveA = js_vars.InitialBelieveA;
    let InitialBelieveB = js_vars.InitialBelieveB;
    let InitialBelieveC = js_vars.InitialBelieveC;
    let InitialBelieveD = js_vars.InitialBelieveD;

    var limit = js_vars.round_number +2


    Highcharts.chart('container', {
        chart: {
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            height: "50%",
            events: {  //creates legend matching the colors of the series
                load: function() {
                    var chart = this;
                    chart.series.forEach(function(series) {
                        var zoneColor = series.options.zones && series.options.zones[0].color;
                        chart.legend.allItems.find(item => item.name === series.name).color = zoneColor;
                    });
                    chart.legend.render();
                }
            }
        },

        credits: {
            enabled: false
        },

        title: {
            text:   '{{ if player.round_number < 5 }}'+
                        'Price Development'+
                    '{{ else }}'+
                        'Price Development Previous Participant'+
                    '{{ endif }}',
            style: {
                fontSize: '18px'
            }
        },


        xAxis: {
            min: 0,
            max: 6,
            categories: ['-3', '-2', '-1', '0', '1', '2', '3'],
            tickColor: "#e6e6e6ff",
            lineColor: "#e6e6e6",
            title: {
                text: 'Period'
            }
        },

        yAxis: {
            min: 70,
            max: 130,
            tickInterval: 10,
            title: {
                text: 'Price'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        plotOptions: {
            line: {
                animation: false,
                lineWidth: 3,
                point: {
                    shadow: false
                }
            },
            series: {
                marker: {
                    enabled: true,
                    radius: 6
                },
                label: {
                    enabled: true,
                },
            }
        },

        tooltip: {
            headerFormat: 'Period: {point.x}<br/>',
            pointFormat: 'Price: {point.y}',
        },

        legend: {
            enabled: true, // Display legend
            itemStyle: {
            color: 'black' // Set the default legend text color
        }
        },


         series: [
             {
                name: 'Stock A',
                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsA[i]
                        });
                    }
                    return data;
                }()),
                 marker: {
                    symbol: 'square' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveA < 50 ? 'red' : (InitialBelieveA > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#111111'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveA < 50 ? 'red' : (InitialBelieveA > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#111111'+
                            '{% endif %}'
            }
                ]
            },

            {
                name: 'Stock B',
                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsB[i]
                        });
                    }
                    return data;
                }()),
                marker: {
                    symbol: 'diamond' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveB < 50 ? 'red' : (InitialBelieveB > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#696969'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveB < 50 ? 'red' : (InitialBelieveB > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#696969'+
                            '{% endif %}'
            }
                ]
            },
            {
                name: 'Stock C',
                                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsC[i]
                        });
                    }
                    return data;
                }()),
                marker: {
                    symbol: 'circle' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveC < 50 ? 'red' : (InitialBelieveC > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#A9A9A9'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveC < 50 ? 'red' : (InitialBelieveC > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#A9A9A9'+
                            '{% endif %}'
            }
                ]
            },
        ]
    });
</script>

{{ elif player.round_number == 5 and partner_estimates.Round4.Selection != None }}
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

<script>
    let signalsA = js_vars.changesA;
    let signalsB = js_vars.changesB;
    let signalsC = js_vars.changesC;
    let signalsD = js_vars.changesD;
    let InitialBelieveA = js_vars.InitialBelieveA;
    let InitialBelieveB = js_vars.InitialBelieveB;
    let InitialBelieveC = js_vars.InitialBelieveC;
    let InitialBelieveD = js_vars.InitialBelieveD;

    var limit = js_vars.round_number +2


    Highcharts.chart('container', {
        chart: {
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            height: "50%",
            events: {  //creates legend matching the colors of the series
                load: function() {
                    var chart = this;
                    chart.series.forEach(function(series) {
                        var zoneColor = series.options.zones && series.options.zones[0].color;
                        chart.legend.allItems.find(item => item.name === series.name).color = zoneColor;
                    });
                    chart.legend.render();
                }
            }
        },

        credits: {
            enabled: false
        },

        title: {
            text:   '{{ if player.round_number < 5 }}'+
                        'Price Development'+
                    '{{ else }}'+
                        'Price Development Previous Participant'+
                    '{{ endif }}',
            style: {
                fontSize: '18px'
            }
        },


        xAxis: {
            min: 0,
            max: 6,
            categories: ['-3', '-2', '-1', '0', '1', '2', '3'],
            tickColor: "#e6e6e6ff",
            lineColor: "#e6e6e6",
            title: {
                text: 'Period'
            }
        },

        yAxis: {
            min: 70,
            max: 130,
            tickInterval: 10,
            title: {
                text: 'Price'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },

        plotOptions: {
            line: {
                animation: false,
                lineWidth: 3,
                point: {
                    shadow: false
                }
            },
            series: {
                marker: {
                    enabled: true,
                    radius: 6
                },
                label: {
                    enabled: true,
                },
            }
        },

        tooltip: {
            headerFormat: 'Period: {point.x}<br/>',
            pointFormat: 'Price: {point.y}',
        },

        legend: {
            enabled: true, // Display legend
            itemStyle: {
            color: 'black' // Set the default legend text color
        }
        },


         series: [
             {
                name: 'Stock A',
                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsA[i]
                        });
                    }
                    return data;
                }()),
                 marker: {
                    symbol: 'square' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveA < 50 ? 'red' : (InitialBelieveA > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#111111'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveA < 50 ? 'red' : (InitialBelieveA > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#111111'+
                            '{% endif %}'
            }
                ]
            },

            {
                name: 'Stock B',
                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsB[i]
                        });
                    }
                    return data;
                }()),
                marker: {
                    symbol: 'diamond' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveB < 50 ? 'red' : (InitialBelieveB > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#696969'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveB < 50 ? 'red' : (InitialBelieveB > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#696969'+
                            '{% endif %}'
            }
                ]
            },
            {
                name: 'Stock C',
                                data: (function () {
                    // generate an array of random data
                    var data = [];

                    for (i = 0; i<=limit; i+=1) {
                        data.push({
                            x: i,
                            y: signalsC[i]
                        });
                    }
                    return data;
                }()),
                marker: {
                    symbol: 'circle' // Change the symbol for Stock A to a square
            },
                zoneAxis: 'x',
                zones: [
            {
                value: 3,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveC < 50 ? 'red' : (InitialBelieveC > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#A9A9A9'+
                            '{% endif %}'
            },
            {
                value: 200,
                color: '{% if player.treatment == "color" %}' +
                            InitialBelieveC < 50 ? 'red' : (InitialBelieveC > 50 ? 'green' : 'black') +
                            '{% else %}' +
                            '#A9A9A9'+
                            '{% endif %}'
            }
                ]
            },
        ]
    });
</script>
{{ endif }}

{{ if player.round_number < 5 }}
    {{ if player.round_number > 1 and player.round_number < 5 and player.treatment2 == "public" }}
    <b>Your current choice as well as your initial choice will be observed by the next participant.</b>
    {{ elif player.round_number > 1 and player.round_number < 5 and player.treatment2 == "private" }}
    <b>Provide your estimates.</b>
    {{ else }}
        <!--<b>Please provide your estimates for each stock.</b>-->
        <b>Provide your initial estimates.</b>
    {{ endif }}
<p>
    <div class="row">
        {{ if player.round_number == 1 }}
            <div class="col-sm-3" style="margin-bottom: 0px;">
                <label>Choose the best stock:</label>
            </div>
            <div class="col-sm-9 align-self-center" style="margin-bottom: 0px;">
                {{ form.Best }}
            </div>
        {{ elif player.treatment2 == "public" }}
            <div class="col-sm-6" style="margin-bottom: 0px;">
                <label>Choose the best stock (observed by the next participant):</label>
            </div>
            <div class="col-sm-6 align-self-center" style="margin-bottom: 0px;">
                {{ form.Best }}
            </div>
        {{ elif player.treatment2 == "private" }}
            <div class="col-sm-6" style="margin-bottom: 0px;">
                <label>Choose the best stock:</label>
            </div>
            <div class="col-sm-6 align-self-center" style="margin-bottom: 0px;">
                {{ form.Best }}
            </div>
        {{ endif }}
        <div class="row">
            <div class="col-sm-12" style="margin-bottom: 20px;">
            {{ if player.round_number > 1 and player.treatment2 == "public" }}
                <small id="update">Your initial choice was {{ player.InitialBest }} (observed by the next participant).</small>
                <script>
                    for (let radio of forminputs.Best) {
                        radio.onclick = function() {
                            var value = forminputs.Best.value;
                            document.getElementById('update').innerHTML = 'Your initial choice was {{ player.InitialBest }} (observed by the next participant).';
                        };
                    }
                </script>
            {{ elif player.round_number > 1 and player.treatment2 == "private" }}
                <small id="update">Your initial choice was {{ player.InitialBest }}.</small>
                <script>
                    for (let radio of forminputs.Best) {
                        radio.onclick = function() {
                            var value = forminputs.Best.value;
                            document.getElementById('update').innerHTML = 'Your initial choice was {{ player.InitialBest }}.';
                        };
                    }
                </script>
            {{ else }}
                <small id="update">Make your initial choice.</small>
                <script>
                    for (let radio of forminputs.Best) {
                        radio.onclick = function() {
                            var value = forminputs.Best.value;
                            document.getElementById('update').innerHTML = 'Your initial choice is '+value+'.';
                        };
                    }
                </script>
            {{ endif }}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4 align-self-center" style="margin-bottom: 10px;">
            <small><label>Likelihood that stock A is in the <i>good</i> state:</label> </small><input name="A" type="number" size="1"/>
            {{ formfield_errors "A" }}
        </div>
        <div class="col-sm-4 align-self-center" style="margin-bottom: 10px;">
            <small><label>Likelihood that stock B is in the <i>good</i> state:</label> </small><input name="B" type="number" size="1"/>
            {{ formfield_errors "B" }}
        </div>
        <div class="col-sm-4 align-self-center" style="margin-bottom: 10px;">
            <small><label>Likelihood that stock C is in the <i>good</i> state:</label> </small><input name="C" type="number" size="1"/>
            {{ formfield_errors "C" }}
        </div>
    </div>
</p>

{{ elif player.round_number == 5 and partner_estimates.Round4.Selection != None }}
    <b>Please evaluate the performance of the previous participant.</b>
<p>
    {{ formfield "performance" }}
    {{ form.newinfo.label }}
    <br>
    {{ form.newinfo }}
    <br>
    <span id="update"><br></span>
        <script>
            for (let radio of forminputs.newinfo) {
                radio.onclick = function() {
                    var value = forminputs.newinfo.value;
                    if (value > 3) {
                        document.getElementById('update').innerHTML = '<br>{{ form.goodperformance.label }} {{ form.goodperformance }}';
                    };
                    if (value < 3) {
                        document.getElementById('update').innerHTML = '<br>{{ form.badperformance.label }} {{ form.badperformance }}';
                    }
                };
            }
        </script>
</p>
{{ endif }}

{{ next_button }}
{{ endblock }}