{# User Card Component for Grid View #}
<div class="bg-white shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow duration-300 {{ not user.isActive ? 'opacity-75' : '' }}">
    <div class="p-6">
        {# Avatar and Name #}
        <div class="flex items-center mb-4">
            <div class="flex-shrink-0">
                <div class="h-16 w-16 rounded-full bg-indigo-100 flex items-center justify-center">
                    <span class="text-indigo-600 font-bold text-xl">
                        {{ user.firstName ? user.firstName|slice(0, 1)|upper : user.email|slice(0, 1)|upper }}{{ user.lastName ? user.lastName|slice(0, 1)|upper : '' }}
                    </span>
                </div>
            </div>
            <div class="ml-4 flex-1">
                <a href="{{ path('manager_users_show', {id: user.id}) }}" class="text-lg font-medium text-gray-900 hover:text-indigo-600 transition-colors truncate block">
                    {{ user.fullName }}
                </a>
                <p class="text-sm text-gray-500 truncate">
                    {{ user.email }}
                </p>
            </div>
        </div>

        {# Roles #}
        <div class="mb-4">
            <div class="flex flex-wrap gap-2">
                {% for role in user.roles %}
                    {% if role != 'ROLE_USER' %}
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
                            {% if role == 'ROLE_EMPLOYER' %}bg-blue-100 text-blue-800
                            {% elseif role == 'ROLE_SALES' %}bg-green-100 text-green-800
                            {% elseif role == 'ROLE_CUSTOMER' %}bg-purple-100 text-purple-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            <i class="fas fa-user-tag mr-1"></i>
                            {{ role|replace({'ROLE_': ''})|capitalize }}
                        </span>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        {# Status Badges #}
        <div class="space-y-2 mb-4">
            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">Statut du compte</span>
                <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                    {{ user.isActive ? 'Actif' : 'Inactif' }}
                </span>
            </div>

            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">Email vérifié</span>
                {% if user.emailVerified %}
                    <span class="text-green-600"><i class="fas fa-check-circle"></i> Oui</span>
                {% else %}
                    <span class="text-red-600"><i class="fas fa-times-circle"></i> Non</span>
                {% endif %}
            </div>

            {% if user.is2faEnabled %}
                <div class="flex items-center justify-between text-sm">
                    <span class="text-gray-600">2FA</span>
                    <span class="text-blue-600"><i class="fas fa-shield-halved"></i> Activée</span>
                </div>
            {% endif %}

            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-600">Entreprises</span>
                <span class="text-gray-900 font-medium">
                    <i class="fas fa-building mr-1"></i>
                    {{ user.companies|length }}
                </span>
            </div>
        </div>

        {# Registration Date #}
        <div class="text-xs text-gray-500 mb-4">
            <i class="fas fa-calendar mr-1"></i>
            Inscrit le {{ user.createdAt|date('d/m/Y à H:i') }}
        </div>

        {# Actions #}
        <div>
            <a href="{{ path('manager_users_show', {id: user.id}) }}"
               class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-eye mr-2"></i>
                Voir les détails
            </a>
        </div>
    </div>
</div>