{# User Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: Avatar + Email #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center space-x-3">
            <div class="h-10 w-10 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-700 flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
                {% if item.firstName|length > 0 and item.lastName|length > 0 %}
                    {{ item.firstName|first|upper ~ item.lastName|first|upper }}
                {% elseif item.firstName|length > 0 %}
                    {{ item.firstName|first|upper }}
                {% else %}
                    {{ item.email|first|upper }}
                {% endif %}
            </div>
            <div class="min-w-0 flex-1">
                <p class="text-sm font-semibold text-gray-900 truncate">{{ item.email }}</p>
                {% if item.firstName or item.lastName %}
                    <p class="text-xs text-gray-500 truncate">{{ item.firstName }} {{ item.lastName }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    {# Status Badges #}
    <div class="flex flex-wrap gap-2 mb-3">
        {% for role in item.roles %}
            {% if role != 'ROLE_USER' %}
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
                    {{ role|replace({'ROLE_': ''})|lower|capitalize }}
                </span>
            {% endif %}
        {% endfor %}

        {% if item.isActive %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                <i class="fas fa-check-circle mr-1"></i>Actif
            </span>
        {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                <i class="fas fa-times-circle mr-1"></i>Inactif
            </span>
        {% endif %}

        {% if item.isEmailVerified %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                <i class="fas fa-envelope-circle-check mr-1"></i>Vérifié
            </span>
        {% endif %}

        {% if item.is2faEnabled %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">
                <i class="fas fa-shield-alt mr-1"></i>2FA
            </span>
        {% endif %}
    </div>

    {# Info Grid #}
    <dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs mb-3">
        <div>
            <dt class="text-gray-500">Téléphone</dt>
            <dd class="text-gray-900 font-medium truncate">{{ item.phone ?: '-' }}</dd>
        </div>
        <div>
            <dt class="text-gray-500">Créé le</dt>
            <dd class="text-gray-900 font-medium">{{ item.createdAt|date('d/m/Y') }}</dd>
        </div>
    </dl>

    {# Actions #}
    <div class="flex items-center justify-end space-x-2 pt-3 border-t border-gray-100">
        <a href="{{ path('admin_users_show', {id: item.id}) }}"
           class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-indigo-600 hover:text-indigo-900">
            <i class="fas fa-eye mr-1"></i>Voir
        </a>
        <a href="{{ path('admin_users_edit', {id: item.id}) }}"
           class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 hover:text-gray-900">
            <i class="fas fa-edit mr-1"></i>Modifier
        </a>
    </div>
</div>