{% extends 'layout.twig' %}

                {% block body %}

                <style>

                    .loupeCustom {
                        background-image   : url('{{baseUrl()}}/IconeV2/Gestion/zoom.svg');
                        background-position: right 8px center;
                        background-repeat  : no-repeat;
                        cursor             : pointer;
                        background-size    : 14px;
                    }
                }
                </style>

                <div class="contenu clearfix" id="Consultation">

                    {% set isPanier = MODULE == 'PanierDA' or MODULE == 'PanierCDE' %}
                    {% if update %}
                        {% set formActionPath = path('TermeDePaiement.TermeDePaiement.tpValidationUpdate', {MODULE, id, numtp, critere}) %}
                    {% else %}
                        {% set formActionPath = path('TermeDePaiement.TermeDePaiement.tpValidationCreate', {MODULE, id, critere})%}
                    {% endif %}
                    {% set messageInfo = 'La création du terme de paiement a été enregistrée avec succès' %}
                    <script>
                        window.action.returnToPathTermePaiement = function ( reponse ) {

                            const data = JSON.parse ( reponse );
                            let path   = data.path;{% if MODULE == 'DA_ENTET' or MODULE == 'DemandeAchat' %}path = "{{ path('DemandeAchat.ModificationDemandeAchat.index', {idDA: id, mode:'modification', onglet:'items'}) }}";
                            {% elseif MODULE == 'CA_ENTET' or MODULE == 'Commande' %}path = "{{ path('Commande.ModificationCommande.index', {idCommande:id, onglet:'termesdepaiement'}) }}";
                            {% elseif MODULE == 'PanierCDE' %}path = "{{ path('TermeDePaiement.TermeDePaiement.termeDePaiement', {MODULE: 'PanierCDE', id, critere}) }}";
                            {% else %}path = "{{ path('TermeDePaiement.TermeDePaiement.termeDePaiement', {MODULE: 'PanierDA', id}) }}";{% endif %}
                            {% if MODULE == 'DA_ENTET' or MODULE == 'DemandeAchat' or MODULE == 'CA_ENTET' or MODULE == 'Commande' %}
                                if ( data ?. post === undefined ) {

                                    data.post = {};

                                }
                                data.post.onglet = 'termesdepaiement';
                                if ( ! path.endsWith ( '?onglet=termesdepaiement' ) ) {

                                    path = path + '?onglet=termesdepaiement';

                                }
                            {% endif %}
                            redirectJSWithPost ( path, data.post ?? {} );

                        }
                    </script>

                    <h1>
                        {% if isPanier %}
                            {{ 'Panier' | trad }}
                        {% elseif MODULE == 'Commande' %}
                            {{ 'Commande' | trad }}
                        {% else %}
                            {{ 'Demande d\'achat' | trad }}
            {% endif %}
        </h1>

        {{ ariane() }}
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em;">
            <div>
                <h2>
                    {{ titre }}
                </h2>
            </div>
            <div>
                {{ arianeAnnuler() }}
                <button type="submit" class="button principal" form="form_new_TermeDePaiement">
                    {{ 'Enregistrer' | trad }}
                </button>
            </div>
        </div>
        
        <div class="clearfix">
            <form 
                method="post"
                id='form_new_TermeDePaiement'
                action="{{ formActionPath }}"
                onsubmit="return ajaxSubmit(event)"
                data-onsuccess="returnToPathTermePaiement"
                class="box-form clearfix"
            >
                <input type="hidden" name="fromCreationEntete" value="true" />
                <div class="tab-content" >
                    <div style="display: flex; gap: 3em">
                        <div style="width: 50%">
                            <div class="row">
                                {{ inputAdvance('TEXT',{
                                    'titre'              : 'Libellé du terme de paiement' | trad,
                                    'name'               : 'LIBELLE_TP',
                                    'value'              : post.LIBELLE_TP ?? terme.LIBELLE,
                                    'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                                    'paramsValidator'    : {'sizeMin' : 0, 'sizeMax' : 120, 'nomChamp': 'Libellé du terme de paiement' | trad},
                                    'obligatoire'        : true
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('TEXTAREA',{
                                    'titre'              : 'Descriptif' | trad,
                                    'name'               : 'DESCRIPTIF_TP',
                                    'value'              : post.DESCRIPTIF_TP ?? terme.DESCRIPTIF,
                                    'pathValidator'      : path('Ajax.validator.isStringAvecEspace'),
                                    'paramsValidator'    : {'sizeMin' : 0, 'sizeMax' : 3000,'nomChamp': 'Descriptif' | trad},
                                }) }}
                            </div>
                            <hr>
                            <div class="row">
                                {{ inputAdvance('DEVISE', {
                                    'titre': ttc ? 'Montant de la commande (TTC)' | trad : 'Montant de la commande (HT)' | trad,
                                    'name': 'TOTAL_COMMANDE',
                                    'value': (commande.TOT_CDEHT ?? demandeAchat.TOTAL_DA ?? mntBasePanier) | prix,
                                    'option' : 'readOnly',
                                    'devise' : devise
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('DEVISE', {
                                    'titre': 'Montant de base (somme des lignes sélectionnées)' | trad,
                                    'name': 'MNT_BASE',
                                    'value': (terme.MNT_BASE ?? post.MNT_BASE ?? 0) | prix,
                                    'option' : 'readOnly',
                                    'devise' : devise
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('DEVISE', {
                                    'titre': 'Pourcentage à payer' | trad,
                                    'devise' : '%',
                                    'name': 'POURC_TP',
                                    'value': (post.POURC_TP ?? terme.POURC_TP ?? 0) | prix,
                                    'obligatoire': true,
                                    'pathValidator': path('Ajax.validator.float'),
                                    'paramsValidator': {'min': 0, 'max': 100, 'nomChamp': 'Pourcentage à payer' | trad},
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('DEVISE', {
                                    'titre': ttc ? 'Montant du TP à payer (TTC)' | trad : 'Montant du TP à payer (HT)' | trad,
                                    'name': 'TOTAL_PAYER',
                                    'value': (post.TOTAL_PAYER ?? 0) | prix,
                                    'option' : 'readOnly',
                                    'devise' : devise
                                }) }}
                            </div>
                            <span class="infos_tooltip top-right">
                                {{ 'Le montant du terme de paiement à payer est calculé automatiquement en fonction du montant de base et du pourcentage à payer.' | trad }}
                            </span>
                            <div class="row">
                                {{ inputAdvance('SWITCH', {
                                    titre: 'Proportionnel livraisons' | trad,
                                    name: 'BASE_LIVR',
                                    value: post.BASE_LIVR ?? terme.BASE_LIVR,
                                    infos: 'En cochant ce bouton, vous déterminez que le paiement du terme de paiement est calculé en fonction des livraisons que vous avez réellement reçues.' | trad
                                }) }}
                            </div>
                            <hr>
                            <div class="row">
                                {{ inputAdvance('SWITCH', {
                                    titre: 'Facturation à terme' | trad,
                                    name: 'FACTATERME',
                                    value: post.FACTATERME ?? terme.FACTATERME, 
                                    infos: 'En cochant ce bouton, vous choisissez à quel moment le terme de paiement est facturable.' | trad
                                }) }}
                            </div>
                            <div class="toHide">
                                <div class="row">
                                    {{ inputAdvance('TEXT',{
                                        'titre'              : 'Délai de facturation à terme' | trad,
                                        'name'               : 'DELAIFACT_TP',
                                        'value'              : post.DELAIFACT_TP ?? terme.DELAIFACT,
                                        'pathValidator'      : path('Ajax.validator.integer'),
                                        'paramsValidator'    : {sizeMin : 1, controleByValue: true, nomChamp: 'Délai de facturation à terme' | trad },
                                        'obligatoire'        : true,
                                        'option'             : (post.FACTATERME ?? terme.FACTATERME ) ? 'disabled' : ''
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('SELECT',{
                                        'titre'              : 'Type de délai de facturation à terme' | trad,
                                        'name'               : 'TYPEDELAIFACT_TP',
                                        'listeValue'         : typeDeDelai,
                                        'value'              : post.TYPEDELAIFACT_TP ?? terme.TYPEDELAIFACT,
                                        'optionVide'         : true,
                                        'obligatoire'        : true,
                                        'option'             : (post.FACTATERME ?? terme.FACTATERME) ? 'disabled' : ''
                                    }) }}
                                </div>
                            </div>
                        </div>
                        <div style="width: 50%">
                            {% include "@TermeDePaiement/TermeDePaiement/_lignesArticles.twig" %}
                        </div> 
                    </div> 
                    <div style="display: flex;">
                        <div style="width: 100%">
                        <hr>
                        <div class="flex" style="gap: 3em">
                            <div style="width: 50%;">
                                <div class="row">
                                    <div class="input-wrapper input-switch">
                                        <label style="width: 40%">{{ 'Déclenchement(s)' | trad }}
                                            <span class="white-tooltip icone_input">
                                                <span class="infos_tooltip top-left">
                                                    <span class="tooltip-arrow"></span>{{"Les déclenchements indiquent l’action qui doit être réalisée pour que le paiement puisse être facturé." | trad}}</span>
                                                <img src="{{ baseUrl('IconeV2/Gestion/question.svg') }}">
                                            </span>
                                        </label>
                                    </div>
                                    <div class="bs-col"></div>
                                </div>
                            </div>
                            <div style="width: 50%;">
                            </div>
                        </div>
                        <div>
                            <table class="table">
                                <thead class="thead-dark">
                                    <tr>
                                        <th scope="col" width="">{{ triTable('CODE_EVT', infoPagination.filter.tri_CODE_EVT, 'Code' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="">{{ triTable('LIB_EVT', infoPagination.filter.tri_LIB_EVT, 'Libellé' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="">{{ triTable('HAPLUS', infoPagination.filter.tri_HAPLUS, 'Automatique' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="">{{ triTable('PRO_POSTE', infoPagination.filter.tri_PRO_POSTE, 'Avec postes ?' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="">{{ triTable('RESPONSABLE_TP', infoPagination.filter.tri_RESPONSABLE_TP, 'Responsable' | trad, 'genetableau', '', 'formulaireListeTypeEvt') }}</th>
                                        <th scope="col" width="" style="text-align: right;">
                                            <button class="ajouter_blanc_v2 white-tooltip" id="declenchements" onClick="redirectToDeclenchement();" type="button" style="background-color: transparent; border: none; margin-right: 0 !important">
                                                <span class="infos_tooltip left">
                                                    {{ 'Ajouter / modifier des déclenchements' | trad }}
                                                </span>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for evt in post.selected_evt %}
                                {% set CODE_EVT = (evt.detailEvent.CODE_EVT ?? evt.CODE_EVT ?? '') | convert_encoding('UTF-8', 'ISO-8859-1') %}
                                    <input type="hidden" name="selected_evt[]" value="{{ ( CODE_EVT ~ '|' ~ (evt.LIB_EVT ?? evt.detailEvent.LIB_EVT) ~ '|' ~ ((evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolSql) ~ '|' ~ ((evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql) ) | e('html_attr') }}">
                                    <tr id="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'tr_index_' ~ CODE_EVT}}">
                                        <td class="{{ (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? ' loupeCustom' : ''}}">
                                            {{ CODE_EVT }}
                                        </td>
                                        <td>
                                            {{ (evt.detailEvent.LIB_EVT ?? evt.LIB_EVT ?? '') | convert_encoding('UTF-8', 'ISO-8859-1') | trad }}
                                        </td>
                                        <td>
                                            {{ (evt.detailEvent.HAPLUS ?? evt.HAPLUS ?? false) | boolTrad }}
                                        </td>
                                        <td>
                                            {{ (evt.detailEvent.PRO_POSTE ?? evt.PRO_POSTE ?? false) | boolTrad }}
                                        </td>
                                        <td>
                                            {% if not (evt.HAPLUS ?? evt.detailEvent.HAPLUS) | boolSql %}
                                            <input type="hidden" name="responsable_tp_visible[{{ CODE_EVT }}]" id="responsable_tp_visible_{{ CODE_EVT }}" value="1">
                                            {{ inputAdvance('ZOOMADVANCE',{
                                                'name':"RESPONSABLE_TP-" ~ CODE_EVT,
                                                'pahtZoom':path('Ajax.liste.utilisateurSociete'),
                                                'paramZoom': {tri_CODE: 'ASC'},
                                                'value': post['RESPONSABLE_TP-'~ CODE_EVT] ?? evt.RES_TP ?? user,
                                                'convertLibelle':"convertLibelleGlobal",
                                                'pathValidator':path('Ajax.validator.zoom'),
                                                'paramsValidator':{entity : 'HASTUTIL',nomChamp : 'Responsable TP' | trad, 'null' : true },
                                                'addStyle':'full',
                                                'pathConvert':path('Ajax.outil.convertLibelle'),
                                                'entity':'HASTUTIL',
                                                'titleZoom' : 'Responsable du Terme de Paiement' | trad,
                                                'obligatoire' : true
                                            }) }}
                                            {% else %}
                                            {% endif %}
                                        </td>
                                        <td style="text-align: right;">
                                            {{ hover_action((evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql ? 'evenement' ~ loop.index : 'tr_index_' ~ CODE_EVT, 'Supprimer_v2', 'deleteRow(this)', '', 'Supprimer la ligne', '', false) }}
                                        </td>
                                    </tr>
                                    {% if (evt.PRO_POSTE ?? evt.detailEvent.PRO_POSTE) | boolSql %}
                                    <tr data-code-evt="{{ CODE_EVT }}" id="evenement{{loop.index}}detail" class="detail_ligne hide_detail">
                                        <td colspan="6">
                                            {% include '@TermeDePaiement/TermeDePaiement/_affectationSeuil.twig' %}
                                        </td>
                                    </tr>
                                    {% endif %}
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>      
    <script>

    // FUNCTIONS

    function addToHiddenContainer(checkboxData) {
        var seuilInput = document.querySelector(
            'input[name="seuils[' + checkboxData.dataset.id + ']"]'
        );
        var seuilValue = seuilInput ? seuilInput.value : "";
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = "selected_lignes_data[]";
        input.value = JSON.stringify({
            CODE_ART: checkboxData.dataset.code_art,
            NO_PO: checkboxData.dataset.no_po,
            DES_SOMM: checkboxData.dataset.des_somm,
            PU: checkboxData.dataset.pu,
            QTE_DEM: checkboxData.dataset.qte_dem,
            SEUIL: seuilValue,
        });
        document.getElementById("hiddenInputsContainer").appendChild(input);
    }

    function parseNumber(val) {
        if (val === null || val === undefined || val === '') return 0;
        let s = String(val).trim();
        s = s.replace(/[\s\u00A0]/g, '');
        // Si le nombre contient une virgule et un point, on suppose que la virgule est le séparateur de milliers
        if (s.indexOf(',') > -1 && s.indexOf('.') > -1) {
            s = s.replace(/,/g, '');
        } else if (s.indexOf(',') > -1) {
            // Sinon, la virgule est le séparateur décimal
            s = s.replace(/,/g, '.');
        }
        // Supprime tout sauf chiffres, point, et moins
        s = s.replace(/[^0-9\.\-]/g, '');
        const n = parseFloat(s);
        return isNaN(n) ? 0 : n;
    }

    function formatMontant(val) {
        let n = parseFloat(val);
        if (isNaN(n)) return '0.00';
        // Format français (espace insécable pour milliers, virgule pour décimal)
        let formatted = n.toLocaleString('fr-FR', {minimumFractionDigits: 2, maximumFractionDigits: 2})
            .replace(/\s/g, '\u00A0'); // espace insécable
        // Remplace la virgule décimale par un point
        formatted = formatted.replace(/,/, '.');
        return formatted;
    }

    function calculMntBase(prixUnitaire, quantite) {
        const actualValue = $('#input_MNT_BASE').val();
        const newValue = parseNumber(actualValue) + (parseNumber(prixUnitaire) * parseNumber(quantite));
        $('#input_MNT_BASE').val(formatMontant(newValue));
    }

    function calculMontantAPayer() {
        const mntBase = $('#input_MNT_BASE').val();
        const prcentage = $('#input_POURC_TP').val();

        if( ((mntBase != '') && (prcentage != '') && parseNumber(mntBase) != 0) && (parseNumber(prcentage) != 0) ) {
            const montant = parseNumber(mntBase) * parseNumber(prcentage) / 100;
            $('#input_TOTAL_PAYER').val(formatMontant(montant));
        } else {
            $('#input_TOTAL_PAYER').val(formatMontant(0));
        }
    }

    function updateSelectedCountAndHiddenInputs() {
        document.querySelectorAll('input[name^="seuils["]').forEach((input) => {
            // TODO: Modifier RegEx
            var match = input.name.match(/^seuils\[(.+)\]$/);
            if (match) {
                var ligneFullId = match[1];
                var checkbox = document.querySelector(
                    'input.selected_lignes[data-id="' + ligneFullId + '"]'
                );
                if (checkbox) {
                    checkbox.setAttribute("data-seuil", input.value);
                }
            }
        });

        // ajout / maj des lignes sélectionnées dans le hiddenInputsContainer + calcul montant de base
        const hiddenContainer = document.getElementById("hiddenInputsContainer");
        hiddenContainer.innerHTML = "";
        $('#input_MNT_BASE').val((0).toFixed(2));
        const checkboxes = document.querySelectorAll(".selected_lignes:checked");
        checkboxes.forEach((cb) => {
            addToHiddenContainer(cb);
            calculMntBase(cb.dataset.pu, cb.dataset.qte_dem);
        });

        calculMontantAPayer();

        // changement du nombre de lignes sélectionnées
        const formdata = new FormData(
            document.getElementById("form_new_TermeDePaiement")
        );
        document.getElementById("countSelected").innerHTML = formdata.getAll(
            "selected_lignes_data[]"
        ).length;

        if(formdata.getAll("selected_lignes_data[]").length === document.querySelectorAll(".selected_lignes").length) {
            document.querySelector("#selectAllLignes").checked = true;
        }
    }

    function deleteRow(element) {
        const row = element.closest('tr');
        const codeEvtCell = row.querySelector('td:first-child');
        const codeEvt = codeEvtCell ? codeEvtCell.textContent.trim() : null;
 
        if (codeEvt) {
            const hiddenInputs = document.querySelectorAll('input[name="selected_evt[]"]');
            hiddenInputs.forEach(input => {
                if (input.value.startsWith(codeEvt)) {
                    input.parentElement.removeChild(input);
                }
            });
            if(row.id.startsWith('evenement')) {
                const rowDetails = row.nextElementSibling;
                if(rowDetails.id.startsWith('evenement') && rowDetails.id.endsWith('detail')) {
                    rowDetails.parentElement.removeChild(rowDetails);
                }
            }
            row.parentElement.removeChild(row);
        }
    }

    function handleSeuilChange() {
        const parentTr = $(this).closest('tr');
        const pu = parentTr.find('td').eq(3).text().trim();
        const qte = parentTr.find('td').eq(4).text().trim();

        let calcul = 0;
        if(($(this).val() != '') && ($(this).val() != '0')) {
            calcul = (((parseFloat(qte.split(' ')[0])) * parseFloat($(this).val())) / 100);
            const decimalLength = qte.split(' ')[0].split('.')[1].length;
            calcul = roundNumber(calcul, decimalLength);
        }

        parentTr.find('.calculSeuil').text(calcul + ' ' + qte.split(' ')[1]);
    }

    // EVENT LISTENER
    // DOM CONTENT LOADED
                        
    document.addEventListener("DOMContentLoaded", function () {
        if ($("#input_FACTATERME").is(":checked")) {
            $(".toHide").removeClass("hide");
            $("#input_DELAIFACT_TP").prop("disabled", false);
            $("#input_TYPEDELAIFACT_TP").prop("disabled", false);
            $('.table-fixed').css('height', '420px');
        } else {
            $(".toHide").addClass("hide");
            $("#input_DELAIFACT_TP").prop("disabled", true);
            $("#input_TYPEDELAIFACT_TP").prop("disabled", true);
            $('.table-fixed').css('height', '330px');
        }

        const allCheckboxes = document.querySelectorAll(
            'input[id^="input_selected_lignes_"]'
        );
        allCheckboxes.forEach((cb) => {
            cb.addEventListener("change", () => {
                updateSelectedCountAndHiddenInputs();
            });
        });

        const mainCheckbox = document.querySelector("#selectAllLignes");
        if (mainCheckbox) {
            mainCheckbox.addEventListener("change", () => {
                updateSelectedCountAndHiddenInputs();
            });
            {% if (not update) and (post.selected_lignes | length) == 0 %}
                mainCheckbox.click();
            {% endif %}
        }

        document.querySelectorAll('input[name^="seuils["]').forEach((input) => {
            input.addEventListener("input", () => {
                updateSelectedCountAndHiddenInputs();
            });
        });

        var responsableInput = document.querySelector(
            'input[name="RESPONSABLE_TP"]'
        );
        if (responsableInput) {
            var responsableRow = responsableInput.closest(".row");
            if (responsableRow) {
                responsableRow.id = "row-responsable-tp";
            }
        }

        updateSelectedCountAndHiddenInputs();
    });

    $(document).ready(function() {
        $('.inputSeuil').on('change', function() {
            handleSeuilChange.call(this);
        })

        $('.inputSeuil').each(function() {
            handleSeuilChange.call(this);
        })
    });

    // LINKED TO ID OR CLASS
    $("#input_FACTATERME").on("change", () => {
        if ($("#input_FACTATERME").is(":checked")) {
            $(".toHide").removeClass("hide");
            $("#input_DELAIFACT_TP").prop("disabled", false);
            $("#input_TYPEDELAIFACT_TP").prop("disabled", false);
            $('.table-fixed').css('height', '420px');
        } else {
            $(".toHide").addClass("hide");
            $("#input_DELAIFACT_TP").prop("disabled", true);
            $("#input_TYPEDELAIFACT_TP").prop("disabled", true);
            $('.table-fixed').css('height', '330px');
        }
    });

    document.querySelector("#declenchements").addEventListener("click", () => {
    });

    function redirectToDeclenchement() {
        const formData = new FormData(
            document.getElementById("form_new_TermeDePaiement")
        );
        const selected_evt = formData.getAll('selected_evt[]');
        formData.append('selected_evt', selected_evt);
        const obj = {};
        formData.forEach((value, key) => {
            if (obj.hasOwnProperty(key)) {
                if (Array.isArray(obj[key])) {
                    obj[key].push(value);
                } else {
                    obj[key] = [obj[key], value];
                }
            } else {
                obj[key] = value;
            }
            });
        redirectJSWithPost(
            "{{ path('TermeDePaiement.TermeDePaiement.ajoutDeclenchements', {MODULE: (MODULE == 'CA_ENTET' ? 'Commande' : (MODULE == 'DA_ENTET') ? 'DemandeAchat' : MODULE), id, critere, numtp: (update ? numtp : 0) }) }}",
            obj
        );
    }

    $('.loupeCustom').on('click', function() {
        const trParent = $(this).closest('tr').attr('id');
        $('#' + trParent + 'detail').toggleClass('hide_detail');
    });

    $('#input_MNT_BASE').on('change', function() {
        calculMontantAPayer();
    });

    $('#input_POURC_TP').on('change', function() {
        calculMontantAPayer();
    });

</script>
{% endblock %}
