{# n'étend pas base.twig : utilisation dans ajax. javascript, css, etc. sont dans la pleine page au-delà de ce contenu #}
{% if formation_id is not defined %}
    {% set formation_id = 0 %}
{% endif %}
{% if module_id is not defined %}
    {% set module_id = 0 %}
{% endif %}
{% if lecon_id is not defined %}
    {% set lecon_id = 0 %}
{% endif %}
{% if activite_id is not defined %}
    {% set activite_id = 0 %}
{% endif %}

{# paramètre fourni par vue encapsulée (dans leçon) #}
{% if prefix is not defined %}
    {% set prefix = '0' %}
{% endif %}

{% if eleve_id is not defined %}
    {% set eleve_id = app.user.id %}
{% endif %}

{% set path_reponse = path('courses_reponse_submit', {
    'formation_id': formation_id,
    'module_id': module_id,
    'lecon_id': lecon_id,
    'eleve_id': eleve_id,
    'activite_id': activite_id,
    'id': composant.id
}) %}

{% set est_exercice = false %}
{% if composant.type.id == 1 or composant.type.id == 2 or composant.type.id == 3 or composant.type.id == 4 or composant.type.id == 5 %}
    {% set est_exercice = true %}
{% endif %}

{% set html_submit %}
    <div class="col-12">
        <input type="button" class="submit submitExercice btn btn-block btn-outline-success {#active#} w-auto ml-auto px-5 mt-3" value="Sauvegarder" />
    </div>
{% endset %}
{% if cacher_submit_individuel is defined %}
    {% if cacher_submit_individuel %}
        {% set html_submit = '' %}
    {% endif %}
{% endif %}

{# pour bloquer un composant, utiliser ceci : #}
{% set readonly = false %}
{% if param_readonly is defined %}
    {% if param_readonly %}
        {% set readonly = true %}
    {% endif %}
{% endif %}

{% set class_col = 'col-12' %}
{% if render_with is defined %}
    {% set class_col = 'col-8' %}
{% endif %}

{% set est_apercu = false %}
{% if formation_id == '0' or formation_id == 0 %}
    {% set est_apercu = true %}
{% endif %}

{% if('' == json) %}
    <em>exercice incorrect : à corriger en administration</em>
{% else %}
    {% if composant.type.id == 2 or composant.type.id == 3 %}

        {% set activite_validable = true %} {# il suffit d'un exercice pour que ce soit validable #}

        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.type.id == 2 %}
                    {% if composant.consigne|raw == "" %}
                        Complete the following sentences by (double) clicking on the most appropriate word.
                    {% else %}
                        {{ composant.consigne|raw }}
                    {% endif %}
                {% elseif composant.type.id == 3 %}
                    {% if composant.consigne|raw == "" %}
                        Fill in the blanks with the most appropriate words.
                    {% else %}
                        {{ composant.consigne|raw }}
                    {% endif %}
                {% endif %}
            </div>
        </h4>
        {# MULTIPLE CHOICE #}
    {% elseif composant.type.id == 1 %}

        {% set activite_validable = true %} {# il suffit d'un exercice pour que ce soit validable #}
        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}
                    Choose the correct answer.
                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
        {# ASSOCATION #}
    {% elseif composant.type.id == 4 %}

        {% set activite_validable = true %} {# il suffit d'un exercice pour que ce soit validable #}

        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}
                    Link the 2 corresponding elements.
                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
        {# OPEN QUESTION #}
    {% elseif composant.type.id == 5 %}

        {% set activite_validable = true %} {# il suffit d'un exercice pour que ce soit validable #}

        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}

                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
        {# TEXTE #}
    {% elseif composant.type.id == 8 %}
        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}
                    Read the text and then answer the following questions.
                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
        {# SON #}
    {% elseif composant.type.id == 10 %}
        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}
                    Listen to the recording and then answer the following questions.
                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
        {# VIDEO #}
    {% elseif composant.type.id == 11 %}
        <h4 class="consigne ml-md-5 my-md-3 ml-2 my-1 d-flex">
            <i class="fa fa-info-circle mx-1" aria-hidden="true" style="margin-top:2px;"></i>
            <div>
                {% if composant.consigne|raw == "" %}
                    Watch the video and then answer the following questions.
                {% else %}
                    {{ composant.consigne|raw }}
                {% endif %}
            </div>
        </h4>
    {% endif %}

    <div class="content mt-md-3 ml-md-4 mt-1 ml-2">
        <div class="composant_wrapper row rounded {% if composant.type.id == 6 or composant.type.id == 7 %}composant_wrapper_border{% endif %}"
             data-reponses="{{ session_reponses }}" {# sert pour montrer ce qui a été répondu #}
             data-erreurs="{{ session_indication }}" {# sert pour indiquerErreurs* #}
             data-correction="{{ session_correction }}"> {# note: pas besoin de |json_encode car c'est déjà un json encodé en string #}

            {# GAP FILL #}
            {% if composant.type.id == 2 or composant.type.id == 3 %}
            <div class="{{ class_col }}">
                {% if composant.type.id == 2 %}
                <div class="propositions p-1 p-md-2 rounded mb-1 mb-md-3 align-items-center d-flex">
                    <div class="panel panel-default panel-body">
                        <ul class="gap_fill_main_list option-pool-list list-inline d-flex col-12 p-0 m-0 flex-wrap">
                            {% for box in choix %}
                                <li data-destname="" tabindex="{{ box|raw }}"
                                    class="list-group-item btn element non-dropped py-2 px-1 px-md-3 {% if readonly == true %}toDisable{% endif %}">{{ box|raw }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}
                <div class="questions">
                    <div class="subquestion"
                         data-url="{{ path_reponse }}">
                        {% set numBox = 1 %}
                        {% for i in range(0, json.texte|length-1, 1) %}
                            {{ json.texte[i]|replace({'</p>': '</div><div class="subquestion">', '<p>': ''})|raw }}
                            {% if i !=  json.texte|length-1 and composant.type.id == 2 %}
                                <div class="panel panel-default d-inline-block m-1 m-md-2 gap"
                                     name="box{{ numBox }}">
                                    <ul class="gapfield-list list-group ui-select-and-drop"
                                        name="question{{ numBox }}"
                                        data-question-index="{{ numBox }}"
                                        data-sub-question-index=""></ul>
                                    <p class="reponseGapFill"></p>
                                    {% set numBox = numBox + 1 %}
                                </div>

                            {% elseif i !=  json.texte|length-1 and composant.type.id == 3 %}
                                {# gapfill write: passer en tinymce inline #}
                                {#{% with {
                                    'full_name': prefix ~ '_' ~ activite_id ~ '_' ~ composant.id ~ '_' ~ i ~ 'question' ~ numBox,
                                    'value': '',
                                    'theme': 'normale',
                                    'classes': 'form-control list-group question question' ~ numBox
                                    }
                                %}
                                    <div class="Gap mx-2 pt-1">
                                        {{ block('inlinetinymce_widget', "::form/fields.html.twig") }}
                                    </div>
                                {% endwith %}#}
                                <input class="form-control question question{{ numBox }} mx-1 my-1 mx-md-2 my-md-2 gapInput {% if readonly == true %}toDisableW{% endif %}"
                                       name="question{{ numBox }}"
                                       type="text"
                                >
                                {% set numBox = numBox + 1 %}
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            {{ html_submit }}
            {# MULTIPLE CHOICE #}
            {% elseif composant.type.id == 1 %}
            <div class="form {{ class_col }}" data-name="rep-{{ counter_activite }}-{{ counter}}"
                 data-url="{{ path_reponse }}">
                {% for i in range(1, questions|length, 1) %}
                    <div class="QCMblock my-1 p-1 my-md-2 p-md-2 rounded">
                        <div class="libelleQuestion d-flex align-items-center">
                            <h3 class="my-0 mr-1 mr-md-2">{{ i }}.</h3>
                            {% include 'inlinetinymceormedia_show.html.twig' with {
                                'data': questions[i]
                            } only %}
                        </div>
                        <form class="reponses reponses-{{ composant.id }}-{{ loop.index }}">
                            {% set nameQuestion = "question-" ~ counter_activite ~"-"~ counter %}
                            {% if reponses[i] is defined %}
                            <div class="options ml-1 ml-md-2">
                                {% for j0 in range(1, reponses[i]|length, 1) %}
                                {% if not loop.first %}
                                    {% set j = j0-1 %}
                                    {% set reponse_id = "rep-"~ counter_activite ~"-"~ counter ~"-"~ i ~"-"~ j %}

                                    {% if reponses[i][1] == 0 %}
                                        <div class="reponse my-1 px-1 reponseCbx d-flex align-items-center rounded">
                                            <h2 class="mr-md-2 ml-md-4 mr-1 ml-2 my-0 indexAlpha">{{ range('a','z')[loop.index-2] }}</h2>
                                            {#<input class="checkbox" id="{{ reponse_id }}" name="{{ reponse_id }}" type="checkbox">
                                            <label for="{{ reponse_id }}">{{ reponses[i][j0].texte }}</label>#}
                                            <input class="inp-cbx" id="{{ reponse_id }}" name="{{ reponse_id }}" type="checkbox" style="display: none;" data-name="{{ reponse_id }}" {% if readonly == true %}disabled{% endif %}/>
                                            <label class="cbx ml-0 d-flex align-items-center" for="{{ reponse_id }}">
                                                <span class="checkbox">
                                                    <svg width="12px" height="10px" viewbox="0 0 12 10">
                                                      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
                                                    </svg>
                                                </span>
                                                {% if reponses[i][j0].media is defined and reponses[i][j0].media != '0' %}
                                                    {% include 'inlinetinymceormedia_show.html.twig' with {
                                                        'data': 'media_id_'~reponses[i][j0].media
                                                    } only %}
                                                {% else %}
                                                    <span>{{ reponses[i][j0].texte }}</span>
                                                {% endif %}
                                            </label>
                                        </div>
                                    {% elseif reponses[i][1] == 1 %}
                                        <div class="reponse btnRadio my-1 p-1 d-flex align-items-center rounded">
                                            <h2 class="mr-1 ml-2 mb-1 mr-md-2 ml-md-4 indexAlpha">{{ range('a','z')[loop.index-2] }}</h2>
                                            <input id="{{ reponse_id }}"
                                                   type="radio"
                                                   name="{{ nameQuestion }}"
                                                   value="{{ reponses[i][j0].texte }}"
                                                   class="hide"
                                                   data-name="{{ reponse_id }}"
                                                   {% if readonly == true %}disabled{% endif %}
                                            >
                                            <label for="{{ reponse_id }}" class="labelRadio">
                                                {% if reponses[i][j0].media is defined and reponses[i][j0].media != '0' %}
                                                    {% include 'inlinetinymceormedia_show.html.twig' with {
                                                        'data': 'media_id_'~reponses[i][j0].media
                                                    } only %}
                                                {% else %}
                                                    {{ reponses[i][j0].texte }}
                                                {% endif %}
                                            </label><br/>
                                        </div>
                                    {% elseif reponses[i][1] == 2 %}
                                        <div class="reponse my-1 px-1 reponseCbx d-flex align-items-center rounded">
                                            <h2 class="mr-1 mr-md-2 ml-2 ml-md-4 my-0 indexAlpha w-auto">{{ range('a','z')[loop.index-2] }}{% if reponses[i][1] == 2 %}.{% endif %}</h2>
                                            <input class="inp-cbx" id="{{ reponse_id }}" name="{{ reponse_id }}" type="checkbox" style="display: none;" data-name="{{ reponse_id }}" {% if readonly == true %}disabled{% endif %}/>
                                            <h3 class="m-0">
                                                {% if reponses[i][j0].media is defined and  reponses[i][j0].media != '0' %}
                                                    {% include 'inlinetinymceormedia_show.html.twig' with {
                                                        'data': 'media_id_'~reponses[i][j0].media
                                                    } only %}
                                                {% else %}
                                                    {{ reponses[i][j0].texte }}
                                                {% endif %}
                                            </h3>
                                            <div class="btn-group mx-1 mx-md-2 groupVraiFaux" role="group">
                                                <button class="btn btn-block btn-secondary btnVrai {% if readonly == true %}toDisable{% endif %}" type="button" onclick="changerEtatRep(this);">VRAI</button>
                                                <button class="btn btn-block btn-secondary btnFaux mt-0 {% if readonly == true %}toDisable{% endif %}" type="button" onclick="changerEtatRep(this);">FAUX</button>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% endfor %}
                                </div>
                            {% endif %}
                        </form>
                    </div>
                {% endfor %}
            </div>
            {{ html_submit }}
            {# ASSOCATION #}
            {% elseif composant.type.id == 4 %}
                {% if association is defined %}
                    <!--  col-lg-4 -->
                    <div class="association {{ class_col }}"
                         data-url="{{ path_reponse }}"
                         data-length="{{ association|length }}">
                        {% set indexAssociation = 1 %}
                        {% for i in range(1, source|length, 1) %}
                            <div class="d-flex">
                                {# jsPlumb oblige l'usage d'indexes #}
                                <div class="association_box left d-flex align-items-center p-1 p-md-2 {% if readonly == true %}disabled{% endif %}" id="association-{{ prefix }}-{{ i }}-1">
                                    <div class="content ml-auto mr-1 mr-md-3">
                                        {% include 'inlinetinymceormedia_show.html.twig' with {
                                            'data': source[i-1]
                                        } only %}
                                    </div>
                                </div>
                                <div class="association_box right d-flex align-items-center p-1 p-md-2 {% if readonly == true %}disabled{% endif %}" id="association-{{ prefix }}-{{ i }}-2">
                                    <div class="content ml-1 ml-md-3">
                                        {% include 'inlinetinymceormedia_show.html.twig' with {
                                            'data': target[i-1]
                                        } only %}
                                    </div>
                                </div>
                            </div>
                            {% set indexAssociation = indexAssociation+1 %}
                        {% endfor %}
                    </div>
                    {{ html_submit }}
                {% endif %}
            {# OPEN QUESTION #}
            {% elseif composant.type.id == 5 %}
            <div class="open_question {{ class_col }}"
                 data-url="{{ path_reponse }}">
                    <div class="question">
                        {{ json.question | raw }}
                    </div>
                    {% if readonly == true %}
                        <p class="reponse_open_question mx-md-2 mx-1"></p>
                        <div class="contentReponseOQ mt-md-4 mt-2 mx-md-2 mx-1">
                            <p class="OQ-correction mr-2">Réponse :</p>
                        </div>
                        <div class="contentCorrectionOQ mt-md-4 mt-2 mx-md-2 mx-1">
                            <p class="OQ-correction mr-2">Correction :</p>
                        </div>
                    {% else %}
                        <textarea rows="4" cols="5" class="reponse_open_question form-control"></textarea>
                    {% endif %}
            </div>
            {{ html_submit }}
            {% elseif composant.type.id == 6 %}
            <div class="PointGrammaire p-md-3 p-1 rounded {{ class_col }}">
                <div class="row">
                    <div class="col-9">
                        {{ json.question | raw }}
                    </div>
                    <div class="col-3">
                        <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                        <div class="widget_media" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
                    </div>
                </div>
            </div>
            {% elseif composant.type.id == 7 %}
            <div class="PointVocabulaire p-md-3 p-1 rounded {{ class_col }}">
                <div class="row">
                    <div class="col-9">
                        {{ json.question | raw }}
                    </div>
                    <div class="col-3">
                        <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                        <div class="widget_media" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
                    </div>
                </div>
            </div>
            {% elseif composant.type.id == 8 %}
            <div class="Texte p-md-3 p-1 rounded {{ class_col }} bg-light">
                <div class="row">
                    <div class="col-9">
                        {{ json.question | raw }}
                    </div>
                    <div class="col-3">
                        <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                        <div class="widget_media" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
                    </div>
                </div>
            </div>

            {% elseif composant.type.id == 9 %} {# DESACTIVE #}
            <div class="Consigne p-md-3 p-1 rounded {{ class_col }}">
                {{ json.question | raw }}
            </div>

            {% elseif composant.type.id == 10 %} {# son #}
            <div class="{{ class_col }} d-flex">
                {# Version ajax #}
                <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                <div class="widget_media mx-auto" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
            </div>
            {% elseif composant.type.id == 11 %} {# vidéo #}
            <div class="{{ class_col }} d-flex">
                <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                <div class="widget_media mx-auto" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
            </div>
            {% elseif composant.type.id == 12 %} {# image #}
            <div class="{{ class_col }} d-flex">
                <input type="hidden" class="media_to_show" name="media_id_{{ media_id }}" value="{{ media_id }}" />
                <div class="widget_media mx-auto" data-visu-of="input:hidden.media_id_{{ media_id }}"></div>
            </div>
            {% elseif composant.type.id == 13 %} {# transcript #}
            <div class="{{ class_col }}">
                <div class="Transcript p-2 rounded">
                    {{ json.question | raw }}
                </div>
            </div>
            {% else %}
            <div class="{{ class_col }}">
                <em>type inconnu{{ composant.type.id }}</em>
            </div>
            {% endif %}

            {% if render_with is defined %}
                {% set inner_exercice_id = render_with %}
                <div class="col-4">
                    {{ render(controller(
                        'CoursesBundle:Exercice:show', {
                            'id': inner_exercice_id,
                            'formation_id': formation_id,
                            'module_id': module_id,
                            'lecon_id': lecon_id,
                            'activite_id': activite_id,
                            'prefix': prefix ~ "_" ~ (counter+1),
                            'counter': (counter+1),
                            'counter_activite': counter_activite,
                            'render_inner': true,
                            'with_session_reponse': false,
                            'cacher_submit_individuel': true,
                            'param_readonly': true,
                        } ))
                    }}
                </div>
            {% endif %}

            {% if est_exercice %}
                {% set class_succes = '' %}
                {% if readonly == true %}
                    {% if composant.type.id == 5 %}
                        {% set class_succes = 'attente' %}
                    {% elseif session_reussi %}
                        {% set class_succes = 'juste' %}
                    {% else %}
                        {% set class_succes = 'faux' %}
                    {% endif %}
                {% endif %}

                {% if est_apercu %}
                    {% set class_succes = 'juste' %}
                {% endif %}
                <div class="resultat col-12 mt-4 p-0 rounded bg-light">
                    <div class="col-12 mx-auto d-flex align-items-center rounded etatReponse py-2 {{ class_succes }}">
                        <div class="icones col-1 p-0">
                            <div class="iconRepFausse mx-auto">
                                <i class="fa fa-times fa-2x m-auto" aria-hidden="true"></i>
                            </div>
                            <div class="iconRepJuste mx-auto">
                                <i class="fa fa-check fa-2x m-auto" aria-hidden="true"></i>
                            </div>
                            <div class="iconRepAttente mx-auto">
                                <i class="fa fa-pencil fa-2x m-auto" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="contentRepJuste col-10 p-0 ml-2">
                            {% if est_apercu %}
                                <h1 class="solution m-0 mr-2">
                                    Solution&nbsp;:&nbsp;<span class="soluce" data-soluce="{{ json|json_encode(constant('JSON_HEX_QUOT'))|replace({'"':"%NALTAQUOTE%"}) }}"></span>
                                </h1>
                            {% else %}
                                <h1 class="m-0 ">Bonne réponse !</h1>
                            {% endif %}
                        </div>
                        <div class="contentRepFaux col-10 p-0 ml-2">
                            <h1 class="m-0">Mauvaise réponse !</h1>
                        </div>
                        <div class="contentRepAttente col-10 p-0 ml-2">
                            <h1 class="m-0 ">
                                {% set commentaire = 'En attente de correction...' %}

                                {% set note = '' %}
                                {% if session_note is defined %}
                                    {% if session_note|length>0 %}
                                        {% set note = session_note %}
                                        {% set commentaire = '' %}
                                    {% endif %}
                                {% endif %}

                                {% if session_commentaire is defined %}
                                    {% if session_commentaire|length>0 %}
                                        {% set commentaire = session_commentaire %}
                                    {% endif %}
                                {% endif %}

                                {% if note != '' %}{{ note }}{% endif %}{% if note != '' and commentaire != '' %} | {% endif %}{% if commentaire != '' %}{{ commentaire }}{% endif %}
                            </h1>
                        </div>
                    </div>
                    {% if est_apercu == false %}
                        <h1 class="solution mx-5 my-3" hidden="hidden">
                            Solution&nbsp;:&nbsp;<span class="soluce"></span>
                        </h1>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>
{% endif %} {# fin si json #}