{# Login Attempt Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: Email + Success Status #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex-1 min-w-0">
            <p class="text-sm font-semibold text-gray-900 truncate">{{ item.email }}</p>
            <p class="text-xs text-gray-500 font-mono">{{ item.ipAddress }}</p>
        </div>
        <div class="ml-3 flex-shrink-0">
            {% if item.successful %}
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-green-100 text-green-800">
                    <i class="fas fa-check-circle mr-1"></i>Réussi
                </span>
            {% else %}
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-red-100 text-red-800">
                    <i class="fas fa-times-circle mr-1"></i>Échec
                </span>
            {% endif %}
        </div>
    </div>

    {# Failure Reason #}
    {% if not item.successful and item.failureReason %}
        <div class="mb-3">
            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                <i class="fas fa-exclamation-triangle mr-1"></i>{{ item.failureReason }}
            </span>
        </div>
    {% endif %}

    {# Info Grid #}
    <dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs mb-3">
        <div>
            <dt class="text-gray-500">Navigateur</dt>
            <dd class="text-gray-900 font-medium truncate">{{ item.browser ?: 'Unknown' }}</dd>
        </div>
        <div>
            <dt class="text-gray-500">OS</dt>
            <dd class="text-gray-900 font-medium truncate">{{ item.os ?: 'Unknown' }}</dd>
        </div>
        {% if item.country %}
            <div>
                <dt class="text-gray-500">Pays</dt>
                <dd class="text-gray-900 font-medium">{{ item.country }}</dd>
            </div>
        {% endif %}
        {% if item.city %}
            <div>
                <dt class="text-gray-500">Ville</dt>
                <dd class="text-gray-900 font-medium">{{ item.city }}</dd>
            </div>
        {% endif %}
    </dl>

    {# Footer: Date + Action #}
    <div class="flex items-center justify-between pt-3 border-t border-gray-100">
        <span class="text-xs text-gray-500">
            <i class="fas fa-clock mr-1"></i>{{ item.attemptedAt|date('d/m/Y à H:i:s') }}
        </span>
        {% if not item.successful %}
            <a href="{{ path('admin_security_ip_blocks_index', {ip: item.ipAddress}) }}"
               class="inline-flex items-center px-2 py-1 text-xs font-medium text-red-600 hover:text-red-900">
                <i class="fas fa-ban mr-1"></i>Bloquer IP
            </a>
        {% endif %}
    </div>
</div>