{% if field.value and field.value|length > 0 %}
    <div class="images-display">
        {% for image in field.value %}
            <div class="image-item">
                <img src="{{ image.url }}" alt="Image" class="admin-thumbnail" 
                     onclick="window.open('{{ image.url }}', '_blank')" 
                     style="cursor: pointer; margin: 2px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
        {% endfor %}
    </div>
{% else %}
    <span class="text-muted">Aucune image</span>
{% endif %}

<style>
.images-display {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.admin-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
.admin-thumbnail:hover {
    border-color: #007bff !important;
    transform: scale(1.1);
    transition: all 0.2s;
}
</style>