{# IP Block Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: IP + 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 font-mono">{{ item.ipAddress }}</p>
            {% if item.country or item.city %}
                <p class="text-xs text-gray-500">{{ item.country }}{% if item.city %}, {{ item.city }}{% endif %}</p>
            {% endif %}
        </div>
        <div class="ml-3 flex-shrink-0">
            {% if item.isPermanent %}
                <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-ban mr-1"></i>Permanent
                </span>
            {% elseif item.isActive %}
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-orange-100 text-orange-800">
                    <i class="fas fa-clock mr-1"></i>Temporaire
                </span>
            {% else %}
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-gray-100 text-gray-800">
                    <i class="fas fa-check mr-1"></i>Expiré
                </span>
            {% endif %}
        </div>
    </div>

    {# Reason #}
    {% if item.reason %}
        <div class="mb-3">
            <dt class="text-xs text-gray-500 mb-1">Raison</dt>
            <dd class="text-sm text-gray-900 line-clamp-2">{{ item.reason }}</dd>
        </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">Score de menace</dt>
            <dd class="text-gray-900 font-semibold">{{ item.threatScore|default(0) }}/100</dd>
        </div>
        <div>
            <dt class="text-gray-500">Échecs</dt>
            <dd class="text-gray-900 font-semibold">{{ item.failedAttempts|default(0) }}</dd>
        </div>
        <div>
            <dt class="text-gray-500">Bloqué le</dt>
            <dd class="text-gray-900 font-medium">{{ item.blockedAt|date('d/m/Y') }}</dd>
        </div>
        {% if not item.isPermanent %}
            <div>
                <dt class="text-gray-500">Expire le</dt>
                <dd class="text-gray-900 font-medium">{{ item.expiresAt|date('d/m/Y') }}</dd>
            </div>
        {% endif %}
    </dl>

    {# Footer: Actions #}
    <div class="flex items-center justify-end space-x-2 pt-3 border-t border-gray-100">
        <a href="{{ path('admin_security_ip_blocks_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>
        {% if item.isActive %}
            <button type="button" onclick="confirmUnlock({{ item.id }})"
                    class="inline-flex items-center px-2 py-1 text-xs font-medium text-green-600 hover:text-green-900">
                <i class="fas fa-unlock mr-1"></i>Débloquer
            </button>
        {% endif %}
    </div>
</div>