{% import "tungsten/components/ui.html" as ui %}
{# HeroStatWidget: one big number, a trend, a line of text, buttons and small bars. #}
<section class="tw-card relative flex h-full flex-col justify-between gap-6 overflow-hidden p-6" data-tw-widget="hero-stat">
  <header class="flex items-center justify-between gap-4">
    <div class="flex min-w-0 items-center gap-3">
      {% if stat.icon_name %}<span class="tw-icon-tile h-10 w-10 {{ colors.pick(colors.SOFT_ICON, stat.color_name) }}">{{ icon(stat.icon_name, 'h-5 w-5') }}</span>{% endif %}
      <h3 class="truncate text-base font-semibold tracking-tight text-gray-950 dark:text-white">{{ __(stat.label or w.heading or '') }}</h3>
    </div>
    {% if w.description %}<span class="tw-chip">{{ __(w.description) }}</span>{% endif %}
  </header>
  <div class="flex items-end justify-between gap-6">
    <div class="min-w-0">
      <p class="tw-figure truncate text-4xl sm:text-5xl">{{ stat.value }}</p>
      {% if stat.trend_value or stat.description %}
      <p class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
        {% if stat.trend_value %}{{ ui.trend_pill(stat.trend_value, stat.trend_direction, stat.trend_color) }}{% endif %}
        {% if stat.description %}<span>{{ __(stat.description) }}</span>{% endif %}
      </p>
      {% endif %}
    </div>
    {% if bars %}
    <div class="hidden h-16 shrink-0 items-end gap-1 sm:flex" aria-hidden="true">
      {% for b in bars %}
      <span class="w-3 rounded-[4px]" style="height: {{ [b, 8] | max }}%; background: {{ colors.css_rgb(stat.color_name, 600 if loop.last else (400 if b > 60 else 200)) }}"></span>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% if actions %}
  <div class="flex flex-wrap gap-2">
    {% for a in actions %}
    {% set dark = a.color == 'dark' %}
    <a href="{{ a.url or '#' }}" class="tw-btn flex-1 px-4 py-2.5 {{ 'bg-gray-950 text-white hover:bg-gray-800 dark:bg-white dark:text-gray-950 dark:hover:bg-gray-200' if dark else colors.pick(colors.BUTTON, a.color) }}">
      {{ icon(a.icon, 'h-4 w-4') }}<span>{{ __(a.label) }}</span>
    </a>
    {% endfor %}
  </div>
  {% endif %}
</section>