{% extends 'layout/app.html.twig' %}

{% block title %}Mon profil{% endblock %}
{% block page_title %}Mon profil{% endblock %}

{% block page_actions %}
    <a href="{{ path('app_password_change') }}" class="btn btn-primary">Changer mon mot de passe</a>
{% endblock %}

{% block content %}
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="card p-6">
            <div class="flex items-center gap-4">
                <span class="flex h-14 w-14 items-center justify-center rounded-full bg-accent-500 text-lg font-bold text-white">{{ user.initials }}</span>
                <div>
                    <p class="text-lg font-semibold text-slate-900">{{ user.fullName }}</p>
                    <span class="badge {{ user.mainRole.badgeClass }}">{{ user.mainRole.label }}</span>
                </div>
            </div>
            <dl class="mt-6 space-y-3 text-sm">
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Email</dt><dd class="text-right font-medium break-all">{{ user.email }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Téléphone</dt><dd class="font-medium">{{ user.phone ?: '—' }}</dd></div>
                <div class="flex justify-between gap-4"><dt class="text-slate-500">Mot de passe modifié le</dt><dd class="font-medium">{{ user.passwordChangedAt ? user.passwordChangedAt|date : '—' }}</dd></div>
            </dl>
            <p class="mt-6 text-xs text-slate-500">Pour modifier vos informations, contactez votre responsable.</p>
        </div>

        <div class="card lg:col-span-2">
            <div class="border-b border-slate-100 px-5 py-4">
                <h2 class="font-semibold text-slate-900">Mon activité récente</h2>
            </div>
            {{ include('components/_activity_list.html.twig', {logs: activity, show_actor: false}) }}
        </div>
    </div>
{% endblock %}