{#--Onglet images--#}
<div class="tab-pane" id="content_galery" role="tabpanel">
    {% if "PRODUIT_UPDATE" in rights %}
        {{ form_start(formFile, {'action': path('produit_file', {'id': produit.id}),'method': 'POST', 'attr': {'class': 'js-product-upload-images-form'} }) }}



        <div class="p-4 bg-white rounded shadow-sm">


            <div class="alert alert-info d-flex align-items-start mb-4" role="alert">
                <i class="fas fa-info-circle me-2 fs-5 text-primary mt-1"></i>
                <div>
                    <div><strong>Format recommandé web :</strong> ratio <strong>3:4</strong> (ex. <strong>900 × 1200 px</strong>), JPG/WEBP compressé.</div>
                    <div class="small mt-1 mb-0 text-muted">
                    Les images sélectionnées ne sont enregistrées qu’après clic sur <strong>Enregistrer les images</strong>.
                    </div>
                </div>
            </div>


            {#-- Galerie des images --#}
            {% if produit.picture %}
                <div class="gallery-grid mb-3">
                    {% for item in produit.picture %}
                    <div class="gallery-thumb-wrap">
                        <img
                            src="{{ vich_uploader_asset(item, 'file') }}"
                            alt="Image {{ item.id }}"
                            class="gallery-thumbnail"
                        >
                        <button type="button"
                                class="thumb-action js-set-main-image"
                                data-url="{{ path('produit_set_main_image', { id: produit.id }) }}"
                                data-image-id="{{ item.id }}"
                                data-image-src="{{ vich_uploader_asset(item, 'file') }}"
                                title="Définir comme image principale"
                                data-bs-toggle="tooltip"
                                data-placement="top">
                        Principale
                        </button>
                        {% if item.isSelected %}
                            <span class="thumb-flag flag-product" title="Image principale du produit" data-bs-toggle="tooltip" data-placement="top">
                                <i class="fa fa-star"></i>
                            </span>
                        {% endif %}
                        {% if mainDeclByImageName[item.imageName]|default(false) %}
                            <span class="thumb-flag flag-declination" title="Image principale de la d&eacute;clinaison" data-bs-toggle="tooltip" data-placement="top">
                                <i class="fa fa-star"></i>
                            </span>
                        {% endif %}
                        {% set labels = declByImage[item.imageName]|default([]) %}
                        {% if labels|length > 0 %}
                            <span class="declination-badge badge-assigned">{{ labels|join(' / ') }}</span>
                        {% else %}
                            <span class="declination-badge badge-unassigned">Non affectée</span>
                        {% endif %}
                    </div>

                    {% endfor %}
                </div>

                {# ================= ACTIONS ================= #}

                <div class="photos-mid-actions d-flex justify-content-end align-items-center gap-2 my-3">
                    <button type="button"
                            class="btn btn-primary btn-sm photos-action-btn js-open-declination-images"
                            data-url="{{ path('produit_declination_images_modal', { id: produit.id }) }}"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Associer les images aux déclinaisons">
                        <i class="fa fa-images"></i>
                    </button>

                    <button type="button"
                            class="btn btn-outline-info btn-sm photos-action-btn js-open-image-principale-declinaison"
                            data-url="{{ path('produit_image_principale_declinaison_modal', { id: produit.id }) }}"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Définir l’image principale par déclinaison">
                        <i class="fa fa-star"></i>
                    </button>

                    <button type="button"
                            class="btn btn-outline-danger btn-sm photos-action-btn js-open-delete-images"
                            data-url="{{ path('produit_delete_images_modal', { id: produit.id }) }}"
                            data-bs-toggle="tooltip"
                            data-bs-placement="top"
                            title="Supprimer une ou plusieurs images">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                    </div>


                {#-- Barre d’actions: gauche = affectation; droite = icônes seules --#}
               <div class="row align-items-start mt-3">

                    {# ================= LEFT ================= #}
                    <div class="custom-upload">
                        <label class="fw-semibold mb-2 d-block">Ajouter des images</label>
                        {% set pos1Values = [] %}
                        {% set pos1ValueLabels = [] %}
                        {% set pos1DeclinationName = '' %}
                        {% for pdv in produit.produitDeclinationValues %}
                            {% for gv in pdv.groupDeclinationValues %}
                                {% if gv.declination.position == 1 and gv.value.id not in pos1Values %}
                                    {% set pos1Values = pos1Values|merge([gv.value.id]) %}
                                    {% set pos1ValueLabels = pos1ValueLabels|merge([gv.value.name]) %}
                                    {% if pos1DeclinationName == '' %}
                                        {% set pos1DeclinationName = gv.declination.name %}
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        {% set dynamicMaxPhotos = (pos1Values|length > 0) ? (pos1Values|length * 6) : 12 %}

                        <div id="productPhotoCounters"
                             class="d-flex align-items-center gap-2 mt-2 mb-2"
                             data-existing="{{ produit.picture|length }}"
                             data-max-total="{{ dynamicMaxPhotos }}"
                             data-max-size-bytes="{{ 8 * 1024 * 1024 }}">
                            <span class="badge bg-light text-dark border">
                                Existantes: <strong id="existingPhotoCount">{{ produit.picture|length }}</strong>
                            </span>
                            <span class="badge bg-light text-dark border">
                                En attente: <strong id="pendingPhotoCount">0</strong>
                            </span>
                            <span class="badge bg-primary">Max: {{ dynamicMaxPhotos }}</span>
                        </div>

                        {{ form_widget(formFile.picture, {
                            'attr': {
                            'class': 'form-control m-input',
                            'accept': 'image/*',
                            'multiple': true,
                            'data-max-total-images': dynamicMaxPhotos,
                            'data-max-file-size': (8 * 1024 * 1024)
                            }
                        }) }}

                        <small class="text-muted d-block mt-1">
                            Formats acceptés : JPG, PNG — sélection multiple autorisée
                        </small>

                        <div class="d-flex align-items-center gap-2 mt-2">
                            <span class="badge bg-light text-dark border" id="selectedFileCount">0 sélectionnée</span>
                            <span class="small text-muted" id="selectedFileNames"></span>
                        </div>
                        <button type="button" id="clearAllSelectedImages" class="btn btn-sm btn-outline-danger d-none">
                            Tout effacer
                        </button>

                        {% if pos1Values|length == 1 %}
                            <div class="mt-3 text-start">
                                <div class="d-inline-flex align-items-center gap-2 mb-2">
                                    <span class="badge bg-info text-dark">Info</span>
                                    <span class="small text-muted">Affectation automatique disponible</span>
                                </div>
                                <div class="d-flex justify-content-start align-items-start gap-2">
                                    {{ form_widget(formFile.autoAssignPositionOne, {
                                        attr: {
                                            class: 'form-check-input mt-1 ms-0'
                                        }
                                    }) }}
                                    <label class="form-check-label" for="{{ formFile.autoAssignPositionOne.vars.id }}">
                                        Affecter automatiquement les images enregistrées à la déclinaison
                                        <strong>{{ pos1DeclinationName|default('position 1') }}</strong>
                                        <span class="text-muted">:</span>
                                        <strong>{{ pos1ValueLabels|first }}</strong>
                                    </label>
                            </div>
                            <small class="text-muted d-block mt-1">
                                Option utile quand le produit n'a qu'une seule valeur pour {{ pos1DeclinationName|default('cette déclinaison') }}.
                            </small>
                        {% endif %}


                        <div id="selectedFilePreview" class="selected-preview-grid mt-2"></div>

                        <div class="mt-3">
                            <div id="uploadedImages" class="d-flex flex-wrap justify-content-start" data-role="ajax-gallery"></div>
                            <div class="text-center text-muted small mt-3" id="galleryLoader" style="display:none;">
                            Chargement des images...
                            </div>
                        </div>

                        <div class="text-center mt-4">
                            {{ form_widget(formFile.save, {
                            'attr': {'class': 'btn crm-btn-dark px-5 py-2 w-md-auto', 'id': 'saveProductImagesBtn', 'type': 'button'},
                            'label': 'Enregistrer les images'
                            }) }}

                        </div>
                    </div>




                </div>



            {% else %}
                <div class="alert alert-warning text-center">
                    Aucune image n’est disponible pour ce produit.
                </div>
            {% endif %}




            {% if pos1Values|length != 1 %}
                {% do formFile.autoAssignPositionOne.setRendered %}
            {% endif %}

            {{ form_errors(formFile) }}
            {{ form_rest(formFile) }}
            {{ form_end(formFile) }}
        </div>






    {% endif %}
</div>