{% import "adminsite/_icons.html" as icons %}
{% if data %}
  <div class="grid grid-cols-2 gap-3 sm:gap-4 xl:grid-cols-4">
    {% for item in data %}
      <a href="{{ item.url }}"
         class="flex flex-col gap-2.5 rounded-box border border-base-300 bg-base-100 px-5 py-4 shadow-quiet transition-colors hover:border-base-content/25">
        <span class="flex items-center justify-between gap-2 text-[13px] text-muted">
          <span class="truncate">{{ item.label }}</span>{{ icons.icon("arrow-up-right") }}
        </span>
        <span class="truncate text-2xl font-semibold leading-none tracking-tight tabular-nums sm:text-[30px]">{{ "{:,}".format(item.count) }}</span>
        {% if item.group %}<span class="text-xs text-muted">{{ item.group }}</span>{% endif %}
      </a>
    {% endfor %}
  </div>
{% else %}
  <p class="rounded-box border border-base-300 bg-base-100 px-5 py-4 text-muted">{{ _('No models are registered yet.') }}</p>
{% endif %}