{% import "tungsten/components/ui.html" as ui %}
{% call ui.card(__(w.heading) if w.heading else none, __(w.description) if w.description else none, 'px-6 pb-6 pt-5', 'h-full', link, 'View all', w.icon, w.icon_color) %}
<ul class="grid gap-4">
  {% for it in entries %}
  <li class="flex items-center gap-3">
    {% if it.icon %}<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-950/5 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10">{{ icon(it.icon, 'h-4 w-4') }}</span>{% endif %}
    <div class="min-w-0 flex-1">
      <div class="mb-1.5 flex items-center justify-between gap-2 text-sm">
        <span class="truncate font-medium text-gray-700 dark:text-gray-200">{{ __(it.label) }}</span>
        <span class="shrink-0 text-gray-500 dark:text-gray-400">{{ it.value }}</span>
      </div>
      <span class="block h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-white/5">
        <span class="block h-full rounded-full" style="width: {{ [it.percent, 100] | min }}%; background: {{ colors.css_rgb(it.color, 500) }}"></span>
      </span>
    </div>
  </li>
  {% else %}
  <li class="py-6 text-center text-sm text-gray-500">{{ __('No data yet.') }}</li>
  {% endfor %}
</ul>
{% endcall %}