{% load i18n unfold %}

{% component "unfold/components/card.html" %}
    {% component "unfold/components/title.html" %}
        {% trans "Shipped vs Digital (30d)" %}
    {% endcomponent %}

    <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 "Digital" %}</span>
            <span class="font-medium">
                {{ shipped_vs_digital.digital_qty }} ({% firstof shipped_vs_digital.digital_pct 0 %}%) ·
                {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ shipped_vs_digital.digital_gross }}
            </span>
        </div>
        {% component "unfold/components/progress.html" with value=shipped_vs_digital.digital_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 "Shipped" %}</span>
            <span class="font-medium">
                {{ shipped_vs_digital.shipped_qty }} ({% firstof shipped_vs_digital.shipped_pct 0 %}%) ·
                {% if currency_symbol %}{{ currency_symbol }}{% endif %}{{ shipped_vs_digital.shipped_gross }}
            </span>
        </div>
        {% component "unfold/components/progress.html" with value=shipped_vs_digital.shipped_pct title='' description='' %}
        {% endcomponent %}
    </div>
{% endcomponent %}
