{# IP Validation Code Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: Code + Status #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex-1 min-w-0">
            <p class="text-sm font-bold text-gray-900 font-mono tracking-wider">{{ item.code }}</p>
            <p class="text-xs text-gray-500 truncate">{{ item.user.email }}</p>
        </div>
        <div class="ml-3 flex-shrink-0">
            {% if item.validated %}
                <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>Vérifié
                </span>
            {% elseif item.isExpired %}
                <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-clock mr-1"></i>Expiré
                </span>
            {% else %}
                <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold bg-yellow-100 text-yellow-800">
                    <i class="fas fa-hourglass-half mr-1"></i>En attente
                </span>
            {% endif %}
        </div>
    </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.country or item.city %}
            <div>
                <dt class="text-gray-500">Localisation</dt>
                <dd class="text-gray-900 font-medium">{{ item.country }}{% if item.city %}, {{ item.city }}{% endif %}</dd>
            </div>
        {% endif %}
        <div>
            <dt class="text-gray-500">Créé le</dt>
            <dd class="text-gray-900 font-medium">{{ item.createdAt|date('d/m/Y H:i') }}</dd>
        </div>
        <div>
            <dt class="text-gray-500">Expire le</dt>
            <dd class="text-gray-900 font-medium">{{ item.expiresAt|date('d/m/Y H:i') }}</dd>
        </div>
        {% if item.validated and item.validatedAt %}
            <div class="col-span-2">
                <dt class="text-gray-500">Vérifié le</dt>
                <dd class="text-gray-900 font-medium">{{ item.validatedAt|date('d/m/Y à H:i:s') }}</dd>
            </div>
        {% endif %}
    </dl>

    {# Footer: Geo Info #}
    {% if item.geoLocationData %}
        <div class="pt-3 border-t border-gray-100">
            <div class="flex items-center justify-between text-xs text-gray-500">
                {% if item.geoLocationData.browser is defined %}
                    <span><i class="fas fa-globe mr-1"></i>{{ item.geoLocationData.browser }}</span>
                {% endif %}
                {% if item.geoLocationData.os is defined %}
                    <span><i class="fas fa-desktop mr-1"></i>{{ item.geoLocationData.os }}</span>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>