{% load i18n unfold %}

{% component "unfold/components/card.html" %}
    {% component "unfold/components/title.html" %}
        {% trans "Customers mix (30d)" %}
    {% endcomponent %}
    {% if customers_mix.total|default:0 > 0 %}
        <div class="flex flex-col gap-3">
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600 dark:text-gray-300">{% trans "New customers" %}</span>
                <span class="font-medium">{{ customers_mix.new }} ({{ customers_mix.new_pct }}%)</span>
            </div>
            {% component "unfold/components/progress.html" with value=customers_mix.new_pct title='' description='' %}
            {% endcomponent %}

            <div class="flex items-center justify-between text-sm mt-2">
                <span class="text-gray-600 dark:text-gray-300">{% trans "Returning customers" %}</span>
                <span class="font-medium">{{ customers_mix.returning }} ({{ customers_mix.returning_pct }}%)</span>
            </div>
            {% component "unfold/components/progress.html" with value=customers_mix.returning_pct title='' description='' %}
            {% endcomponent %}
        </div>
    {% else %}
        {% component "unfold/components/text.html" %}
            {% trans "No customer activity in the last 30 days." %}
        {% endcomponent %}
    {% endif %}
{% endcomponent %}
