{# @description A trend stat with the change set beside the figure, on the same line, so the two are read as one statement. #}
{# @prop title:text | description:"What the figure counts" #}
{# @prop value:text | description:"The figure itself, already formatted" #}
{# @prop change:text | description:"The size of the move, already formatted: 12%, 4, €1.2k. Left out, no arrow is drawn." #}
{# @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 desc:text | description:"What the change is measured against: since last month" #}
{# @prop icon:text | description:"An icon, by the name the project's icon component knows it by. Left out, there is no icon." #}
{# @prop class:text | description:"Extra classes on the stat" #}
{# @slot Under the figures — Room for a small chart of the run behind the number, from django-mvp-charts or anywhere else. This package draws none of its own. #}
{# @slot:figure <img class="dce:size-12 dce:rounded-full" src="…" alt="" /> — In place of the icon, for anything that is not one: a picture, a logo, an avatar. #}
{% comment %}
  Built on daisy-cotton's stat. The change wraps under the figure when the
  two cannot share a line. The icon sits to the right.
{% endcomment %}
<c-vars title value change direction="up" inverse desc icon class />
<c-stat class="{{ class }}" :attrs="attrs" only>
  {% if icon or figure %}<c-slot name="figure">{% if figure %}{{ figure }}{% else %}<c-icon name="{{ icon }}" class="dce:text-3xl dce:opacity-60" aria-hidden="true" only />{% endif %}</c-slot>{% endif %}
  {% if title %}<c-slot name="title"><span class="dce:whitespace-normal">{{ title }}</span></c-slot>{% endif %}
  <c-slot name="value">
    <span class="dce:flex dce:flex-wrap dce:items-center dce:gap-x-3 dce:gap-y-1">
      <span class="dce:tabular-nums">{{ value }}</span>
      {% if change %}<c-stats.change :change="change" :direction="direction" :inverse="inverse" only />{% endif %}
    </span>
  </c-slot>
  {% if desc or slot.strip %}
    <c-slot name="desc">
      {% if desc %}<div class="dce:whitespace-normal">{{ desc }}</div>{% endif %}
      {% if slot.strip %}<div class="dce:mt-3 dce:whitespace-normal">{{ slot }}</div>{% endif %}
    </c-slot>
  {% endif %}
</c-stat>