{# Macro stat_card — tarjeta de KPI con icono, valor, medidor opcional y pista.
   Uso:
     {% from "core/components/stat.html" import stat_card %}
     <div class="dg-stat-grid">
       {{ stat_card("Referencias colocadas", "96,3", unit="%", icon="package", tone="brand",
                    meter=96.3, hint="1.214 de 1.260 referencias") }}
     </div>

   value  → ya formateado por la app (separadores y decimales del dominio).
   meter  → 0–100; se recorta a ese rango. Sin meter no se pinta la barra.
   hint   → texto bajo el valor; admite Markup si la app quiere resaltar cifras.
   attrs  → atributos extra para la tarjeta (data-*, id…), sin escapar.
#}
{% from "core/components/icon.html" import icon_tile as _icon_tile %}

{% macro stat_card(label, value, icon=none, tone="neutral", unit="", hint="", meter=none, meter_label="", attrs="") %}
<article class="dg-stat dg-tone-{{ tone }}"{% if attrs %} {{ attrs|safe }}{% endif %}>
  <div class="dg-stat-head">
    {%- if icon %}{{ _icon_tile(icon, tone=tone, size="sm") }}{% endif %}
    <span class="dg-stat-label">{{ label }}</span>
  </div>
  <div class="dg-stat-value">{{ value }}{% if unit %}<span class="dg-stat-unit">{{ unit }}</span>{% endif %}</div>
  {#- NaN no es igual a sí mismo: un medidor no numérico no pinta barra. #}
  {%- if meter is not none and (meter|float) == (meter|float) %}
  {%- set _pct = [[meter|float, 0.0]|max, 100.0]|min %}
  <div class="dg-meter" role="progressbar" aria-valuenow="{{ _pct|round(1) }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ meter_label or label }}">
    <span class="dg-meter-bar" style="--dg-meter: {{ _pct|round(1) }}%"></span>
  </div>
  {%- endif %}
  {%- if hint %}
  <div class="dg-stat-hint">{{ hint }}</div>
  {%- endif %}
</article>
{%- endmacro %}