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

{{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
{{ form_row(form.question) }}
{{ form_row(form.reusable) }}
<div class="mb-3">
    {{ form_label(form.labels) }}
    {{ form_errors(form.labels) }}
    {% for labelChoice in form.labels %}
        <div class="form-check">
            <input type="checkbox" class="form-check-input"
                   id="{{ labelChoice.vars.id }}"
                   name="{{ labelChoice.vars.full_name }}"
                   value="{{ labelChoice.vars.value }}"
                   {% if labelChoice.vars.checked %}checked="checked"{% endif %}>
            <label class="form-check-label" for="{{ labelChoice.vars.id }}">
                <span class="badge rounded-pill text-bg-{{ labelChoice.vars.attr['data-colour'] }}">{{ labelChoice.vars.label }}</span>
            </label>
        </div>
    {% endfor %}
    {% do form.labels.setRendered %}
</div>

<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"
         data-action="input->bo--form-collection#autoExpand">
        {% 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>

{% if isModal ?? false %}
    {% do form.save.setRendered %}
{% endif %}
{{ form_end(form) }}
{% if isModal ?? false %}
<template data-modal-footer>
    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
    <button type="submit" class="btn btn-primary">{{ 'Save'|trans }}</button>
</template>
{% endif %}
