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

{% block header_class %}border-b border-base-300 lg:py-5{% endblock %}

{% block header %}<h1 class="text-[22px] font-semibold leading-tight tracking-tight">{{ _('Overview') }}</h1>{% endblock %}

{% block content %}
{#- Written out whole, so the stylesheet build sees every class. -#}
{% set spans = {1: "", 2: "col-span-2", 3: "col-span-2 xl:col-span-3", 4: "col-span-2 xl:col-span-4"} %}
<div class="flex-1 bg-base-200 px-4 py-6 lg:px-7">
  {% if cards %}
    <div class="grid grid-cols-2 items-start gap-3 sm:gap-4 xl:grid-cols-4">
      {% for card in cards %}
        <section class="{{ spans.get(card.widget.width, '') }} h-full min-w-0"
                 {% if card.widget.title %}aria-label="{{ card.widget.title }}"{% endif %}>
          {% if card.failed %}
            <div class="h-full rounded-box border border-base-300 bg-base-100 px-5 py-4 shadow-quiet">
              <h2 class="text-label text-muted">{{ card.widget.title }}</h2>
              <p class="mt-2 text-muted">{{ _('This card could not be loaded.') }}</p>
            </div>
          {% else %}
            {% with widget = card.widget, data = card.data %}
              {% include card.widget.template %}
            {% endwith %}
          {% endif %}
        </section>
      {% endfor %}
    </div>
  {% elif user and admin.views|length and not groups %}
    {#- Signed in, but nothing in the sidebar is open to them yet. -#}
    <p class="rounded-box border border-base-300 bg-base-100 px-5 py-4 text-muted">{{ _('Nothing here is open to you yet. Ask an administrator for access.') }}</p>
  {% else %}
    <p class="rounded-box border border-base-300 bg-base-100 px-5 py-4 text-muted">{{ _('Nothing to show yet.') }}</p>
  {% endif %}
</div>
{% endblock %}