{% extends 'base.html.twig' %}

{% block title %}Mon compte - E-Cosplay Ticket{% endblock %}

{% block body %}
    <div class="max-w-4xl mx-auto py-20 px-4">
        <h1 class="text-5xl font-black uppercase tracking-tighter mb-12">Mon Compte</h1>

        <div class="bg-white border-4 border-gray-900 p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)]">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-gray-400 mb-1">Prénom</p>
                    <p class="text-2xl font-black">{{ app.user.firstName }}</p>
                </div>
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-gray-400 mb-1">Nom</p>
                    <p class="text-2xl font-black">{{ app.user.lastName }}</p>
                </div>
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-gray-400 mb-1">Email</p>
                    <p class="text-2xl font-black">{{ app.user.email }}</p>
                </div>
                <div>
                    <p class="text-xs font-black uppercase tracking-widest text-gray-400 mb-1">Membre depuis</p>
                    <p class="text-2xl font-black">{{ app.user.createdAt|date('d/m/Y') }}</p>
                </div>
            </div>

            <div class="mt-8 pt-8 border-t-4 border-gray-900 flex gap-4">
                <a href="{{ path('app_logout') }}" class="bg-red-500 text-white font-black uppercase tracking-widest px-6 py-3 border-4 border-gray-900 shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                    Déconnexion
                </a>
            </div>
        </div>
    </div>
{% endblock %}