{% extends "admin/base_site.html" %}
{% load i18n unfold %}

{% block breadcrumbs %}{% endblock %}

{% block title %}
{% trans 'Dashboard' %} | {{ site_title|default:_('Django site admin') }}
{% endblock %}

{% block branding %}
{% include "unfold/helpers/site_branding.html" %}
{% endblock %}

{% block content %}
{% include "unfold/helpers/messages.html" %}

<div class="mb-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
        {% trans 'System Overview' %}
    </h1>
</div>

<div class="grid gap-4 mb-4 md:grid-cols-2 lg:grid-cols-3">
    {% for item in kpi %}
    {% component "unfold/components/card.html" %}
    {% component "unfold/components/text.html" %}
    {{ item.title }}
    {% endcomponent %}

    {% component "unfold/components/title.html" %}
    {{ item.metric }}
    {% endcomponent %}

    {% if item.footer %}
    <div class="mt-2 text-sm">
        {{ item.footer|safe }}
    </div>
    {% endif %}
    {% endcomponent %}
    {% empty %}
    <p class="text-gray-500 dark:text-gray-400 col-span-full">
        {% trans "No statistics available for this panel." %}
    </p>
    {% endfor %}
</div>
{% endblock %}