{% form_theme form with admin_form_themes() only %}
<div {{ attributes }}>
    {% if data %}
        {% set image %}
                <twig:SerenityMedia:Image
                    class="flex w-full h-full justify-center"
                    img:class="w-auto max-h-[80vh]"
                    lazy="{{ false }}"
                    responsive="{{ false }}"
                    path="{{ data.file.name }}"
                    fit="contain"
                    imageWidth="{{ data.file.getWidth }}"
                    imageHeight="{{ data.file.getHeight }}"
                />
        {% endset %}
    {% endif %}
    <twig:SerenityAdmin:Modal:FormModal closeButton="{{ false }}"
                                        modal:class="w-full h-full rounded-none max-w-screen-xl" open="{{ open }}"
                                        name="editImage"
                                       loading="defer">
        {% block form_modal_content %}
            {% if data %}
                <div class="flex flex-col md:flex-row w-full gap-x-8">
                    <div class="w-full md:w-2/3 flex items-start">
                        {{ image }}
                    </div>
                    <!-- Colonne droite : formulaire -->
                    <div class="w-full md:w-1/3">
                        {{ form_start(form) }}
                        <div class="flex flex-col space-y-4">
                            {{ form_row(form) }}
                            {{ form_end(form) }}
                            <div class="flex justify-center gap-4">
                                <div x-on:click="open = false" class="border border-accent text-accent
                          hover:text-gray-100 hover:border-accent-hover hover:bg-accent-hover
                          focus-visible:outline-secondary
                          rounded-md px-2 py-1 text-sm shadow-sm
                          focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
                          cursor-pointer">
                                    Annuler
                                </div>
                                <button data-action="live#action:prevent" data-live-action-param="debounce(300)|save"
                                        class="border border-primary text-primary hover:text-gray-100 hover:border-primary hover:bg-primary focus-visible:outline-secondary rounded-md px-2 py-1 text-sm shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
                                        data-loading="addClass(opacity-50 disabled cursor-not-allowed)">
                                    Enregistrer
                                </button>

                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endblock %}
    </twig:SerenityAdmin:Modal:FormModal>
</div>
