{% macro answer_row(answerForm) %}
    <div class="d-flex align-items-center gap-2 mb-2" data-collection-item>
        {{ form_widget(answerForm.ordering) }}
        <span class="text-muted" data-drag-handle style="cursor: grab" title="{{ 'Drag to reorder'|trans }}"><i class="bi bi-grip-vertical"></i></span>
        <div class="flex-grow-1">{{ form_widget(answerForm.text) }}</div>
        <div class="d-none">{{ form_widget(answerForm.isRightAnswer) }}</div>
        <button type="button"
                class="btn btn-sm {{ answerForm.isRightAnswer.vars.checked ? 'btn-success' : 'btn-danger' }}"
                title="{{ 'Toggle correct answer'|trans }}"
                onclick="var cb=this.closest('[data-collection-item]').querySelector('input[type=checkbox]');cb.checked=!cb.checked;this.classList.toggle('btn-success',cb.checked);this.classList.toggle('btn-danger',!cb.checked);this.querySelector('i').className=cb.checked?'bi bi-check-lg':'bi bi-x-lg'">
            <i class="{{ answerForm.isRightAnswer.vars.checked ? 'bi bi-check-lg' : 'bi bi-x-lg' }}"></i>
        </button>
        <button type="button" class="btn btn-sm btn-outline-danger"
                data-action="bo--form-collection#removeItem"><i class="bi bi-trash"></i></button>
    </div>
{% endmacro %}