{% extends "adminsite/base.html" %}

{% block header %}<h1 class="text-base font-semibold">{{ _('Overview') }}</h1>{% endblock %}

{% block content %}
{#- Written out whole, so the stylesheet build sees every class. -#}
{% set spans = {1: "", 2: "sm:col-span-2", 3: "sm:col-span-2 xl:col-span-3", 4: "sm:col-span-2 xl:col-span-4"} %}
<div class="p-4 lg:p-6">
  {% if cards %}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {% for card in cards %}
        <section class="{{ spans.get(card.widget.width, '') }} min-w-0"
                 {% if card.widget.title %}aria-label="{{ card.widget.title }}"{% endif %}>
          {% if card.failed %}
            <div class="card h-full border border-base-300">
              <div class="card-body p-4">
                <h2 class="text-sm font-medium text-base-content/70">{{ card.widget.title }}</h2>
                <p class="text-base-content/60">{{ _('This card could not be loaded.') }}</p>
              </div>
            </div>
          {% else %}
            {% with widget = card.widget, data = card.data %}
              {% include card.widget.template %}
            {% endwith %}
          {% endif %}
        </section>
      {% endfor %}
    </div>
  {% else %}
    <div class="alert">{{ _('Nothing to show yet.') }}</div>
  {% endif %}
</div>
{% endblock %}