{% extends "layout.html" %}

{% block title %}Dashboard | Aura Admin{% endblock %}
{% block breadcrumb %}Dashboard{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Hero / Welcome Banner -->
    <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-brand-900 to-slate-900 border border-brand-850 p-6 md:p-8 shadow-xl">
        <div class="relative z-10 max-w-xl space-y-2">
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Welcome to Aura Admin</h1>
            <p class="text-slate-300 text-sm leading-relaxed">
                A highly customizable, blazing-fast, and async-first administration control panel dynamically powered by your Aura models.
            </p>
        </div>
        <div class="absolute right-0 bottom-0 top-0 w-1/3 opacity-15 hidden md:block">
            <!-- Decorative aura shape -->
            <div class="w-full h-full bg-brand-500 blur-3xl rounded-full translate-x-12 translate-y-12"></div>
        </div>
    </div>

    <!-- Quick statistics / grid cards -->
    <div>
        <h2 class="text-lg font-semibold text-slate-300 mb-4 tracking-wide uppercase text-xs">Registered Database Entities</h2>
        
        {% if counts %}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                {% for model_name, count in counts.items() %}
                    <div class="bg-slate-900 hover:bg-slate-850 border border-slate-800 hover:border-brand-700/30 rounded-xl p-6 transition-all duration-300 group flex flex-col justify-between shadow-lg">
                        <div class="space-y-4">
                            <!-- Icon / Top visual -->
                            <div class="w-12 h-12 bg-slate-800 group-hover:bg-brand-950 text-slate-400 group-hover:text-brand-400 rounded-lg flex items-center justify-center transition-colors">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                                </svg>
                            </div>
                            
                            <!-- Information -->
                            <div>
                                <h3 class="font-bold text-slate-200 text-lg group-hover:text-white transition-colors">{{ model_name }}</h3>
                                <p class="text-slate-400 text-xs mt-1">ORM Database Entity</p>
                            </div>
                        </div>
                        
                        <div class="mt-6 pt-4 border-t border-slate-800 flex items-center justify-between">
                            <div>
                                <span class="text-2xl font-black text-slate-100">{{ count }}</span>
                                <span class="text-xs text-slate-500 ml-1">records</span>
                            </div>
                            
                            <a href="/admin/{{ model_name|lower }}" class="text-xs font-semibold text-brand-400 hover:text-brand-300 transition-colors flex items-center gap-1 group-hover:translate-x-1 duration-200">
                                <span>Manage</span>
                                <span>→</span>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <!-- Empty state -->
            <div class="bg-slate-900 border border-slate-850 rounded-xl p-12 text-center max-w-lg mx-auto space-y-4">
                <svg class="w-12 h-12 text-slate-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0V9a2 2 0 00-2-2M5 13V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                </svg>
                <h3 class="font-bold text-slate-300">No models registered yet</h3>
                <p class="text-slate-500 text-sm">
                    Register your ORM models dynamically to view them in the dashboard by calling <code class="bg-slate-950 px-1.5 py-0.5 rounded text-rose-400 font-mono text-xs">register_model(model)</code> or decorating them with <code class="bg-slate-950 px-1.5 py-0.5 rounded text-rose-400 font-mono text-xs">@register(model)</code>.
                </p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}