{#
 # ORGANISM: DELETE-MODAL
 # Paramètres : title, confirmLabel (opt), modalAttr (dict), cancelAttr (dict), confirmAttr (dict)
 # Blocs : description (contenu entre le titre et les boutons)
 #}
<div class="hidden fixed inset-0 z-[60] items-center justify-center p-4"
     {% for k, v in (modalAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}>

    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"
         {% for k, v in (cancelAttr ?? {}) %}{{ k }}="{{ v }}" {% endfor %}></div>

    <div class="relative bg-white rounded-2xl p-7 w-full max-w-md shadow-xl border border-gray-200 delete-modal-panel">

        {% block titleBlock %}
        <h3 class="text-xl font-bold text-gray-900 mb-1.5">{{ title }}</h3>
        {% endblock %}

        {% block description %}{% endblock %}

        <div class="flex justify-end gap-2 mt-5">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'md',
                type: 'button',
                attr: cancelAttr ?? {}
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: confirmLabel ?? 'Supprimer',
                variant: 'error',
                size: 'md',
                attr: confirmAttr ?? {}
            } only %}
        </div>
    </div>
</div>
<style>
@keyframes deleteModalIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.delete-modal-panel { animation: deleteModalIn 0.2s ease both; }
</style>