{% from "admin/components/icons.html" import icon %}
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
  {% for tile in widget_data.tiles %}
  <div class="flex items-center gap-3 rounded-md border border-border p-3" data-tile>
    {% if tile.icon %}<span class="{{ ui('widget', 'icon') }}">{{ icon(tile.icon, "w-5 h-5") }}</span>{% endif %}
    <div class="min-w-0">
      <p class="text-xl font-semibold text-foreground"><span data-format="decimal" data-value="{{ tile.value|decimal_display }}">{{ tile.value|decimal_display }}</span></p>
      <p class="{{ ui('text', 'muted') }}">{{ _(tile.label) }}</p>
      {% if tile.hint %}<p class="{{ ui('text', 'muted-xs') }}">{{ tile.hint }}</p>{% endif %}
    </div>
  </div>
  {% endfor %}
</div>