{% load i18n unfold %}

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4 mb-4">
    {% component "unfold/components/card.html" %}
        <div class="flex items-start justify-between">
            {% component "unfold/components/text.html" %}{% trans "GMV" %} ({{ tf|default:30 }}d){% endcomponent %}
            {% with d=kpi.gmv.delta_pct|default:0 %}
                <span class="text-xs px-2 py-0.5 rounded-full {% if d >= 0 %} bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 {% else %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 {% endif %}">
                    {% if d >= 0 %}+{% endif %}{{ d }}%
                </span>
            {% endwith %}
        </div>
        {% component "unfold/components/title.html" %}
            {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ kpi.gmv.value|default:0 }}
        {% endcomponent %}
    {% endcomponent %}

    {% component "unfold/components/card.html" %}
        <div class="flex items-start justify-between">
            {% component "unfold/components/text.html" %}{% trans "Orders" %} ({{ tf|default:30 }}d){% endcomponent %}
            {% with d=kpi.orders.delta_pct|default:0 %}
                <span class="text-xs px-2 py-0.5 rounded-full {% if d >= 0 %} bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 {% else %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 {% endif %}">
                    {% if d >= 0 %}+{% endif %}{{ d }}%
                </span>
            {% endwith %}
        </div>
        {% component "unfold/components/title.html" %}
            {{ kpi.orders.value|default:0 }}
        {% endcomponent %}
    {% endcomponent %}

    {% component "unfold/components/card.html" %}
        <div class="flex items-start justify-between">
            {% component "unfold/components/text.html" %}{% trans "AOV" %} ({{ tf|default:30 }}d){% endcomponent %}
            {% with d=kpi.aov.delta_pct|default:0 %}
                <span class="text-xs px-2 py-0.5 rounded-full {% if d >= 0 %} bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 {% else %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 {% endif %}">
                    {% if d >= 0 %}+{% endif %}{{ d }}%
                </span>
            {% endwith %}
        </div>
        {% component "unfold/components/title.html" %}
            {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ kpi.aov.value|default:0 }}
        {% endcomponent %}
    {% endcomponent %}

    {% component "unfold/components/card.html" %}
        <div class="flex items-start justify-between">
            {% component "unfold/components/text.html" %}{% trans "Net revenue" %} ({{ tf|default:30 }}d){% endcomponent %}
            {% with d=kpi.net.delta_pct|default:0 %}
                <span class="text-xs px-2 py-0.5 rounded-full {% if d >= 0 %} bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 {% else %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 {% endif %}">
                    {% if d >= 0 %}+{% endif %}{{ d }}%
                </span>
            {% endwith %}
        </div>
        {% component "unfold/components/title.html" %}
            {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ kpi.net.value|default:0 }}
        {% endcomponent %}
    {% endcomponent %}

    {% component "unfold/components/card.html" %}
        <div class="flex items-start justify-between">
            {% component "unfold/components/text.html" %}{% trans "Refund rate" %} ({{ tf|default:30 }}d){% endcomponent %}
            {% with d=kpi.refund_rate.delta_pct|default:0 %}
                <span class="text-xs px-2 py-0.5 rounded-full {% if d <= 0 %} bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 {% else %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 {% endif %}">
                    {% if d >= 0 %}+{% endif %}{{ d }}%
                </span>
            {% endwith %}
        </div>
        {% component "unfold/components/title.html" %}
            {{ kpi.refund_rate.value|default:0 }}%
        {% endcomponent %}
        {% component "unfold/components/text.html" with class="text-xs text-gray-500 dark:text-gray-400" %}
            {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ returns_amount|default:0 }} {% trans "returned" %}
        {% endcomponent %}
    {% endcomponent %}
</div>
