{% if form.vars.value.createdAt.timestamp is defined %}
    {% set submitValue = submitValue|default('maturity.referentiel.action.edit_submit'|trans) %}
{% else %}
    {% set submitValue = submitValue|default('maturity.referentiel.action.new_submit'|trans) %}
{% endif %}

{% import _self as formMacros %}
{% macro printAnswerRow(answer) %}
    <li>
        {% include 'Maturity/Referentiel/_form_referentiel_answer.html.twig' with {'form': answer} %}
    </li>
{% endmacro %}
{% macro printQuestionRow(question) %}
    <li>
        {%  include 'Maturity/Referentiel/_form_referentiel_question.html.twig' with {'form': question} %}
    </li>
{% endmacro %}
{% macro printSectionRow(section, index, colors) %}
    {% set colorSection = 0 %}
    {% if index matches '/^\\d+$/' %}
        {% set colorSection = (index - 1) % 4 %}
    {% endif %}
    <li>
        <div class="box box-solid {{ colors[colorSection] }}">
            <div class="box-header" style="padding: 0 0 0 10px;display: flex;align-items: center;cursor: grab;">
                {{ form_row(section.position) }}
                {{ form_row(section.color) }}
                <h5 class="no-margin" style="flex-grow: 1;">
                    <i aria-hidden="true" class="fas fa-grip-vertical" style="padding-right: 2px"></i>
                    {{ index }}. {{ section.vars['value'] ? section.vars['value'].name : 'maturity.referentiel.title.new_section'|trans }}
                </h5>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border: none">
                        <i aria-hidden="true" class="fa fa-cog"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" style="left: -100px;">
                        <li><a href="#" style="color: #777" class="delete-section"><i aria-hidden="true" class="fa fa-trash"></i> {{ 'global.action.delete'|trans }}</a></li>
                        {#<li><a href="#" style="color: #777" class="duplicate-section"><i aria-hidden="true" class="fa fa-clone"></i> {{ 'global.action.duplicate'|trans }}</a></li>#}
                    </ul>
                </div>
                <a href="#section_{{ index }}" class="box-link btn btn-default " data-toggle="collapse" style="border:none;"><i aria-hidden="true" class="fa fa-plus"></i></a>
            </div>
            <div class="box-body collapse section" id="section_{{ index }}">
                {% include 'Maturity/Referentiel/_form_referentiel_section.html.twig' with {'form': section} %}
            </div>
        </div>
    </li>
{% endmacro %}
    {{ form_start(form) }}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-solid" >
                <div class="box-header with-border">
                    <h3 class="box-title">
                        {{ 'global.tab.general'|trans }}
                    </h3>
                </div>
                <div class="box-body">
                    <div class="col-md-6 no-padding">
                        {{ form_row(form.name) }}
                        {{ form_row(form.description) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <h3 style="margin-top: 0;">{{ 'maturity.referentiel.title.referentiel'|trans }}</h3>

            {% set colors = ['box-info','box-success','box-primary','box-warning'] %}
            <div id="prototypes"
                data-prototype-answer = "{{ formMacros.printAnswerRow(form.domains.vars.prototype.children['questions'].vars.prototype.children['answers'].vars.prototype)|e }}"
                data-prototype-question = "{{ formMacros.printQuestionRow(form.domains.vars.prototype.children['questions'].vars.prototype)|e }}"
                data-prototype-section="{{ formMacros.printSectionRow(form.domains.vars.prototype, '__index__', colors)|e('html_attr') }}"
            ></div>

            <ul class="list-unstyled referentielSections" data-index="{{ form.domains|length }}" id="referentiel-sections-container">
                {% do form.domains.setRendered() %}
                {% if form.domains is not empty %}
                    {% for section in form.domains|sort((a, b) => a.vars['value'].position > b.vars['value'].position) %}
                        {{ formMacros.printSectionRow(section, loop.index, colors) }}
                    {% endfor %}
                {% endif %}
            </ul>
            <button type="button" class="add_section btn btn-primary" style="margin-bottom: 15px;" data-collection-holder-class="referentielSections"><i aria-hidden="true" class="fa fa-plus"></i> {{ 'maturity.referentiel.action.add_section'|trans }}</button>
        </div>

        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-body text-center">
                    <a href="{{ path('maturity_referentiel_list') }}" class="btn btn-default">
                        {{ 'global.action.back_to_list'|trans }}
                    </a>
                    <input type="submit" class="btn btn-primary" value="{{ submitValue }}">
                </div>
            </div>
        </div>
    </div>

    {{ form_end(form) }}