{% load i18n unfold %}

{% component "unfold/components/card.html" %}
    {% component "unfold/components/title.html" %}
        {% trans "Low stock" %}
    {% endcomponent %}

    {% if low_stock_products %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for p in low_stock_products %}
                <a href="{{ p.admin_url }}" class="flex items-center justify-between py-2 hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md px-2 -mx-2">
                    <div class="min-w-0">
                        <div class="truncate font-medium">{{ p.name }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">SKU: {{ p.sku }}</div>
                    </div>
                    <div class="text-sm">
                        <span class="px-2 py-0.5 rounded-full text-xs
                                   {% if p.qty|default:0 <= 0 %} bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300
                                   {% elif p.qty <= 5 %} bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300
                                   {% else %} bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-200 {% endif %}">
                            {{ p.qty }}
                        </span>
                    </div>
                </a>
            {% endfor %}
        </div>
    {% else %}
        {% component "unfold/components/text.html" with class="text-sm text-gray-500 dark:text-gray-400" %}
            {% trans "No low stock items." %}
        {% endcomponent %}
    {% endif %}
{% endcomponent %}
