{# HTTP Request Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: Method + Status #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center space-x-2">
            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-bold {{ item.method == 'GET' ? 'bg-blue-100 text-blue-800' : (item.method == 'POST' ? 'bg-green-100 text-green-800' : (item.method == 'DELETE' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800')) }}">
                {{ item.method }}
            </span>
            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold {{ item.statusCode >= 200 and item.statusCode < 300 ? 'bg-green-100 text-green-800' : (item.statusCode >= 400 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                {{ item.statusCode }}
            </span>
        </div>
        <span class="text-xs text-gray-500">{{ item.responseTime|number_format(2) }}ms</span>
    </div>

    {# Route #}
    <div class="mb-3">
        <dt class="text-xs text-gray-500 mb-1">Route</dt>
        <dd class="text-sm font-mono font-medium text-gray-900 break-all">{{ item.routeName ?? item.uri }}</dd>
    </div>

    {# Info Grid #}
    <dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs mb-3">
        <div class="col-span-2">
            <dt class="text-gray-500">IP</dt>
            <dd class="text-gray-900 font-mono font-medium">{{ item.ipAddress }}</dd>
        </div>
        {% if item.user %}
            <div class="col-span-2">
                <dt class="text-gray-500">Utilisateur</dt>
                <dd class="text-gray-900 font-medium truncate">{{ item.user.email }}</dd>
            </div>
        {% endif %}
        <div>
            <dt class="text-gray-500">Mémoire</dt>
            <dd class="text-gray-900 font-medium">{{ (item.memoryUsage / 1024 / 1024)|number_format(2) }} MB</dd>
        </div>
        <div>
            <dt class="text-gray-500">Requêtes DB</dt>
            <dd class="text-gray-900 font-medium">{{ item.queryCount|default(0) }}</dd>
        </div>
    </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.createdAt|date('d/m/Y H:i:s') }}
        </span>
        <a href="{{ path('admin_security_http_requests_show', {id: item.id}) }}"
           class="inline-flex items-center px-2 py-1 text-xs font-medium text-indigo-600 hover:text-indigo-900">
            <i class="fas fa-eye mr-1"></i>Détails
        </a>
    </div>
</div>