{{ block title }}
Task
{{ endblock }}
{{ block content }}

<p>Round: <strong>{{ period }} of {{ num_periods }}</strong></p>
<p>{% formfield player.prediction1 label="What is your prediction for the next quarter?" %}</p>
{{ if player.round_number == 20 }}

{{ else }}
<p>
    {% formfield player.prediction2 label="What is your prediction for the quarter after next quarter?" %}
</p>
{{ endif }}
    <p><button name="continue" class="btn btn-primary btn-large">Submit</button></p>


      <div id="highcharts-container"></div>

{{ if player.treatment == '1' }}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>

  var roundNumber = js_vars.round;
  function generateCategoriesFromRound(roundNumber) {
    var categories = [];
    var startNumber = 37 + roundNumber - 1; // Start from 37 and increment based on the round number
    var totalNumbersNeeded = 4; // Total numbers to display

    for (var i = 0; i < totalNumbersNeeded; i++) {
        categories.push(startNumber + i); // Push the numbers 37, 38, 39, 40 for the first round
    }

    return categories;
}

<!--function generateCategoriesFromRound(roundNumber) {-->
<!--    var startYear = 2010;-->
<!--    var categories = [];-->
<!--    var quartersPerYear = 4;-->
<!--    var yearsToAdd = Math.floor((roundNumber - 1) / quartersPerYear); // Number of full years to skip-->
<!--    var startQuarter = (roundNumber - 1) % quartersPerYear + 1; // Determine start quarter in the starting year-->

<!--    startYear += yearsToAdd; // Move start year forward by the number of full years to skip-->

<!--    var totalQuartersNeeded = 4; // Total quarters to display-->
<!--    for (var year = startYear; categories.length < totalQuartersNeeded; year++) {-->
<!--        for (var quarter = 1; quarter <= quartersPerYear; quarter++) {-->
<!--            if (year === startYear && quarter < startQuarter) {-->
<!--                continue; // Skip quarters before the starting one in the first year-->
<!--            }-->
<!--            categories.push(year + 'Q' + quarter);-->
<!--            if (categories.length === totalQuartersNeeded) {-->
<!--                return categories;-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--    return categories;-->
<!--}-->





$(function () {
    Highcharts.chart('highcharts-container', {
        chart: {
            type: 'line',
        },
        title: {
            text: 'Historical inflation rate over Periods'
        },
        xAxis: {
            title: {
                text: 'Quarter'
            },
           categories: generateCategoriesFromRound(roundNumber),
            labels: {
                step: 1,
                style: {
                    fontSize: '12px'
                },
                rotation: -45
            }
        },
        yAxis: {
            title: {
                text: 'Inflation (%)'
            },
            min: {{ chart_min|json }},
            max: {{ chart_max|json }},
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 0
            }
        },
        series: {{ chart_series|json }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});

</script>

{{ else }}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
   $(function () {
    Highcharts.chart('highcharts-container', {
        chart: {
            type: 'line',
        },
        title: {
            text: 'Historical inflation rate over Periods'
        },
        xAxis: {
            title: {
                text: 'Quarter'
            },
            categories: (function () {
                var categories = [];
                for (var i = 1; i <= 60; i++) {
                    categories.push(i.toString());
                }
                return categories;
            }()),
         labels: {
          step: 1,
         style: {
            fontSize: '8px' // Reduce the font size as needed
          },
           rotation: -45 // Optional: Rotate labels (values in degrees, e.g., -45, 45)
         }
        },
        yAxis: {
            title: {
                text: 'Inflation (%) '
            },
            min: {{ chart_min|json }},
            max: {{ chart_max|json }},
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 0
            }
        },
        series:
            {{ chart_series|json }},
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
});
</script>

{{ endif }}

{{ endblock }}