{% import "@SyliusAdmin/Common/Macro/money.html.twig" as money %}

<div class="ui grid">
    <div class="center aligned doubling four column row">
        <div class="column">
            <div class="ui red segment">
                <div class="ui small statistic">
                    <div id="total-sales" class="value" style="padding-bottom: 10px;">
                        {{ money.format(statistics.totalSales, channel.baseCurrency.code) }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.sales'|trans }}
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="ui yellow segment">
                <div class="ui small statistic">
                    <div id="new-orders" class="value" style="padding-bottom: 10px;">
                        {{ statistics.numberOfNewOrders }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.paid_orders'|trans }}
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="ui blue segment">
                <div class="ui small statistic">
                    <div id="new-customers" class="value" style="padding-bottom: 10px;">
                        {{ statistics.numberOfNewCustomers }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.customers'|trans }}
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="ui green segment">
                <div class="ui small statistic">
                    <div id="average-order-value" class="value" style="padding-bottom: 10px;">
                        {{ money.format(statistics.averageOrderValue, channel.baseCurrency.code) }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.average_order_value'|trans }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
