{% embed 'dashboard/widget.html.twig' %}
    {% import "macros/widgets.html.twig" as widgets %}
    {% import "macros/progressbar.html.twig" as progress %}
    {% block box_body %}
        {% set id = tabler_unique_id('chart_active_users') %}
        {% set values = [
            {title: 'stats.activeRecordings'|trans, value: data.now, color: 'green' },
            {title: 'daterangepicker.today'|trans({}, 'daterangepicker'), value: data.today, color: 'green' },
            {title: 'daterangepicker.thisWeek'|trans({}, 'daterangepicker'), value: data.week, color: 'blue' },
            {title: 'daterangepicker.thisMonth'|trans({}, 'daterangepicker'), value: data.month, color: 'purple' },
            {title: 'daterangepicker.thisYear'|trans({}, 'daterangepicker'), value: data.year, color: 'yellow' },
        ] %}
        {% if data.financial is not null %}
            {% set values = values|merge([
                {title: 'daterangepicker.thisFinancialYear'|trans({}, 'daterangepicker'), value: data.financial, color: 'yellow' },
            ]) %}
        {% endif %}
        <div class="row">
            <div class="col-xl-8 col-sm-12">
                <div class="chart-container" style="position: relative">
                    <canvas class="chartjs" id="{{ id }}" style="height: {{ config('theme.chart.height') }}px; width: 100%;"></canvas>
                </div>
                <script>
                    document.addEventListener('{{ options.renderEvent|default('kimai.initialized') }}', function() {
                        new Chart(
                            document.getElementById('{{ id }}').getContext("2d"), {
                                type: 'bar',
                                data: {
                                    labels: [
                                        {% for row in data.days %}
                                        '{{ row.date|date_weekday }}',
                                        {% endfor %}
                                    ],
                                    datasets: [{
                                        axis: 'y',
                                        data: [
                                            {% for row in data.days %}
                                            {{ row.amount }},
                                            {% endfor %}
                                        ],
                                        /*
                                        backgroundColor: '{{ config('theme.chart.background_color') }}',
                                 */
                                        backgroundColor: [
                                            'rgba(255, 99, 132, 0.4)',
                                            'rgba(255, 159, 64, 0.4)',
                                            'rgba(255, 205, 86, 0.4)',
                                            'rgba(75, 192, 192, 0.4)',
                                            'rgba(54, 162, 235, 0.4)',
                                            'rgba(153, 102, 255, 0.4)',
                                            'rgba(201, 203, 207, 0.4)'
                                        ],
                                        borderWidth: 0,
                                        barThickness: 10
                                    }]
                                },
                                options: {

                                    maintainAspectRatio: true,
                                    responsive: true,
                                    indexAxis: 'y',
                                    plugins: {
                                        legend: {
                                            display: false
                                        }
                                    }
                                }
                            }
                        );
                    });
                </script>
            </div>
            <div class="col-xl-4 col-sm-12 mt-2">
                <ul class="p-0 m-0">
                {% for row in values %}
                    <li class="d-flex mb-2">
                        <div class="d-flex w-100 flex-wrap justify-content-between gap-2">
                            <div class="me-2">{{ row.title }}</div>
                            <div class="fw-bold">{{ row.value }}</div>
                        </div>
                    </li>
                {% endfor %}
                </ul>
            </div>
        </div>

    {% endblock %}
{% endembed %}