{% embed '@theme/embeds/card.html.twig' with {'margin_bottom': 0} %}
    {% block box_title %}
        <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
            {{ title }}
            <div id="heatmap-controls" style="display: flex; gap: 8px; margin-left: auto;"></div>
        </div>
    {% endblock %}
    {% block box_body %}
        <link rel="stylesheet" href="{{ asset('bundles/kimaiheatmap/heatmap.css') }}">
        <div id="heatmap-container"
             data-url="{{ path('heatmap_data') }}"
             data-projects="{{ data.projects|json_encode }}"
             data-timesheet-url="{{ path('timesheet') }}"
             data-week-start="{{ data.weekStart }}"
             style="min-height: 150px;">
        </div>
        <script src="{{ asset('bundles/kimaiheatmap/heatmap.js') }}"></script>
        <script type="text/javascript">
            var initHeatmap = function() {
                KimaiHeatmap.init(document.getElementById('heatmap-container'));
            };
            {% if kimai_context is defined and kimai_context.javascriptRequest %}
                initHeatmap();
            {% else %}
                document.addEventListener('kimai.initialized', initHeatmap);
            {% endif %}
        </script>
    {% endblock %}
{% endembed %}