{% import _self as formMacros %}
{% macro printAnswerRow(answer) %}
    <li class="answer-item">
        {% include 'Maturity/Referentiel/_form_referentiel_answer.html.twig' with {'form': answer} %}
    </li>
{% endmacro %}

<div class="box">
    <div class="box-header with-border" style="display: flex;align-items: end;padding-right: 0;cursor: grab;">
        <span style="padding: 7px 0;">
            <i aria-hidden="true" class="fas fa-grip-vertical"></i>
        </span>
        <div class="question-no-margin" style="display: flex;flex-grow: 1;gap: 10px;padding: 0 10px;">
            <div style="flex-grow: 1;">
              {{ form_row(form.name) }}
              {{ form_row(form.position) }}
            </div>
            {{ form_row(form.weight) }}
        </div>
        <a href="#" class="delete-question btn" aria-label="{{ 'global.action.delete'|trans }}"><i aria-hidden="true" class="fa fa-trash"></i></a>
        <a aria-expanded="false" href="#question_{{ form.parent.parent.position.vars['value'] }}_{{ question.position.vars['value'] }}" class="box-link btn" data-toggle="collapse"><i aria-hidden="true" class="fa fa-plus"></i></a>
    </div>

    <div class="collapse box-body" id="question_{{ form.parent.parent.position.vars['value'] }}_{{ question.position.vars['value'] }}">

        <p>{{ 'maturity.referentiel.label.answers'|trans }}</p>

        <div style="display: flex;align-items: center;gap: 10px;">
            {{ form_row(form.optional) }}
            <div style="flex-grow: 1;">
                {{ form_row(form.optionReason) }}
            </div>
        </div>

        <ul class="list-unstyled referentielAnswers"
            data-index="{{ form.answers|length > 0 ? form.answers|last.vars.name + 1 : 0 }}"
            data-question="{{ form.vars.name ? form.vars.name : 0 }}"
            data-section="{{ form.parent.parent.vars.name ? form.parent.parent.vars.name : 0 }}"
        >
            {% if question.answers is not empty %}
                {% for answer in question.answers|sort((a, b) => a.vars['value'].position >= b.vars['value'].position) %}
                    {{ formMacros.printAnswerRow(answer) }}
                {% endfor %}
            {% endif %}
        </ul>

        {{ form_row(form.addAnswer) }}

    </div>
</div>