{% load i18n unfold %}

<div class="mt-6 md:mt-8">
    {% component "unfold/components/card.html" %}
        {% component "unfold/components/title.html" %}
            {% trans "Most wished product" %}
        {% endcomponent %}
        {% if most_wished_products %}
            <ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
                {% for p in most_wished_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-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% elif most_wished_product %}
            <a href="{{ most_wished_product.admin_url }}" class="flex items-center gap-4">
                {% if most_wished_product.image %}
                    <img src="{{ most_wished_product.image }}" alt="{{ most_wished_product.name }}"
                         class="w-16 h-16 object-cover rounded"/>
                {% endif %}
                <span class="font-medium">{{ most_wished_product.name }}</span>
            </a>
        {% else %}
            {% component "unfold/components/text.html" %}
                {% trans "No data yet." %}
            {% endcomponent %}
        {% endif %}
    {% endcomponent %}
</div>
<div class="mt-6 md:mt-8">
    {% component "unfold/components/card.html" %}
        {% component "unfold/components/title.html" %}
            {% trans "Most popular product" %}
        {% endcomponent %}
        {% if most_popular_products %}
            <ul class="flex flex-col divide-y divide-gray-200 dark:divide-base-700/50">
                {% for p in most_popular_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-base-700/[.06] dark:bg-white/[.06] text-gray-700 dark:text-gray-200">{{ p.count }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% elif most_popular_product %}
            <a href="{{ most_popular_product.admin_url }}" class="flex items-center gap-4">
                {% if most_popular_product.image %}
                    <img src="{{ most_popular_product.image }}" alt="{{ most_popular_product.name }}"
                         class="w-16 h-16 object-cover rounded"/>
                {% endif %}
                <span class="font-medium">{{ most_popular_product.name }}</span>
            </a>
        {% else %}
            {% component "unfold/components/text.html" %}
                {% trans "No data yet." %}
            {% endcomponent %}
        {% endif %}
    {% endcomponent %}
</div>