{# @description A trend stat with the change pinned to the top corner, opposite the title, leaving the figure a line to itself. #}
{# @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. #}
{% comment %}
  Built on daisy-cotton's stat. The icon is small and leads the title, since
  the corner a larger one would take belongs to the change.
{% endcomment %}
<c-vars title value change direction="up" inverse desc icon class />
<c-stat class="{{ class }}" :attrs="attrs" only>
  <c-slot name="title">
    <span class="dce:flex dce:items-start dce:justify-between dce:gap-3 dce:whitespace-normal">
      <span class="dce:flex dce:items-center dce:gap-2">
        {% if icon %}<c-icon name="{{ icon }}" class="dce:opacity-60" aria-hidden="true" only />{% endif %}
        <span>{{ title }}</span>
      </span>
      {% if change %}<c-stats.change :change="change" :direction="direction" :inverse="inverse" only />{% endif %}
    </span>
  </c-slot>
  <c-slot name="value"><span class="dce:tabular-nums">{{ value }}</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>