{# Headline number plus period-over-period change.

   Green/red here are deliberate, unlike in widgets/donut.html which
   avoids them: a delta really is a good/bad signal, so it reads in the
   same colours as a success/danger toast. The arrow carries the
   direction too, so the meaning survives for anyone who cannot separate
   the two hues. #}
{% from "admin/components/icons.html" import icon %}
<div class="flex items-end justify-between gap-3">
  <p class="{{ ui('text', 'metric') }}">{{ widget_data.value }}</p>
  {% if widget_data.direction == "up" %}
  <span class="inline-flex shrink-0 items-center gap-0.5 text-sm font-medium text-emerald-600 dark:text-emerald-400">
    {{ icon("arrow-up", "h-4 w-4") }}{{ widget_data.delta }}%
  </span>
  {% elif widget_data.direction == "down" %}
  <span class="inline-flex shrink-0 items-center gap-0.5 text-sm font-medium text-destructive">
    {{ icon("arrow-down", "h-4 w-4") }}{{ widget_data.delta }}%
  </span>
  {% else %}
  <span class="shrink-0 text-sm font-medium text-muted-foreground">{{ _("no change") }}</span>
  {% endif %}
</div>