{% trans_default_domain 'admin' %}

{% set s = stats %}
{% set deliveryRate = s.total > 0 ? (s.delivered / s.total * 100)|round : 0 %}
{% set openRate     = s.delivered > 0 ? (s.opened / s.delivered * 100)|round : 0 %}
{% set clickRate    = s.delivered > 0 ? (s.clicked / s.delivered * 100)|round : 0 %}
{% set bounceRate   = s.total > 0 ? (s.bounced / s.total * 100)|round : 0 %}
{% set sparkMax     = s.spark|length > 0 ? max(s.spark) : 0 %}

{% set cards = [
    { icon: 'ph:paper-plane-tilt', tone: 'primary', label: 'outbox.stats.sent',      value: s.total,            sub: 'outbox.stats.sentSub',   spark: true },
    { icon: 'ph:check-circle',     tone: 'sky',     label: 'outbox.stats.delivery',  value: deliveryRate ~ '%', sub: 'outbox.stats.deliverySub'|trans({ delivered: s.delivered, total: s.total }) },
    { icon: 'ph:eye',              tone: 'emerald', label: 'outbox.stats.open',      value: openRate ~ '%',     sub: 'outbox.stats.openSub'|trans({ opened: s.opened }) },
    { icon: 'ph:cursor-click',     tone: 'violet',  label: 'outbox.stats.click',     value: clickRate ~ '%',    sub: 'outbox.stats.clickSub'|trans({ clicked: s.clicked }) },
    { icon: 'ph:warning',          tone: 'red',     label: 'outbox.stats.bounce',    value: s.bounced,          sub: 'outbox.stats.bounceSub'|trans({ rate: bounceRate }), href: path('email_delivery_errors') },
] %}

{% set tones = {
    primary: 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-400',
    sky:     'bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400',
    emerald: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
    violet:  'bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400',
    red:     'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400',
} %}

<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
    {% for card in cards %}
        {% set tag = card.href|default(false) ? 'a' : 'div' %}
        <{{ tag }} {% if card.href|default(false) %}href="{{ card.href }}"{% endif %}
            class="relative block overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4{{ card.href|default(false) ? ' transition hover:border-gray-300 dark:hover:border-gray-700' : '' }}">
            <div class="flex items-center gap-2">
                <span class="grid size-7 place-items-center rounded-lg {{ tones[card.tone] }}">
                    <twig:ux:icon name="{{ card.icon }}" class="size-4" />
                </span>
                <span class="text-xs font-semibold text-gray-500 dark:text-gray-400">{{ card.label|trans }}</span>
                {% if card.href|default(false) %}
                    <twig:ux:icon name="ph:arrow-right" class="ml-auto size-3.5 text-gray-300 dark:text-gray-600" />
                {% endif %}
            </div>
            <div class="mt-2.5 text-3xl font-bold tracking-tight tabular-nums text-gray-900 dark:text-gray-50">{{ card.value }}</div>
            <div class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">
                {% if card.sub == 'outbox.stats.sentSub' %}{{ card.sub|trans }}{% else %}{{ card.sub }}{% endif %}
            </div>
            {% if card.spark|default(false) %}
                <div class="mt-2.5 flex h-6 items-end gap-0.5">
                    {% for v in s.spark %}
                        <i class="flex-1 rounded-t-sm bg-gray-200 dark:bg-gray-700" style="height: {{ sparkMax > 0 ? (6 + v / sparkMax * 94)|round : 6 }}%"></i>
                    {% endfor %}
                </div>
            {% endif %}
        </{{ tag }}>
    {% endfor %}
</div>
