{# @description The size of a move and which way it went, as a small badge: an arrow, a spoken direction and the amount. Every trend stat uses it, and it stands alone beside any figure. #}
{# @prop change:text | description:"The size of the move, already formatted: 12%, 4, €1.2k" #}
{# @prop direction:select['up', 'down', 'flat'] | default:"up" | description:"Which way the figure moved" #}
{# @prop inverse:boolean | default:False | description:"Set where a fall is the good news: lead time, failures, cost. It swaps which direction is coloured as good." #}
{# @prop class:text | description:"Extra classes on the badge" #}
{% comment %}
  Built on daisy-cotton's badge. The arrow and a spoken direction carry the
  move, so the colour only repeats it. Whether a move is good is the caller's
  to say, which is what `inverse` is for.
{% endcomment %}
{% load i18n %}
<c-vars change direction="up" inverse class />
<c-badge variant="{% if direction == 'flat' %}neutral{% elif direction == 'up' and not inverse or direction == 'down' and inverse %}success{% else %}error{% endif %}" size="sm" class="badge-soft dce:gap-1 dce:font-semibold dce:tabular-nums {{ class }}" only>
  <svg aria-hidden="true" class="dce:size-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    {% if direction == 'flat' %}
      <path d="M2 6h8" />
    {% elif direction == 'down' %}
      <path d="M6 2v8M2.5 6.5 6 10l3.5-3.5" />
    {% else %}
      <path d="M6 10V2M2.5 5.5 6 2l3.5 3.5" />
    {% endif %}
  </svg>
  <span class="dce:sr-only">{% if direction == 'flat' %}{% translate "No change" %}{% elif direction == 'down' %}{% translate "Down" %}{% else %}{% translate "Up" %}{% endif %}</span>
  {{ change }}
</c-badge>