{% extends 'layout.twig' %}

{% block body %}
    <div class="contenu clearfix" id="ListeModeles">

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

        {{ ariane() }}

        <div class="flex justify-between items-center mb-tiny">
            <h2>
                {{ 'Liste des modèles de termes de paiement' | trad }}<br />
            </h2>
            {{ arianeAnnuler() }}
        </div>

        <div id="listeModeleTp">
            <form name="filtre_listeModeleTp" method="post" id="filtre_listeModeleTp">
                <table class="table table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col" width="20%">{{ triTable('LIB_MODELE',  post.tri_LIB_MODELE, 'Nom du modèle' | trad, '', '', 'filtre_listeModeleTp') }}</th>
                            <th scope="col">{{ triTable('DESCRIPTIF',  post.tri_DESCRIPTIF, 'Descriptif' | trad, '', '', 'filtre_listeModeleTp') }}</th>
                            <th scope="col" width="10%">{{ 'Action' | trad }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="recherche">
                            <td>{{ filterTable('LIB_MODELE', post.filter_LIB_MODELE, '', 'listeModeleTp', '', 'filtre_listeModeleTp', '', '') }}</td>
                            <td>{{ filterTable('DESCRIPTIF', post.filter_DESCRIPTIF, '', 'listeModeleTp', '', 'filtre_listeModeleTp', '', '') }}</td>
                            <td></td>
                        </tr>
                        {% for modele in modeles %}
                            <tr id="modele_{{ modele.ID_MODELE }}" class="modele_{{ modele.ID_MODELE }}focus" >
                                <td style="width:350px;" class="toggleSlide" onclick="toggleSlide('{{ path('TermeDePaiement.TermeDePaiement.ligneModele',{MODULE, idModele : modele.ID_MODELE}) }}' , 'modele_{{ modele.ID_MODELE }}detail');">
                                    {{ shortLibelle(modele.LIB_MODELE, taille: 200, ajaxPopup: false) }}
                                </td>
                                <td>
                                    {{ shortLibelle(modele.DESCRIPTIF, taille: 200, ajaxPopup: false) }}
                                </td>
                                <td>
                                    <span class="chargerModele white-tooltip link-tooltip download_noir_v2" style="cursor: pointer;"
                                        {{ generateDataTooltips('top', 'Importer le modèle' | trad ) }}
                                        onclick="confirmerImportModele('{{ path('TermeDePaiement.TermeDePaiement.ajaxLoadModele', {MODULE, idModele: modele.ID_MODELE, id, critere}) }}');"
                                    ></span>
                                </td>
                            </tr>
                            <tr id="modele_{{ modele.ID_MODELE }}detail" class="detail_ligne hide_detail"></tr>
                        {% else %}
                            <tr>
                                <td class="text-center" colspan="2">{{ 'Aucun modèle trouvé' | trad }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <script>
        function confirmerImportModele(path) {
            activePopup(
                {{ 'Confirmation import modèle' | trad | json }},
                `<div class="modal-body bs-row flex-y-center">
                    <div class="icone-modal interrogation"></div>
                    <div class="bs-col p-base">
                        <span>
                            {{ "L’import du modèle va annuler et remplacer les termes de paiement existants." | trad }}
                        </span>
                        <br/>
                        <span>{{ "Souhaitez-vous poursuivre ?" | trad }}</span><br/><br/>
                        <span>{{ "À noter" | trad ~ colon() }}</span><br/>
                        <div class="bs-col p-base">
                            <span><i>{{ "Par défaut, les termes de paiement reprennent tous les postes." | trad }}</i></span><br/>
                            <span><i>{{ "Si une action de déclenchement manuelle est requise, vous en serez le responsable." | trad }}</i></span><br/>
                            <span><i>{{ "Vous pourrez modifier ces données en cliquant sur l’icône" | trad }}</i> <span style="font-weight: bold">🖉</span> <i>{{'(crayon)' | trad}}</i></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="button secondaire" 
                        data-dismiss="modal" 
                        onclick="desactivePopup();"
                    >{{ 'Annuler' | trad }}</button>
                    <a class="button principal" href="${path}">
                        {{ 'Confirmer' | trad }}
                    </a>
                </div>`,
                'modal_small'
            );
        }
    </script>
{% endblock %}