{{ 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 }}
    <p>
        The previous participant observed the price development below and provided the following estimates:
    </p>
{{ endif }}

<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: 'Price Development',
            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 %}'
            }
                ]
            },
            {
                name: 'Stock D',
                                data: (function () {
                    // generate an array of random data
                    var data = [];

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

{{ if player.round_number < 5 }}
    {{ if player.round_number > 1 and player.round_number < 5 }}
    <b>Remember that the states you select as well as your initially selected states will be observed by the next participant.</b>
    {{ else }}
        <b>Please provide your estimates for each stock.</b>
    {{ endif }}
<p>
    <div class="row">
        <div class="col-sm-3 align-self-center" style="margin-bottom: 10px;">
            {{ form.GoodA.label}}<br> {{ form.GoodA }}
            {{ if player.round_number > 1 }}
                {{ if player.PrevGoodA == "Good" }}
                    <script>forminputs.GoodA.value = "Good"</script>
                {{ else }}
                    <script>forminputs.GoodA.value = "Bad"</script>
                {{ endif }}
            {{ endif }}
            {{ formfield_errors "GoodA" }}
        </div>
        <div class="col-sm-6 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="2"/> %
            {{ if player.round_number > 1 }}
                <script>forminputs.A.value = {{ prevA }}</script>
            {{ endif }}
            {{ formfield_errors "A" }}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 align-self-center" style="margin-bottom: 10px;">
            {{ form.GoodB.label}}<br> {{ form.GoodB }}
            {{ if player.round_number > 1 }}
                {{ if player.PrevGoodB == "Good" }}
                    <script>forminputs.GoodB.value = "Good"</script>
                {{ else }}
                    <script>forminputs.GoodB.value = "Bad"</script>
                {{ endif }}
            {{ endif }}
            {{ formfield_errors "GoodB" }}
        </div>
        <div class="col-sm-6 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="2"/> %
            {{ if player.round_number > 1 }}
                <script>forminputs.B.value = {{ prevB }}</script>
            {{ endif }}
            {{ formfield_errors "B" }}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 align-self-center" style="margin-bottom: 10px;">
            {{ form.GoodC.label}}<br> {{ form.GoodC }}
            {{ if player.round_number > 1 }}
                {{ if player.PrevGoodC == "Good" }}
                    <script>forminputs.GoodC.value = "Good"</script>
                {{ else }}
                    <script>forminputs.GoodC.value = "Bad"</script>
                {{ endif }}
            {{ endif }}
            {{ formfield_errors "GoodC" }}
        </div>
        <div class="col-sm-6 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="2"/> %
            {{ if player.round_number > 1 }}
                <script>forminputs.C.value = {{ prevC }}</script>
            {{ endif }}
            {{ formfield_errors "C" }}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 align-self-center" style="margin-bottom: 10px;">
            {{ form.GoodD.label}}<br> {{ form.GoodD }}
            {{ if player.round_number > 1 }}
                {{ if player.PrevGoodD == "Good" }}
                    <script>forminputs.GoodD.value = "Good"</script>
                {{ else }}
                    <script>forminputs.GoodD.value = "Bad"</script>
                {{ endif }}
            {{ endif }}
            {{ formfield_errors "GoodD" }}
        </div>
        <div class="col-sm-6 align-self-center" style="margin-bottom: 10px;">
            <small><label>Likelihood that stock D is in the <i>good</i> state:</label> </small><input name="D" type="number" size="2"/> %
            {{ if player.round_number > 1 }}
                <script>forminputs.D.value = {{ prevD }}</script>
            {{ endif }}
            {{ formfield_errors "D" }}
        </div>
    </div>
</p>

{{ elif player.round_number == 5 }}

<p>
 <table style="width:100%">
  <tr>
      <th style="text-align: center">Stock</th>
      <th style="text-align: center">Initial Estimate</th>
      <th style="text-align: center">Period 1</th>
      <th style="text-align: center">Period 2</th>
      <th style="text-align: center">Period 3</th>
  </tr>
  <tr>
      <td style="text-align: center">A</td>
      <td style="text-align: center">{{ partner_estimates.Round1.DecisionA }}</td>
      <td style="text-align: center">{{ partner_estimates.Round2.DecisionA }}</td>
      <td style="text-align: center">{{ partner_estimates.Round3.DecisionA }}</td>
      <td style="text-align: center">{{ partner_estimates.Round4.DecisionA }}</td>
  </tr>
  <tr>
      <td style="text-align: center">B</td>
      <td style="text-align: center">{{ partner_estimates.Round1.DecisionB }}</td>
      <td style="text-align: center">{{ partner_estimates.Round2.DecisionB }}</td>
      <td style="text-align: center">{{ partner_estimates.Round3.DecisionB }}</td>
      <td style="text-align: center">{{ partner_estimates.Round4.DecisionB }}</td>
  </tr>
  <tr>
      <td style="text-align: center">C</td>
      <td style="text-align: center">{{ partner_estimates.Round1.DecisionC }}</td>
      <td style="text-align: center">{{ partner_estimates.Round2.DecisionC }}</td>
      <td style="text-align: center">{{ partner_estimates.Round3.DecisionC }}</td>
      <td style="text-align: center">{{ partner_estimates.Round4.DecisionC }}</td>
  </tr>
  <tr>
      <td style="text-align: center">D</td>
      <td style="text-align: center">{{ partner_estimates.Round1.DecisionD }}</td>
      <td style="text-align: center">{{ partner_estimates.Round2.DecisionD }}</td>
      <td style="text-align: center">{{ partner_estimates.Round3.DecisionD }}</td>
      <td style="text-align: center">{{ partner_estimates.Round4.DecisionD }}</td>
  </tr>
</table>
</p>
<p>
{{ formfield "performance" }}
</p>
{{ endif }}

{{ next_button }}
{{ endblock }}