<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{# @deprecated tag:v6.7.0 - The component sw-dashboard-statistics will be removed #}
{% block sw_dashboard_statistics %}
<div
    v-if="acl.can('order.viewer')"
    class="sw-dashboard-statistics"
>
    <template v-if="isLoading">
        <sw-skeleton variant="detail" />
        <sw-skeleton variant="detail" />
    </template>

    <template v-else>
        <template v-if="hasOrderToday">
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_dashboard_statistics_intro_stats_headline %}
            <div class="sw-dashboard-statistics__card-headline">
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_index_content_intro_stats_headline_title %}
                <h1>{{ $tc('sw-dashboard.todayStats.headline') }}</h1>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_intro_stats_headline_date %}
                <span class="sw-dashboard-statistics__card-headline-timerange">
                    {{ formatChartHeadlineDate(today) }}
                </span>
                {% endblock %}
            </div>
            {% endblock %}

            <sw-card position-identifier="sw-dashboard-statistics-stats-today">
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_intro_stats_today %}
                <div class="sw-dashboard-statistics__intro-stats-today">
                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_dashboard_statistics_intro_stats_today_stats %}
                    <div
                        v-if="hasOrderToday"
                        class="sw-dashboard-statistics__intro-stats-today-stats"
                    >
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_intro_stats_today_stats_single_count %}
                        <div class="sw-dashboard-statistics__intro-stats-today-single-stat">
                            <span class="sw-dashboard-statistics__intro-stats-today-single-stat-number-type">{{ $tc('sw-dashboard.todayStats.orders') }}</span>
                            <span class="sw-dashboard-statistics__intro-stats-today-single-stat-number-value">{{ orderCountToday }}</span>
                        </div>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_intro_stats_today_stats_single_sum %}
                        <div class="sw-dashboard-statistics__intro-stats-today-single-stat">
                            <span class="sw-dashboard-statistics__intro-stats-today-single-stat-number-type">{{ $tc('sw-dashboard.todayStats.turnover') }}</span>
                            {# price aggregations do not support currencies yet, see NEXT-5069 #}
                            <span class="sw-dashboard-statistics__intro-stats-today-single-stat-number-value">{{ currencyFilter(orderSumToday, systemCurrencyISOCode, 2) }}</span>
                        </div>
                        {% endblock %}
                    </div>
                    {% endblock %}
                </div>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_grid %}
                <template #grid>
                    <sw-entity-listing
                        v-if="todayOrderDataLoaded"
                        :sort-by="todayOrderDataSortBy"
                        :sort-direction="todayOrderDataSortDirection"
                        :repository="orderRepository"
                        :items="todayOrderData"
                        :columns="orderGridColumns()"
                        :show-selection="false"
                        :allow-column-edit="false"
                        :full-page="false"
                    >
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_grid_created_at %}
                        <template
                            #column-orderDateTime="{ item }"
                        >
                            {{ dateFilter(item.orderDateTime, {
                            hour: '2-digit',
                            minute: '2-digit',
                            year: undefined,
                            month: undefined,
                            day: undefined
                            }) }}
                        </template>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_grid_first_name %}
                        <template #column-orderCustomer.firstName="{ item }">
                            <router-link
                                :to="{ name: 'sw.order.detail', params: { id: item.id } }"
                                class="sw-data-grid__cell-value"
                            >
                                {{ item.orderCustomer.firstName }} {{ item.orderCustomer.lastName }}
                            </router-link>
                        </template>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_grid_short_name %}
                        <template
                            #column-amountTotal="{ item }"
                        >
                            {{ currencyFilter(item.amountTotal, item.currency.isoCode) }}
                        </template>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_grid_state %}
                        <template #column-stateMachineState.name="{ item }">
                            <sw-label
                                :variant="getVariantFromOrderState(item)"
                                appearance="pill"
                            >
                                {{ item?.stateMachineState?.translated?.name }}
                            </sw-label>
                        </template>
                        {% endblock %}

                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_dashboard_statistics_grid_actions %}
                        <template
                            #actions="{ item }"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_dashboard_statistics_grid_actions_view %}
                            <sw-context-menu-item
                                class="sw-order-list__order-view-action"
                                :router-link="{ name: 'sw.order.detail', params: { id: item.id } }"
                            >
                                {{ $tc('sw-order.list.contextMenuView') }}
                            </sw-context-menu-item>
                            {% endblock %}

                        </template>
                        {% endblock %}

                    </sw-entity-listing>

                    <sw-loader v-else-if="!todayOrderDataLoaded" />
                </template>
                {% endblock %}
            </sw-card>
        </template>

        <sw-extension-component-section
            position-identifier="sw-chart-card__before"
            deprecation-message="Use sw-dashboard__before-content or sw-dashboard__after-content instead."
            :deprecated="true"
        />

        <template v-if="hasOrderInMonth">
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_dashboard_statistics_count %}
            <sw-chart-card
                class="sw-dashboard-statistics__statistics-count"
                :available-ranges="availableRanges"
                :card-subtitle="getCardSubtitle(ordersDateRange)"
                :series="orderCountSeries"
                :options="chartOptionsOrderCount"
                :fill-empty-values="ordersDateRange.aggregate"
                type="line"
                sort
                position-identifier="sw-chart-card__statistics-count"
                @sw-chart-card-range-update="onOrdersRangeUpdate"
            >
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_count_title %}
                <template #header-title>
                    {{ $tc('sw-dashboard.monthStats.orderNumber') }}
                </template>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_count_range_select %}
                <template #range-option="{ range }">
                    {{ $tc(`sw-dashboard.monthStats.dateRanges.${range}`) }}
                </template>
                {% endblock %}
            </sw-chart-card>
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_dashboard_statistics_sum %}
            <sw-chart-card
                class="sw-dashboard-statistics__statistics-sum"
                :available-ranges="availableRanges"
                :card-subtitle="getCardSubtitle(turnoverDateRange)"
                :series="orderSumSeries"
                :options="chartOptionsOrderSum"
                :fill-empty-values="turnoverDateRange.aggregate"
                type="line"
                sort
                position-identifier="sw-chart-card__statistics-sum"
                @sw-chart-card-range-update="onTurnoverRangeUpdate"
            >
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_sum_title %}
                <template #header-title>
                    {{ $tc('sw-dashboard.monthStats.turnover') }}
                    <sw-help-text
                        class="sw-dashboard-index__help-text"
                        :text="$tc('sw-dashboard.monthStats.helperText')"
                    />
                </template>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_dashboard_statistics_sum_range_select %}
                <template #range-option="{ range }">
                    {{ $tc(`sw-dashboard.monthStats.dateRanges.${range}`) }}
                </template>
                {% endblock %}
            </sw-chart-card>
            {% endblock %}
        </template>

        <sw-extension-component-section
            position-identifier="sw-chart-card__after"
            deprecation-message="Use sw-dashboard__before-content or sw-dashboard__after-content instead."
            :deprecated="true"
        />
    </template>
</div>
{% endblock %}
