{% extends '@components/SerenityAdmin/Dropdown.html.twig' %}

{% block content %}
    {% if form.image['alt'] is defined %}
        <li class="hover:bg-light dark:hover:bg-gray-500 px-3 py-1 rounded transition cursor-pointer">
            <twig:SerenityAdmin:Modal:FormModal
                text="Texte alternatif"
                modal:class="max-w-xl"
                formFields="{{ form.image['alt'] }}">
                {% block form_modal_content -%}
                    {{- form_row(form.image['alt']) -}}
                {%- endblock %}
            </twig:SerenityAdmin:Modal:FormModal>
        </li>
    {% endif %}
    {% if form.image['credit'] is defined %}
        <li class="hover:bg-light dark:hover:bg-gray-500 px-3 py-1 rounded transition cursor-pointer">
            <twig:SerenityAdmin:Modal:FormModal
                text="Crédit de l'image"
                modal:class="max-w-xl"
                formFields="{{ form.image['credit'] }}">
                {% block form_modal_content -%}
                    {{- form_row(form.image['credit']) -}}
                {%- endblock %}
            </twig:SerenityAdmin:Modal:FormModal>
        </li>
    {% endif %}
    <li class="hover:bg-light dark:hover:bg-gray-500 px-3 py-1 rounded transition cursor-pointer">
        <button class="cursor-pointer"
                data-action="live#action:prevent:confirm" data-live-confirm-message-param="Voulez-vous supprimer cette image ?"
                data-live-action-param = 'debounce(200)|removeMedia'
                data-live-field-name-param="{{ form.image.vars.id~"_uploadedFile" }}"
                data-live-id-param="{{ form.image.vars.data ? form.image.vars.data.id : null }}"
                x-on:click="
                $dispatch('dropdown-close');
                window.dispatchEvent(new CustomEvent('item-media-changed_{{ form.image.vars.id }}' , { detail: { visible: false } }));
                "
        >
            Supprimer l'image
        </button>
    </li>
{% endblock %}
