{# Card components. `.card` itself is a CSS class (tusk-app.css) — wrap
   content in <div class="card p-4"> directly; the macro here is for the
   one card shape that carries logic.

   Macros: stat_card
#}

{% macro stat_card(label, value, icon="", color="brand", change="", change_type="") %}
{# Big number with a label. color: brand | green | red | amber | violet | teal | fg.
   change_type "up" / "down" colours the delta green / red. #}
{% set tones = {
    "brand": "var(--brand)", "blue": "var(--brand)", "indigo": "var(--brand)",
    "green": "var(--green)", "red": "var(--red)",
    "amber": "var(--accent-amber)", "yellow": "var(--accent-amber)", "orange": "var(--accent-amber)",
    "violet": "var(--accent-violet)", "purple": "var(--accent-violet)",
    "teal": "var(--accent-teal)", "fg": "var(--fg)", "gray": "var(--fg-3)"
} %}
<div class="card p-4 flex items-start justify-between gap-3">
    <div class="min-w-0">
        <div class="stat-value" style="color: {{ tones[color] | default('var(--fg)') }}">{{ value }}</div>
        <div class="text-sm text-fg-3 mt-1">{{ label }}</div>
        {% if change %}
        <div class="text-xs mt-1 {% if change_type == 'up' %}chip chip-green{% elif change_type == 'down' %}chip chip-rose{% else %}text-fg-3{% endif %}">
            {% if change_type == 'up' %}+{% elif change_type == 'down' %}−{% endif %}{{ change }}
        </div>
        {% endif %}
    </div>
    {% if icon %}
    <i data-lucide="{{ icon }}" class="w-6 h-6 flex-shrink-0 text-fg-4"></i>
    {% endif %}
</div>
{% endmacro %}