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

<div class="row">
    <div class="col-12 formHeader d-flex flex-wrap" data-tableau="{{ tableau|json_encode() }}" data-type="{{ type_id }}">
        <div class="col-3 form-group">
            {{ form_label(form.titre) }}
            {{ form_widget(form.titre, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.titre) }}
        </div>
        <div class="col-3 form-group">
            {{ 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_label(form.langue) }}
            {{ form_widget(form.langue, {'attr': {'class': 'ui fluid selectLangue'}}) }}
            {{ form_errors(form.langue) }}
        </div>
        <div class="col-3 form-group">
            {{ 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 class="row">

    <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="liststylenone p-0"
            data-prototype="{{ form_widget(form.association.vars.prototype)|e }}"
            data-widget-association="{{ '<div class=\"row association my-2\"></div>'|e }}">
            <!-- chargement javascript -->
        </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, {'attr': {'id': 'motclefBlock'}}) }}
        {{ 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 sauvegarder les choix -->
        <div id="widget_media" class="widget_media">
            <em>Aucune sélection</em>
        </div>
        <div>
            
            <div class="btn btn-outline-info popin"
                id="open_media_gallery"
                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>
        <hr/>
    </div>

</div>
{{ form_row(form._token) }}

<div hidden="hidden">
    <input type="submit" id="submit_form" value="Modifier" hidden="hidden" />
</div>

<div hidden="hidden">
    <!-- jeton csrf ? nouveau champ ? penser à y jeter un oeil -->
    {{ form_row(form) }}
</div>

{{ form_end(form) }}

{% if popin is defined and popin == false %}
{% else %}
    <script type="text/javascript">

        window.exercice = {};

        //Initialisation du json
        {% if 1 == type_id %} {# QCM #}
            {% for t in tableau %}
                {% set indexQuestion = loop.index %}
                window.exercice["{{ indexQuestion }}"] = {};
                window.exercice["{{ indexQuestion }}"]["reponses"] = {};
                window.exercice["{{ indexQuestion }}"]["question"] = "{{ t[0]|replace({"\n":' ', "\r":' '})|e }}";

                {% set indexReponse = 0 %}
                {% for r in t[1] %}
                    {% if loop.first %}
                        window.exercice["{{ indexQuestion }}"]["type"] = "{{ r }}";
                    {% else %}
                        window.exercice["{{ indexQuestion }}"]["reponses"]["{{ indexReponse }}"] = {};
                        window.exercice["{{ indexQuestion }}"]["reponses"]["{{ indexReponse }}"]["texte"] = "{{ r.texte|replace({"\n":' ', "\r":' '})|raw }}";
                        {% if r.media is defined %}
                        window.exercice["{{ indexQuestion }}"]["reponses"]["{{ indexReponse }}"]["media"] = "{{ r.media }}";
                        {% else %}
                        window.exercice["{{ indexQuestion }}"]["reponses"]["{{ indexReponse }}"]["media"] = "0";
                        {% endif %}
                        window.exercice["{{ indexQuestion }}"]["reponses"]["{{ indexReponse }}"]["etat"] = "{{ r.etat }}";
                    {% endif %}
                    {% set indexReponse = indexReponse+1 %}
                {% endfor %}
            {% endfor %}

        {% elseif 4 == type_id %} {# ASSOCIATION #}
            {% for t in tableau %}
                {% set indexAssocation = loop.index %}
                window.exercice["{{ indexAssocation }}"] = ["{{ t[0]|replace({"\n":' ', "\r":' '})|e }}", "{{ t[1]|replace({"\n":' ', "\r":' '})|e }}"];
            {% endfor %}
        {% endif %}

        $(document).ready(function () {
            window.enableAjaxButtonsExercices('edit');

            {% if media is defined %}
                window.previewMedia({{ media.id }});
            {% endif %}
        });

        // AJAX QCM
        var counter = {{ tableau|length }};
        enableAjaxButtonsQcm('edit', counter);
    </script>
{% endif %}