{# Email Log Mobile Card Component #}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
    {# Header: 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.recipient }}</p>
            <p class="text-xs text-gray-500 truncate">{{ item.subject }}</p>
        </div>
        <div class="ml-3 flex-shrink-0">
            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold {{ item.status == 'sent' ? 'bg-green-100 text-green-800' : (item.status == 'failed' ? 'bg-red-100 text-red-800' : (item.status == 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800')) }}">
                <i class="fas {{ item.status == 'sent' ? 'fa-check' : (item.status == 'failed' ? 'fa-times' : 'fa-clock') }} mr-1"></i>
                {{ item.status|capitalize }}
            </span>
        </div>
    </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">Template</dt>
            <dd class="text-gray-900 font-medium truncate">{{ item.templateName ?: '-' }}</dd>
        </div>
        <div>
            <dt class="text-gray-500">Tentatives</dt>
            <dd class="text-gray-900 font-semibold">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ item.attemptCount >= 3 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800' }}">
                    {{ item.attemptCount }}
                </span>
            </dd>
        </div>
        {% if item.status == 'sent' and item.sentAt %}
            <div class="col-span-2">
                <dt class="text-gray-500">Envoyé le</dt>
                <dd class="text-gray-900 font-medium">{{ item.sentAt|date('d/m/Y à H:i:s') }}</dd>
            </div>
        {% endif %}
        {% if item.failureReason %}
            <div class="col-span-2">
                <dt class="text-gray-500 text-red-600">Erreur</dt>
                <dd class="text-red-700 text-xs line-clamp-2">{{ item.failureReason }}</dd>
            </div>
        {% endif %}
    </dl>

    {# Footer: Date + Actions #}
    <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>
        <div class="flex items-center space-x-2">
            {% if item.status == 'failed' %}
                <button type="button" onclick="confirmRetry({{ 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-redo mr-1"></i>Réessayer
                </button>
            {% endif %}
        </div>
    </div>
</div>