{block name='productdetails-price-history'}
    {block name='productdetails-price-history-canvas'}
        <div>
            <canvas id="priceHistoryChart"></canvas>
            <div class="et-price-history-chart-source" style="display:none;">
                {* This div is invisible - but its CSS styles for background-color and border-color can be used to control the canvas colors via SCSS *}
            </div>
        </div>
    {/block}
    {block name='productdetails-price-history-script'}
        {inline_script}<script>
            var ctx = document.getElementById('priceHistoryChart').getContext('2d'),
                priceHistoryChart = null,
                chartDataTitle = "{lang key='priceFlow' section='productDetails' addslashes=true}";
                chartData = {
                labels:   [],
                datasets: [
                    {
                        label:            "{lang section='productDetails' key='PriceFlowTitle' printf=(string)$Einstellungen.preisverlauf.preisverlauf_anzahl_monate addslashes=true} " + "({JTL\Session\Frontend::getCurrency()->getName()})",
                        backgroundColor:  {block name="et-price-chart-background-color"}getComputedStyle(document.querySelector('.et-price-history-chart-source')).backgroundColor{/block},
                        borderColor:      {block name="et-price-chart-border-color"}getComputedStyle(document.querySelector('.et-price-history-chart-source')).borderColor{/block},
                        fill:             {block name="et-price-chart-fill"}false{/block},
                        lineTension:      {block name="et-price-chart-line-tension"}0{/block},
                        pointRadius:      {block name="et-price-chart-point-radius"}5{/block},
                        pointHoverRadius: {block name="et-price-chart-point-hover-radius"}8{/block},
                        data:             []
                    }
                ]
            };

            {foreach array_reverse($preisverlaufData) as $pv}
                chartData.labels.push('{$pv->date}');
                chartData.datasets[0].data.push('{$pv->fPreis}');
                chartDataCurrency = '{$pv->currency}';
                chartDataTooltip = "{lang key='price' addslashes=true}: ";
            {/foreach}

            document.dispatchEvent(new Event('priceChartUpdated'));
        </script>{/inline_script}
    {/block}
{/block}
