{% load wagtailimages_tags %}

{% if variants %}
<div class="flex w-full gap-2">

    {% for var in variants %}
    <a href="{{var.url}}" class="flex items-center gap-1 rounded border-2 px-2 py-1">
        {% image var.specific.search_image fill-40x40 %}

        <!-- <img src="{{var.specific.search_image.file.url}}" alt="{{var.specific.search_image.title}}" class="w-10"> -->
        <span class="text-sm opacity-80 flex items-center">
            {% if dealPrice %}
            {{ settings.core.CurrencySettings.icon|safe }}
            {{ dealPrice }}
            {% elif mrp %}
            {{ settings.core.CurrencySettings.icon|safe }}
            {{ mrp }}
            {% endif %}
        </span>
        
    </a>
    {% endfor %}
</div>
{% endif %}