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

<div class="title{% if loop.first %} active{% endif %}">
    <i class="dropdown icon"></i>
    {{ statistic.channel.name }}
</div>
<div class="content{% if loop.first %} active{% endif %}">
    <div class="ui center aligned stackable divided grid">
        <div class="four column row">
            <div class="column middle aligned">
                <div class="ui tiny statistic">
                    <div class="value sylius-channel-name">
                        {% if statistic.channel.color is not empty %}
                            <span class="ui large empty horizontal circular label" style="background-color: {{ statistic.channel.color }}"></span>
                        {% endif %}
                        {{ statistic.channel.name }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.channel'|trans }}
                    </div>
                </div>
            </div>
            <div class="column middle aligned">
                <div class="ui statistic">
                    <div class="value sylius-orders-count">
                        {{ statistic.ordersCount }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.orders'|trans }}
                    </div>
                </div>
            </div>
            <div class="column middle aligned">
                <div class="ui statistic">
                    <div class="value sylius-orders-total">
                        {{ money.format(statistic.ordersValue, statistic.channel.baseCurrency.code) }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.total_value_of_orders'|trans }}
                    </div>
                </div>
            </div>
            <div class="column middle aligned">
                <div class="ui statistic">
                    <div class="value sylius-average-order-value">
                        {{ money.format(statistic.averageOrderValue, statistic.channel.baseCurrency.code) }}
                    </div>
                    <div class="label">
                        {{ 'sylius.ui.average_order_value'|trans }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
