{% 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>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
        {% trans 'Welcome to your management dashboard.' %}
    </p>
</div>

<!-- Top Row: KPI Cards using Unfold Native Components -->
<div class="grid gap-4 mb-8 md:grid-cols-2 lg:grid-cols-4">
    {% for item in kpi %}
    {% component "unfold/components/card.html" %}

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

    <div class="mt-2">
        {% component "unfold/components/title.html" %}
        {{ item.metric }}
        {% endcomponent %}
    </div>

    {% if item.footer %}
    <div class="mt-4 text-sm text-gray-500">
        {{ item.footer|safe }}
    </div>
    {% endif %}

    {% endcomponent %}
    {% empty %}
    <p class="text-gray-500 dark:text-gray-400 col-span-full">
        {% trans "No statistics available." %}
    </p>
    {% endfor %}
</div>

<!-- Quick Links / Shortcuts Card -->
<div class="grid gap-6 md:grid-cols-2 mb-8">
    {% component "unfold/components/card.html" %}
    <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">{% trans "Quick Actions" %}</h3>
    </div>
    <div class="space-y-3">
        <a href="{% url 'admin:account_user_changelist' %}" class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <span class="font-medium text-gray-900 dark:text-white">{% trans "Manage Users" %}</span>
            <span class="text-primary-600 dark:text-primary-400 text-sm font-semibold">&rarr;</span>
        </a>
        <a href="{% url 'admin:dynamic_preferences_globalpreferencemodel_changelist' %}" class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <span class="font-medium text-gray-900 dark:text-white">{% trans "Global Preferences" %}</span>
            <span class="text-primary-600 dark:text-primary-400 text-sm font-semibold">&rarr;</span>
        </a>
        <a href="/swagger/" target="_blank" class="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <span class="font-medium text-gray-900 dark:text-white">{% trans "Swagger API Docs" %}</span>
            <span class="text-primary-600 dark:text-primary-400 text-sm font-semibold">&rarr;</span>
        </a>
    </div>
    {% endcomponent %}

    {% component "unfold/components/card.html" %}
    <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white">{% trans "System Information" %}</h3>
    </div>
    <dl class="space-y-3 text-sm">
        <div class="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
            <dt class="text-gray-500 dark:text-gray-400">{% trans "Framework" %}</dt>
            <dd class="font-semibold text-gray-900 dark:text-white">Django 5.0</dd>
        </div>
        <div class="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
            <dt class="text-gray-500 dark:text-gray-400">{% trans "Admin UI" %}</dt>
            <dd class="font-semibold text-gray-900 dark:text-white">Django Unfold</dd>
        </div>
        <div class="flex justify-between py-1 border-b border-gray-100 dark:border-gray-800">
            <dt class="text-gray-500 dark:text-gray-400">{% trans "API Engine" %}</dt>
            <dd class="font-semibold text-gray-900 dark:text-white">Django REST Framework</dd>
        </div>
        <div class="flex justify-between py-1">
            <dt class="text-gray-500 dark:text-gray-400">{% trans "Background Queue" %}</dt>
            <dd class="font-semibold text-gray-900 dark:text-white">Celery & Redis</dd>
        </div>
    </dl>
    {% endcomponent %}
</div>

{% endblock %}