{% extends "dashboard/base.html.twig" %}
{% block main %}
    <h1 class="text-5xl font-black text-white tracking-tight">
        Welcome back, <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-blue-400">{{ app.session.get('user').fullName }}</span>
    </h1>
    <p class="text-slate-400 mt-4 text-lg max-w-2xl font-light">
        Your current session is active. All messaging protocols are primed for deployment to <span class="text-slate-200">{{ app.session.get('user').email }}</span>.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
        <div class="group p-8 rounded-[2rem] bg-white/5 border border-white/10 hover:border-emerald-500/50 hover:bg-white/[0.08] transition-all duration-500">
            <div class="h-12 w-12 bg-emerald-500/10 rounded-2xl flex items-center justify-center text-emerald-400 mb-6 group-hover:scale-110 transition-transform">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <p class="text-slate-400 text-sm font-medium tracking-wide uppercase">Successfully Delivered</p>
            <p class="text-4xl font-bold text-white mt-2">42.8k</p>
        </div>

        <div class="group p-8 rounded-[2rem] bg-white/5 border border-white/10 hover:border-blue-500/50 hover:bg-white/[0.08] transition-all duration-500">
            <div class="h-12 w-12 bg-blue-500/10 rounded-2xl flex items-center justify-center text-blue-400 mb-6 group-hover:scale-110 transition-transform">
                <svg class="h-6 w-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"/>
                </svg>
            </div>
            <p class="text-slate-400 text-sm font-medium tracking-wide uppercase">Pending Queue</p>
            <p class="text-4xl font-bold text-white mt-2">1,205</p>
        </div>

        <div class="group p-8 rounded-[2rem] bg-white/5 border border-white/10 hover:border-rose-500/50 hover:bg-white/[0.08] transition-all duration-500">
            <div class="h-12 w-12 bg-rose-500/10 rounded-2xl flex items-center justify-center text-rose-400 mb-6 group-hover:scale-110 transition-transform">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
            <p class="text-slate-400 text-sm font-medium tracking-wide uppercase">Delivery Failures</p>
            <p class="text-4xl font-bold text-white mt-2">84</p>
        </div>
    </div>
{% endblock %}