{% extends 'base.html.twig' %}

{% block title %}{{parent()}}: Activité {{ activite.libelle }}{% endblock %}

{% block body %}
    {% include 'breadcrumb.html.twig' %}

    <div class="container-fluid lecon" data-id="0">
        <div class="row">
            <div class="col-sm-12 col-xl-10 mx-auto">
                <div class="ancre_cachee" id="activite_id_{{ activite.id }}"></div>

                <div class="card Activite{{ counter_activite }} activite border-danger terminee"
                     data-pointeur="activite_id_{{ activite.id }}"
                     data-id="{{ activite.id }}"
                     data-index="{{ counter_activite }}">
                    <div class="card-header">
                        <h2 class="m-0"><i class="fa fa-files-o fa-lg mr-2" aria-hidden="true"></i> {#Activité #{{ activite.id }} -#} {{ activite.libelle }}</h2>
                    </div>
                    <div class="card-body">
                        {# lister tous les composants de cette activité #}

                        {# MAYDO: session demo #}
                        {% set cacher_submit_individuel = true %}
                        {% set param_readonly = false %}
                        {{ include('@Courses/Activite/index.html.twig') }}

                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/ns_module_activite.css') }}" rel="stylesheet" >
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('js/courses_media_createedit.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_multipleChoice.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillSD.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_gappFillW.js') }}?{{ date().timestamp }}"></script>

    <script type="text/javascript" src="{{ asset('js/jsplumb.js') }}?{{ date().timestamp }}"></script>
    <script src="{{ asset('js/courses_lecon_showactivites_association.js') }}?{{ date().timestamp }}"></script>

    <script src="{{ asset('js/courses_lecon_showactivites_openQuestion.js') }}?{{ date().timestamp }}"></script>

    <script>
    window.PATH_MEDIA_PREVIEW = "{{ path('courses_media_show', {'id': '__media_id__', 'preview': true, 'simple_vue':true})|raw }}";
    window.PATH_CORRECTIONS = "{{ path('courses_reponse_corrections') }}"

    window.arr_to_click = [];
    window.arr_ready = []; // se remplira de $.deferred chaque" fois que nécessaire

    interval_fix_jsplumb = setInterval(window.ns_fix_jsplumb, 1000);

    $(function () {
        window.previewMedias();

        //window.initTinyMCE();
        // et activer les exercices:
        if ('undefined' !== typeof window.jsPlumb) {
            window.bindAssociation() //brancher jsplumb que si tente de résoudre exercice, pas si juste create ou edit
        }
        window.bindGapfillSD();
        window.bindGapfillW();
        window.bindQCM();
        window.bindOpenQuestion();
        // et enfin retirer le loader
        window.hideLoader();

        //et montrer les corrections
        $.when.apply($, window.arr_ready).then(function(arg) {
            $('.composant').has('.contentRepJuste .soluce[data-soluce]').each(function(i, e) {
                var jq_composant = $(e),
                    type_id = jq_composant.attr('data-type-id'),
                    regex = /%NALTAQUOTE%/gi,
                    str_json = jq_composant.find('.contentRepJuste .soluce').attr('data-soluce')
                    .replace(regex,'"'),
                    json = JSON.parse(str_json);

                window.getCorrection(json, jq_composant, type_id);
            });
            //window.getActiviteCorrections({{ activite.id }})
        });
    });
    </script>
{% endblock %}