{# Bouton flottant pour ouvrir la modal de feedback #}
<div data-controller="shared--feedback" class="feedback-widget">
    {# Bouton flottant #}
    <button
        type="button"
        class="feedback-floating-btn"
        data-action="click->shared--feedback#openModal"
        title="Envoyer un retour"
    >
        {% include "_components/icons/message.html.twig" %}
    </button>

    {# Modal de feedback #}
    <div
        class="feedback-modal-overlay"
        data-shared--feedback-target="overlay"
        data-action="click->shared--feedback#closeModal"
    >
        <div
            class="feedback-modal"
            data-shared--feedback-target="modal"
            data-action="click->shared--feedback#preventClose"
        >
            <div class="feedback-modal-header">
                <div class="feedback-modal-header-content">
                    <div class="feedback-header-icon">
                        {% include "_components/icons/message.html.twig" %}
                    </div>
                    <div>
                        <h3>Partagez votre expérience</h3>
                        <p>Votre avis nous aide à améliorer Bubul</p>
                    </div>
                </div>
                <button
                    type="button"
                    class="feedback-close-btn"
                    data-action="click->shared--feedback#closeModal"
                    aria-label="Fermer"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                    </svg>
                </button>
            </div>

            <div class="feedback-modal-body" data-shared--feedback-target="formContainer">
                <div class="feedback-loading">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Chargement...</span>
                    </div>
                </div>
            </div>

            <div class="feedback-reward-box">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="reward-icon-inline">
                    <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <p>Les retours pertinents sont récompensés avec des tokens supplémentaires.</p>
            </div>
        </div>
    </div>
</div>