{% if popin is defined and popin == false %}
    {{ form_start(form, {'method': 'post', 'action': path('courses_composant_create' ), 'multipart': true, 'attr': {'id': 'form_courses_composant'} }) }}
{% else %}
    {{ form_start(form, {'method': 'post', 'action': path('courses_popin_create_composant' ), 'multipart': true, 'attr': {'id': 'form_courses_composant'} }) }}
{% endif %}

<div class="row">
    <div class="col-12 formHeader d-flex flex-wrap">
        <div class="col-3 form-group form-Header">
            {{ form_label(form.titre) }}
            {{ form_widget(form.titre, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.titre) }}
        </div>
        <div class="col-3 form-group form-Header">
            {{ form_label(form.type) }}
            {{ form_widget(form.type, {'attr': {'class': 'ui fluid selectType', 'onchange': 'selectionType(this.value);'}}) }}
            {{ form_errors(form.type) }}
        </div>
        <div class="col-3 form-group form-Header">
            {{ form_label(form.langue) }}
            {{ form_widget(form.langue, {'attr': {'class': 'ui fluid selectLangue'}}) }}
            {{ form_errors(form.langue) }}
        </div>
        <div class="col-3 form-group form-Header">
            {{ form_label(form.niveau, 'Niveau ') }}
            {{ form_widget(form.niveau, {'attr': {'class': 'ui fluid search'}}) }}
            {{ form_errors(form.langue) }}
        </div>
        <div class="col-12 form-group">
            {{ form_label(form.consigne) }}
            {{ form_widget(form.consigne) }}
            {{ form_errors(form.consigne) }}
        </div>
        <div id="textBlock" class="col-12 component-part form-group" style="display:none;">
            {{ form_label(form.contenu) }}
            {{ form_widget(form.contenu) }}
            {# , {'attr': {'class': 'tinymce', 'data-theme': 'advanced'}}#}
            {{ form_errors(form.contenu) }}
        </div>
        <div id="gapFillBlock" class="col-12 component-part form-group" style="display:none;">
            {{ form_label(form.contenucrochets) }}
            {{ form_widget(form.contenucrochets) }}
            {# , {'attr': {'class': 'tinymce', 'data-theme': 'advanced'}}#}
            {{ form_errors(form.contenucrochets) }}
        </div>
    </div>
</div>
<div id="qcmBlock" class="component-part form-group col-12" style="display:none;">
    <ul id="qcm-list"
        class="qcms liststylenone"
        data-prototype="{{ form_widget(form.qcm.vars.prototype)|e }}"
        {#data-prototype-rep="{{ form_widget(form.qcm.vars.prototype.reponses.vars.prototype)|e }}"#}
        data-widget-qcm="{{ block('qcm_question_proto', "::form/fields.html.twig") |e }}">
    </ul>
    <button type="button" class="add-another-collection-widget form-control btn btn-block btn-outline-dark" data-list="#qcm-list" id="addQCM">Ajouter une question</button>
</div>

<div id="associationBlock" class="component-part form-group col-12" style="display:none;">
    <ul id="association-list"
        class="associations liststylenone p-0"
        data-prototype="{{ form_widget(form.association.vars.prototype)|e }}"
        data-widget-association="{{ '<div class=\"row association my-2\"></div>'|e }}">
    </ul>
    <button type="button" class="add-another-collection-widget form-control btn btn-block btn-outline-success" data-list="#association-list" id="addAssociation">Ajouter une association</button>
</div>

<div id="motclefBlock" class="component-part form-group col-12" style="display:none;">
    {{ form_label(form.motclef) }}
    {{ form_widget(form.motclef) }}
    {{ form_errors(form.motclef) }}
</div>
<div id="mediaBlock" class="component-part form-group col-12" style="display:none;">
    {{ form_row(form.media) }} {# champ caché pour sauvegardé les choix #}
    <div id="widget_media" class="widget_media">
        <em>Aucune sélection</em>
    </div>
    <div>
        <div class="btn btn-primary popin"
            id="open_media_gallery"
            name="form[buttonmedia]"
            data-href="{{ path('courses_media_gallery_popin') }}"
            data-content-href="{{ url('courses_media_index', {'gallery': true,
                'selectable':true,
                'with_buttons': false,
                'type':'__type__',
                'filter':'__filter__',
                'limit':'__limit__',
                'columns' : '__columns__',
                'category':'__category__'
            }) }}"
            data-title="Choisissez un media pour ce composant">
            <i class="nav-icon fa fa-list-alt mr-2" aria-hidden="true"></i>
            Galerie
        </div><!-- nouveau media: voir popin galerie -->
        <div class="btn btn-primary mr-1" 
            id="delete_image" 
            onclick="deleteMedia()"
            data-title="Supprimer le média">
            <i class="nav-icon fa fa-trash-o mr-2" aria-hidden="true"></i>
            Supprimer le média
        </div>
    </div>
</div>
<div hidden="hidden">
    <!-- jeton csrf ? nouveau champ ? penser à y jeter un oeil -->
    {{ form_row(form) }}
</div>

<div>
    <input type="submit" id="submit_form" value="Créer" hidden="hidden" />
</div>
{{ form_end(form) }}