{% load i18n unfold %}

{% component "unfold/components/card.html" %}
    {% component "unfold/components/title.html" %}
        {% trans "Top categories by quantity (30d)" %}
    {% endcomponent %}
    {% if top_categories %}
        <ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
            {% for c in top_categories %}
                <li class="py-2 first:pt-0 last:pb-0">
                    <a href="{{ c.admin_url }}" class="flex items-center gap-4">
                        <span class="font-medium flex-1 truncate">{{ c.name }}</span>
                        <span class="text-xs px-2 py-0.5 rounded bg-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ c.qty }}</span>
                        <span class="text-xs text-gray-600 dark:text-gray-300 whitespace-nowrap">
                            {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ c.gross }}
                        </span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        {% component "unfold/components/text.html" %}
            {% trans "No category sales in the last 30 days." %}
        {% endcomponent %}
    {% endif %}
{% endcomponent %}
