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

{% block extrastyle %}{{ block.super }}{% endblock %}

{% block coltype %}colMS{% endblock %}

{% block bodyclass %}{{ block.super }} dashboard-view{% endblock %}

{% block nav-breadcrumbs %}{% endblock %}

{% block content %}
<div id="content-main" class="w-full">
    <div class="flex flex-col xl:flex-row gap-10">
        <!-- Main Panel: Apps and Models -->
        <div class="flex-1 min-w-0">
            <!-- Quick Stats: Generic System Overview -->
            <div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 mb-12">
                <div class="bg-white dark:bg-slate-800 p-6 rounded-[2rem] border border-gray-100 dark:border-slate-700 shadow-sm flex items-center gap-5 group hover:shadow-lg transition-all">
                    <div class="w-14 h-14 bg-blue-500/10 text-blue-600 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-blue-600 group-hover:text-white">
                        <i class="pi pi-box text-xl"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-1">{% translate 'Applicazioni' %}</p>
                        <h4 class="text-2xl font-black text-slate-800 dark:text-white tracking-tighter">{{ app_list|length }}</h4>
                    </div>
                </div>

                <div class="bg-white dark:bg-slate-800 p-6 rounded-[2rem] border border-gray-100 dark:border-slate-700 shadow-sm flex items-center gap-5 group hover:shadow-lg transition-all">
                    <div class="w-14 h-14 bg-green-500/10 text-green-600 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-green-600 group-hover:text-white">
                        <i class="pi pi-shield text-xl"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-1">{% translate 'Stato Sistema' %}</p>
                        <h4 class="text-2xl font-black text-slate-800 dark:text-white tracking-tighter">Attivo</h4>
                    </div>
                </div>

                <div class="bg-white dark:bg-slate-800 p-6 rounded-[2rem] border border-gray-100 dark:border-slate-700 shadow-sm flex items-center gap-5 group hover:shadow-lg transition-all">
                    <div class="w-14 h-14 bg-orange-500/10 text-orange-600 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-orange-600 group-hover:text-white">
                        <i class="pi pi-server text-xl"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-1">{% translate 'Ambiente' %}</p>
                        <h4 class="text-2xl font-black text-slate-800 dark:text-white tracking-tighter">{% if debug %}Sviluppo{% else %}Produzione{% endif %}</h4>
                    </div>
                </div>

                <div class="bg-white dark:bg-slate-800 p-6 rounded-[2rem] border border-gray-100 dark:border-slate-700 shadow-sm flex items-center gap-5 group hover:shadow-lg transition-all">
                    <div class="w-14 h-14 bg-purple-500/10 text-purple-600 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-purple-600 group-hover:text-white">
                        <i class="pi pi-clock text-xl"></i>
                    </div>
                    <div>
                        <p class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-1">{% translate 'Orario Server' %}</p>
                        <h4 class="text-2xl font-black text-slate-800 dark:text-white tracking-tighter">{% now "H:i" %}</h4>
                    </div>
                </div>
            </div>

            <div class="mb-8">
                <h2 class="text-xs font-black uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500 mb-6 flex items-center gap-3">
                    <i class="pi pi-th-large text-blue-500"></i>
                    {% translate 'Applicazioni e Risorse' %}
                </h2>
                {% include "admin/app_list.html" with app_list=app_list show_changelinks=True %}
            </div>
        </div>

        <!-- Sidebar Panel: Recent Actions -->
        {% block sidebar %}
        <aside id="content-related" class="xl:w-[350px] flex-shrink-0">
            <div class="bg-white dark:bg-slate-800 rounded-[2rem] border border-gray-100 dark:border-slate-700 shadow-sm p-8 sticky top-4">
                <div class="flex items-center justify-between mb-8">
                    <h2 class="text-xs font-black uppercase tracking-[0.2em] text-slate-400 dark:text-blue-200/50 flex items-center gap-2">
                        <i class="pi pi-history text-blue-500"></i>
                        {% translate 'Recent actions' %}
                    </h2>
                    <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                </div>

                <div id="recent-actions-module">
                    <h3 class="text-[10px] uppercase font-black text-slate-300 dark:text-slate-600 mb-6 tracking-widest border-b border-gray-50 dark:border-slate-700/50 pb-2">
                        {% translate 'Le mie attività' %}
                    </h3>
                    
                    {% load log %}
                    {% get_admin_log 12 as admin_log for_user user %}
                    
                    {% if not admin_log %}
                        <div class="bg-gray-50 dark:bg-slate-900/50 p-6 rounded-2xl border border-dashed border-gray-100 dark:border-slate-800 text-center">
                            <i class="pi pi-inbox text-gray-300 text-2xl mb-2"></i>
                            <p class="text-[11px] text-gray-400 font-bold italic">{% translate 'Nessuna attività recente' %}</p>
                        </div>
                    {% else %}
                        <ul class="space-y-2">
                        {% for entry in admin_log %}
                            <li class="group flex items-start gap-4 p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-900/40 transition-all cursor-default border border-transparent hover:border-gray-100 dark:hover:border-slate-700/50">
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm 
                                    {% if entry.is_addition %}bg-green-50 dark:bg-green-500/10 text-green-600{% endif %}
                                    {% if entry.is_change %}bg-blue-50 dark:bg-blue-500/10 text-blue-600{% endif %}
                                    {% if entry.is_deletion %}bg-red-50 dark:bg-red-500/10 text-red-600{% endif %}">
                                    <i class="pi {% if entry.is_addition %}pi-plus{% elif entry.is_change %}pi-pencil{% else %}pi-trash{% endif %} text-[12px]"></i>
                                </div>
                                
                                <div class="flex-1 min-w-0 py-0.5">
                                    <div class="flex items-center justify-between mb-0.5">
                                        <span class="text-[10px] font-black uppercase tracking-tighter text-slate-400 dark:text-slate-500">
                                            {% if entry.content_type %}
                                                {% filter capfirst %}{{ entry.content_type.name }}{% endfilter %}
                                            {% else %}
                                                {% translate 'Unknown' %}
                                            {% endif %}
                                        </span>
                                    </div>
                                    
                                    <div class="text-sm font-bold truncate text-slate-800 dark:text-slate-200">
                                        {% if entry.is_deletion or not entry.get_admin_url %}
                                            {{ entry.object_repr|to_object_display_value }}
                                        {% else %}
                                            <a href="{{ entry.get_admin_url }}" class="hover:text-blue-500 transition-colors">{{ entry.object_repr|to_object_display_value }}</a>
                                        {% endif %}
                                    </div>
                                    
                                    {% if entry.change_message %}
                                        <p class="text-[10px] text-slate-400 dark:text-slate-600 italic mt-1 line-clamp-1 group-hover:line-clamp-none transition-all">
                                            {{ entry.change_message }}
                                        </p>
                                    {% endif %}
                                </div>
                            </li>
                        {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            </div>
        </aside>
        {% endblock %}
    </div>
</div>

<style>
    /* Reset specific index styles to work with global card layout */
    #content { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
    #changelist-filter { display: none !important; } /* Not relevant on dashboard */
</style>
{% endblock %}