{{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

    {# Titre du questionnaire #}
    <div>
        {{ form_label(form.title, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}}) }}
        {{ form_widget(form.title, {'attr': {'class': 'border rounded-md px-3 py-2 w-full focus:outline-none focus:ring-2 focus:ring-indigo-500'}}) }}
        {{ form_errors(form.title) }}
    </div>

    {# Questions #}
    <div id="questions" class="space-y-4">
        {% for question in form.questions %}
            <div class="p-4 bg-gray-50 rounded-lg shadow-sm relative">
                {{ form_widget(question) }}
                <button type="button" class="absolute top-2 right-2 text-red-500 hover:text-red-700 remove-question">Supprimer</button>
            </div>
        {% endfor %}
    </div>

    {# Bouton Ajouter une question #}
    <button type="button" id="add-question" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Ajouter une question</button>

    {# Bouton submit #}
    <div>
        <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition">
            {{ button_label|default('Enregistrer') }}
        </button>
    </div>

{{ form_end(form) }}

<script>
    // Gestion dynamique des questions
    const addButton = document.getElementById('add-question');
    const questionsContainer = document.getElementById('questions');

    // Prototype Symfony
    let prototype = '{{ form_widget(form.questions.vars.prototype)|e('js') }}';

    addButton.addEventListener('click', () => {
        const index = questionsContainer.children.length;
        let newForm = prototype.replace(/__name__/g, index);
        const div = document.createElement('div');
        div.className = 'p-4 bg-gray-50 rounded-lg shadow-sm relative mb-4';
        div.innerHTML = newForm + '<button type="button" class="absolute top-2 right-2 text-red-500 hover:text-red-700 remove-question">Supprimer</button>';
        questionsContainer.appendChild(div);

        // Ajouter event pour supprimer
        div.querySelector('.remove-question').addEventListener('click', () => {
            div.remove();
        });
    });

    // Supprimer question existante
    document.querySelectorAll('.remove-question').forEach(btn => {
        btn.addEventListener('click', e => {
            e.target.closest('div').remove();
        });
    });
</script>