{{ form_start(form) }}
    {{ form_row(form.alternateGoogleFormsLink) }}
    {{ form_row(form.title) }}
    {{ form_row(form.description) }}
    {{ form_row(form.department) }}
    {{ form_row(form.textBefore) }}
<div class="form-group mt-4">
    {{ form_label(form.content) }}
    <p>
        <button type="button" class="btn btn-sm btn-primary custom-form-add-field">
            Ajouter un champ au formulaire
        </button>
    </p>
    <ul class="list-group mb-2" id="custom-form-fields-container" data-child-max-id="{{ form.content.vars.data|json_decode|length }}">
        {% for input in form.content.vars.data|json_decode %}
            <li class="list-group-item small custom-form-field" id="{{ loop.index0 }}" draggable="true">
                <div class="fs-6 fw-bold field-display-title">{{ input['label'] }}</div>
                <div class="d-flex justify-content-around align-items-center">
                    <i class="fas fa-grip-vertical ms-n2 fs-2 text-light-grey"></i>
                    <div class="ms-3 w-100"><label class="w-100">Type
                        <select name="field-type" class="form-control field-type">
                            <option value="text" {% if input['type'] is same as ('text')%}selected{% endif %}>Texte court</option>
                            <option value="textarea" {% if input['type'] is same as ('textarea') %}selected{% endif %}>Texte long</option>
                            <option value="select" {% if input['type'] is same as ('select') %}selected{% endif %}>Menu déroulant</option>
                            <option value="radio" {% if input['type'] is same as ('radio') %}selected{% endif %}>Boutons radio</option>
                            <option value="checkbox" {% if input['type'] is same as ('checkbox') %}selected{% endif %}>Case à cocher</option>
                            <option value="file" {% if input['type'] is same as ('file') %}selected{% endif %}>Fichier</option>
                        </select></label>
                    </div>
                    <div class="ms-1 w-100">
                    <label class="w-100">Label
                        <input name="field-label" class="form-control field-label" required value="{{ input['label'] }}"/></label>
                    </div>
                    <div>
                        <a href="#" class="fs-5 mx-1 custom-form-field-options text-black"><i class="fas fa-cog" title="Options du champ"></i></a>
                        <a href="#" class="fs-5 mx-1 custom-form-field-clone text-black"><i class="fas fa-copy" title="Cloner le champ"></i></a>
                        <a href="#" class="fs-5 mx-1 custom-form-field-remove"><i class="fas fa-trash" title="Suppression"></i></a>
                    </div>
                </div>
                <fieldset class="d-none">
                    <hr>
                    <label class="w-100">Choix (renseigner uniquement pour les types "Menu déroulant", "Bouton radio" et "case à cocher")<br>
                        <textarea rows="5" class="w-100 field-values" name="field-values">{{ input['values'] }}</textarea><br>
                        <small class="fw-normal">Une seule valeur distincte par ligne</small>
                    </label><br>
                    <label class="w-100">Texte d'aide
                        <input name="field-help" class="form-control field-help" value="{{ input['help'] }}"/></label><br>
                    <small class="fw-normal">Affiche un texte sous le champ</small><br>
                    <label class="w-100">Titre de la section
                        <input name="field-title" class="form-control field-title" value="{{ input['title'] }}"/></label><br>
                    <small class="fw-normal">Affiche un titre au dessus de la section</small><br>
                    <div class="d-flex justify-content-around mt-2">
                        <label>Largeur
                            <select name="type" id="field-cols" class="field-cols">
                                <option value="full" {% if input['cols'] is same as ('plein')%}selected{% endif %}>Largeur totale</option>
                                <option value="half" {% if input['cols'] is same as ('moitie')%}selected{% endif %}>Demi-colonne</option>
                                <option value="third" {% if input['cols'] is same as ('tiers')%}selected{% endif %}>Tiers de colonne</option>
                            </select></label>
                        <label><input name="field-required" type="checkbox" class="field-required" {% if input['required'] is same as ('yes') %}checked{% endif %}> Obligatoire</label>
                        <label><input name="field-multiple" type="checkbox" class="field-multiple" {% if input['multiple'] is same as ('yes') %}multiple{% endif %}> Plusieurs réponses possibles</label>
                    </div>
                </fieldset>
            </li>
        {% endfor %}
    </ul>
    <p id="custom_form_content_help" class="form-text mb-0 help-text">{{ form_help(form.content) }}</p>
    <div class="d-none">
        {{ form_widget(form.content) }}
    </div>
    <p>
        <button type="button" class="btn btn-sm btn-primary custom-form-add-field">
            Ajouter un champ au formulaire
        </button>
    </p>
</div>
{{ form_row(form.textAfter) }}

<div class="form-group mt-4">
    {{ form_label(form.targetEmails) }}
    <div class="form-error">
        {{ form_errors(form.targetEmails) }}
        {% for child in form.targetEmails.children %}
            {{ form_errors(child) }}
        {% endfor %}
    </div>
    <select id="custom_form_targetEmails" name="custom_form[targetEmails][]"
            aria-describedby="custom_form_targetEmails_help" class="form-control" multiple="multiple">
        {% for e in form.targetEmails.vars.value %}
            <option selected value="{{ e }}">{{ e }}</option>
        {% endfor %}
    </select>
    <small>{{ form_help(form.targetEmails) }}</small>
    {% do form.targetEmails.setRendered %}
</div>

{{ form_row(form.storeResults) }}
{{ form_row(form.published) }}
<div class="row">
    <div class="text-center col-12 col-lg-6">
        <a class="btn btn-fw btn-light-grey text-white fw-bold text-uppercase ls-2 py-2 my-2 mx-lg-0"
           href="{{ path('admin_custom_form_index') }}">
            Précédent
        </a>
    </div>
    <div class="text-center col-12 col-lg-6">
        <button class="btn btn-fw btn-dark-blue fw-bold text-uppercase ls-2 py-2 my-2 mx-lg-0">
            {{ button_label|default('Créer') }}
        </button>
    </div>
</div>
{{ form_end(form) }}