{% embed '@theme/embeds/card.html.twig' with {'margin_bottom': 0} %}
    {% from '@theme/components/buttons.html.twig' import action_cardtoolbutton %}
    {% block box_title %}
        {% if not title is empty %}{{ title|trans }}{% endif %}
    {% endblock %}
    {% block box_attributes %}
        id="PaginatedWorkingTimeChartBox" data-href="#" data-reload=""
    {% endblock %}
    {% block box_tools %}
        {% set prevYear = options.year %}
        {% set prevWeek = options.week %}
        {% set nextYear = options.year %}
        {% set nextWeek = options.week %}
        {% if options.week == 1 %}
            {% set prevYear = prevYear - 1 %}
            {% set prevWeek = data.lastWeekInLastYear %}
        {% else %}
            {% set prevWeek = prevWeek - 1 %}
        {% endif %}
        {% if options.week == data.lastWeekInYear %}
            {% set nextYear = nextYear + 1 %}
            {% set nextWeek = 1 %}
        {% else %}
            {% set nextWeek = nextWeek + 1 %}
        {% endif %}
        {{ action_cardtoolbutton('left', {'title': 'stats.workingTimeWeekShort'|trans({'%week%': (prevWeek ~ '/' ~ prevYear)}), 'class': 'pagination-link', 'onclick': 'myChart.destroy()', 'url': path('widgets_working_time_chart', {'year': prevYear, 'week': prevWeek})}) }}
        {{ action_cardtoolbutton('right', {'title': 'stats.workingTimeWeekShort'|trans({'%week%': (nextWeek ~ '/' ~ nextYear)}), 'class': 'pagination-link', 'onclick': 'myChart.destroy()', 'url': path('widgets_working_time_chart', {'year': nextYear, 'week': nextWeek})}) }}
    {% endblock %}
    {% block box_body %}
        {{ render_widget('DailyWorkingTimeChart', options|merge({'begin': data.begin, 'end': data.end})) }}
    {% endblock %}
    {% block box_footer %}
        <div class="row">
            <div class="col-sm-3 col-xs-6 mt-1 mb-2 mb-md-0">
                <div class="text-center">
                    <h5 class="mb-1">{{ data.day|duration }}</h5>
                    <span>{{ 'stats.workingTimeToday'|trans({'%day%': 'now'|date_short}) }}</span>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 mt-1 mb-2 mb-md-0">
                <div class="text-center">
                    <h5 class="mb-1">{{ data.week|duration }}</h5>
                    <span>{{ 'stats.workingTimeWeek'|trans({'%week%': data.begin|date_format('W')}) }}</span>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 mt-1 mb-2 mb-md-0">
                <div class="text-center">
                    <h5 class="mb-1">{{ data.month|duration }}</h5>
                    <span>{{ 'stats.workingTimeMonth'|trans({'%month%': data.thisMonth|month_name, '%year%': data.thisMonth|date_format('Y')}) }}</span>
                </div>
            </div>
            {% if data.financial is not null %}
            <div class="col-sm-3 col-xs-6 mt-1 mb-2 mb-md-0">
                <div class="text-center">
                    <h5 class="mb-1">{{ data.financial|duration }}</h5>
                    <span>{{ 'stats.workingTimeFinancialYear'|trans }}</span>
                </div>
            </div>
            {% else %}
            <div class="col-sm-3 col-xs-6 mt-1 mb-2 mb-md-0">
                <div class="text-center">
                    <h5 class="mb-1">{{ data.year|duration }}</h5>
                    <span>{{ 'stats.workingTimeYear'|trans({'%year%': data.dateYear}) }}</span>
                </div>
            </div>
            {% endif %}
        </div>
    {% endblock %}
{% endembed %}
{% if not kimai_context.javascriptRequest %}
<script type="text/javascript">
    document.addEventListener('kimai.initialized', function() {
        KimaiPaginatedBoxWidget.create('#PaginatedWorkingTimeChartBox');
    });
</script>
{% endif %}