{% load i18n unfold %}

{% component "unfold/components/card.html" %}
    {% component "unfold/components/title.html" %}
        {% trans "Most returned products (30d)" %}
    {% endcomponent %}
    {% if most_returned_products %}
        <ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
            {% for p in most_returned_products %}
                <li class="py-2 first:pt-0 last:pb-0">
                    <a href="{{ p.admin_url }}" class="flex items-center gap-4">
                        {% if p.image %}
                            <img src="{{ p.image }}" alt="{{ p.name }}"
                                 class="w-12 h-12 object-cover rounded"/>
                        {% endif %}
                        <span class="font-medium flex-1 truncate">{{ p.name }}</span>
                        <span class="text-xs px-2 py-0.5 rounded bg-red-500/10 text-red-700 dark:text-red-300">×{{ p.count }}</span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        {% component "unfold/components/text.html" %}
            {% trans "No returns in the last 30 days." %}
        {% endcomponent %}
    {% endif %}
{% endcomponent %}
