{% set backgroundColor = config('theme.chart.background_color') %}
{% set borderColor = config('theme.chart.border_color') %}
{% set gridColor = config('theme.chart.grid_color') %}
{% set colors = options.color|default('')|split(';') %}
{% set type = options.type|default('line') %}
{% if type not in ['line', 'bar'] %}
    {% set type = 'line' %}
{% endif %}

{% if not title is empty %}
<p class="text-center">
    <strong>
        {{ title|trans }}
    </strong>
</p>
{% endif %}

<div class="chart">
    <canvas id="timeChart" style="height: {{ config('theme.chart.height') }}px;"></canvas>
</div>

<script type="text/javascript">
document.addEventListener('kimai.initialized', function() {
    new Chart(
        document.getElementById('timeChart').getContext('2d'), {
            type: '{{ type }}',
            data: {
                labels: moment.months(),
                datasets: [
                {% for yearName, year in data %}
                    {% set yearBackgroundColor = backgroundColor %}
                    {% set yearBorderColor = borderColor %}

                    {% if colors[loop.index-1] is defined %}
                    {% set yearColors = colors[loop.index-1]|split('|') %}
                    {% if yearColors.0 is defined and not yearColors.0 is empty %}
                    {% set yearBackgroundColor = yearColors.0 %}
                    {% set yearBorderColor = yearColors.0 %}
                    {% if yearColors.1 is defined and not yearColors.1 is empty %}
                    {% set yearBorderColor = yearColors.1 %}
                    {% endif %}
                    {% endif %}
                    {% endif %}

                    {
                        label           : '{{ yearName }}',
                        backgroundColor : '{{ yearBackgroundColor }}',
                        borderColor     : '{{ yearBorderColor }}',
                        pointRadius     : 2,
                        borderWidth     : 1,
                        pointHitRadius  : 10,
                        lineTension     : 0.3,
                        data            : [
                            {% for month in year.months %}
                            {{ month.totalDuration|chart_duration }}
                            {% if not loop.last %},{% endif %}
                            {% endfor %}
                        ],
                        realData        : [
                            {% for month in year.months %}
                            '{{ month.totalDuration|duration }}'
                            {% if not loop.last %},{% endif %}
                            {% endfor %}
                        ]
                    }
                    {% if not loop.last %},{% endif %}
                {% endfor %}
                ]
            },
            options: {
                maintainAspectRatio: true,
                responsive: true,
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: true,
                            color: '{{ gridColor }}',
                            lineWidth: 1
                        }
                    }]
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
                        }
                    }
                }
            }
        }
    );
});
</script>