<div
    class="flex flex-col text-center"
    {{ attributes }} >
    <div data-live-ignore>
        <div
            {{ stimulus_controller('media') }}
            {{ attributes.nested('border').defaults({class: 'relative rounded-xl p-6 transition dark:text-slate-300 border border-dashed border-gray-300 dark:border-gray-600 '}) }}
            :class="selected.length === 0 ? 'hover:bg-gray-100 dark:hover:bg-slate-700' : '' "
            x-data="{selected : []}"
            x-init="$watch('selected', value => $dispatch('collection-media-changed', { count: value.length, selected: value }))">
            <div class="flex flex-col text-center items-center">
                {# Lien Retirer, visible seulement si une image est cochée #}
                {% set key = 0 %}
                {% if files|length > 0 or uploadedFiles|length > 0 %}
                    <div class="grid grid-cols-5 auto-rows-[120px] gap-2 w-full max-w-xl"
                         x-data="{ open: {{ uploadedFiles|length > 0 ? 'true' : 'false' }} }" data-controller="sortable"
                         data-sortable-handle-value=".handle" data-sortable-mode-value="grid">
                        {# Les 5 premières images #}
                        {% for attachment in files|slice(0,5) %}
                            {% if (attachment.file is defined and attachment.file.name is not null) or attachment.name is defined %}
                                <div data-sortable-target="item" data-sortable-context-id="{{ attachment.id }}"
                                     id="{{ attachment.id }}"
                                     class="relative group {{ loop.first ? 'row-span-2 col-span-2' : 'w-full h-full' }}">
                                    <input type="checkbox"
                                           value="{{ attachment.id }}"
                                           :class="selected.length > 0 ? 'opacity-100' : ''"
                                           x-model="selected"
                                           class="absolute opacity-0 group-hover:opacity-100 top-2 left-2 z-20 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary">
                                    <button data-action="live#emit:prevent"
                                            class="cursor-pointer h-full w-full"
                                            data-live-event-param="editImage:edit"
                                            data-live-id-param="{{ attachment.id }}"
                                    >
                                        <twig:SerenityMedia:Image
                                            class="h-full w-full object-cover rounded border overflow-hidden"
                                            img:class="w-full h-full object-cover"
                                            lazy="{{ false }}"
                                            responsive="{{ false }}"
                                            alt="preview"
                                            path="{{ attachment.file is defined ? attachment.file.name : attachment.name }}"
                                            fit="cover"
                                            imageWidth="{{ loop.first ? 400 : 200 }}"
                                            imageHeight="{{ loop.first ? 400 : 200 }}"/>
                                    </button>
                                    <div
                                        class="absolute inset-0 bg-black bg-opacity-80 opacity-0 group-hover:opacity-30 transition-opacity rounded border group-[.sortable-chosen]:opacity-0 pointer-events-none"></div>
                                    <div
                                        class="handle absolute top-2 right-2 opacity-0 group-hover:opacity-100 duration-200 transition-opacity cursor-move">
                                        <div class="icon-grip-vertical text-white"></div>
                                    </div>
                                </div>
                            {% endif %}
                            {% set key = key + 1 %}
                        {% endfor %}

                        {# Images restantes, affichées seulement après clic #}
                        {% for attachment in files|slice(5) %}
                            {% if (attachment.file is defined and attachment.file.name is not null) or attachment.name is defined %}
                                <div data-sortable-target="item" data-sortable-context-id="{{ attachment.id }}"
                                     id="{{ attachment.id }}" x-show="open" x-cloak class="relative group">
                                    <input type="checkbox"
                                           value="{{ attachment.id }}"
                                           x-model="selected"
                                           :class="selected.length > 0 ? 'opacity-100' : ''"
                                           class="absolute opacity-0 group-hover:opacity-100 top-2 left-2 z-20 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary">
                                    <button data-action="live#emit:prevent"
                                            class="cursor-pointer h-full w-full"
                                            data-live-event-param="editImage:edit"
                                            data-live-id-param="{{ attachment.id }}"
                                    >
                                        <twig:SerenityMedia:Image
                                            class="h-full w-full object-cover rounded border overflow-hidden"
                                            lazy="{{ false }}"
                                            responsive="{{ false }}"
                                            img:class="w-full h-full object-cover"
                                            alt="preview"
                                            path="{{ attachment.file is defined ? attachment.file.name : attachment.name }}"
                                            fit="cover"
                                            imageWidth="200"
                                            imageHeight="200"/>
                                    </button>
                                    <div
                                        class="absolute inset-0 bg-black bg-opacity-80 opacity-0 group-hover:opacity-30 transition-opacity rounded border group-[.sortable-chosen]:opacity-0 pointer-events-none"></div>
                                    <div
                                        class="handle absolute top-2 right-2 opacity-0 group-hover:opacity-100 duration-200 transition-opacity cursor-move">
                                        <div class="icon-grip-vertical text-white"></div>
                                    </div>
                                </div>
                            {% endif %}
                            {% set key = key + 1 %}
                        {% endfor %}
                        {% set key = files|length %}
                        {% for attachment in uploadedFiles %}
                            <div x-show="open" x-cloak
                                 class="relative group">
                                <input type="checkbox"
                                       value="{{ attachment.id ?? (formId~'_'~key~'_uploadedFile') }}"
                                       x-model="selected"
                                       :class="selected.length > 0 ? 'opacity-100': ''"
                                       class="absolute opacity-0 group-hover:opacity-100 top-2 left-2 z-20 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary">
                                <twig:SerenityMedia:Image
                                    class="h-full w-full rounded border overflow-hidden"
                                    path="{{ attachment.url }}"
                                    img:class="w-full h-full object-cover"
                                    local="{{ true }}"
                                    imageWidth="200"
                                    imageHeight="200"/>
                            </div>
                            {% set key = key + 1 %}
                        {% endfor %}

                        {# Bloc +N juste après les 5 premières images #}
                        {% if files|length > 5 and uploadedFiles|length == 0 %}
                            <div
                                x-show="!open"
                                class="flex items-center justify-center border rounded-lg bg-gray-100 dark:bg-gray-500 text-gray-700 dark:text-gray-200 font-medium text-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-slate-700 h-full w-full"
                                x-on:click="open = true">
                                +{{ files|length - 5 }}
                            </div>
                        {% endif %}
                        {# Bloc + pour ajouter une nouvelle image (même hauteur que la grille) #}
                        <div
                            :class="selected.length > 0 ? 'border-gray-400 text-gray-400 cursor-not-allowed' : 'border-gray-600 dark:border-gray-200 cursor-pointer'"
                            class="row-span-1 flex items-center justify-center border-2 border-dashed rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                            <label for="{{ formId }}" class="relative flex w-full h-full justify-center items-center ">
                                <input
                                    type="file"
                                    multiple
                                    id="{{ formId }}"
                                    name="{{ name~"[][uploadedFile]" }}"
                                    data-model="uploadedFile"
                                    data-action="live#action:prevent"
                                    data-live-action-param="upload"
                                    class="absolute inset-0 z-30 h-full w-full opacity-0"
                                    :class="selected.length > 0 ? 'cursor-not-allowed' : 'cursor-pointer'"
                                    :disabled="selected.length > 0"
                                />
                                <span class="text-2xl">+</span>
                            </label>
                        </div>
                    </div>
                {% else %}
                    <label
                        for="{{ formId }}"
                        class="group relative flex flex-col items-center justify-center transition dark:text-slate-300 cursor-pointer">
                        <span
                            class="mt-4 text-sm font-medium text-primary group-hover:text-primary-hover">Importer</span>
                        <span
                            class="mt-1 text-sm text-gray-600 dark:text-gray-200">Sélectionner un ou plusieurs fichiers</span>
                        <span class="mt-2 text-xs text-gray-500 dark:text-gray-300">Accepte les images</span>
                        <input
                            type="file"
                            multiple
                            id="{{ formId }}"
                            name="{{ name~"[][uploadedFile]" }}"
                            data-model="uploadedFile"
                            data-action="live#action:prevent"
                            data-live-action-param="upload"
                            class="absolute inset-0 z-30 h-full w-full cursor-pointer opacity-0"
                        />
                    </label>
                {% endif %}
            </div>
        </div>
    </div>
    <twig:SerenityMedia:EditImage></twig:SerenityMedia:EditImage>
</div>
