{% import 'backoffice/partials/answer_row.html.twig' as macros %}

<turbo-frame id="question-modal-frame">
    {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
    <div class="modal-body">
        {{ form_row(form.question) }}
        <div data-controller="bo--form-collection"
             data-bo--form-collection-prototype-value="{{ macros.answer_row(form.answers.vars.prototype)|e('html_attr') }}">
            {{ form_label(form.answers) }}
            {{ form_errors(form.answers) }}
            <div data-bo--form-collection-target="collection">
                {% for answerForm in form.answers %}
                    {{ macros.answer_row(answerForm) }}
                {% endfor %}
            </div>
            {% do form.answers.setRendered %}
            <div class="d-flex gap-2 mb-3">
                <button type="button" class="btn btn-sm btn-outline-primary"
                        data-action="bo--form-collection#addItem">{{ 'Add answer'|trans }}</button>
                <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-action="bo--form-collection#sortAlphabetically">{{ 'Sort A–Z'|trans }}</button>
                <button type="button" class="btn btn-sm btn-outline-secondary"
                        data-action="bo--form-collection#randomize">{{ 'Randomize'|trans }}</button>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
        {{ form_widget(form.save, {attr: {class: 'btn btn-primary'}}) }}
    </div>
    {{ form_end(form) }}
</turbo-frame>