{# Détection du contexte : readonly ou validation #}
{% set is_readonly = is_readonly|default(false) %}

<div class="d-flex">
    <div class="d-flex flex-column position-relative {% if is_readonly %}w-100{% else %}me-3{% endif %}" style="{% if not is_readonly %}width: 972px{% endif %}">
        {% if not is_readonly and type != 'technique' %}
            {# Bouton ajouter pièce en mode validation #}
            <div class="d-flex" style="position: absolute;top:inherit;right:13px;">
                <i id="add_facture-piece" data-disable-on-view="" class="fa fa-lg fa-plus button-add custom-history bg-vert" style="position:relative;border-color: #14a085;-webkit-text-stroke: 1px #14a085;top:inherit;right:inherit"></i>
            </div>
        {% endif %}
        <div class="d-flex flex-column" style="{% if not is_readonly %}width: 972px{% endif %};">
            {% if is_readonly %}
                {# Mode readonly : Structure exacte comme demandé #}
                {# Ligne 1 : Tableau pièces + Tableau récap TVA à droite #}
                <div class="d-flex">
                    <div class="d-flex justify-content-between w-100">
                        <div style="min-height: 122px;max-height: 122px;overflow-y: auto;border: 1px solid #E0E0E0;width:802px;">
                            <table class="table table-responsive table-sm table-inverse-color-datagrid mb-0">
                                <thead align="center" style="vertical-align: middle!important;">
                                    <th>Référence</th>
                                    <th>Désignation</th>
                                    <th>P.U. HT</th>
                                    <th>Qté</th>
                                    <th>Total HT</th>
                                    <th>TVA</th>
                                    <th>Aff.</th>
                                </thead>
                                <tbody>
                                    {% set facture_lignes_pieces = [] %}
                                    {% for facture in intervention.factures %}
                                        {% for factureLigne in facture.getFactureLignes %}
                                            {% if factureLigne.getProduit and factureLigne.getProduit.getProduitType and factureLigne.getProduit.getProduitType.id == 1 %}
                                                {% set facture_lignes_pieces = facture_lignes_pieces|merge([factureLigne]) %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                    {% if facture_lignes_pieces|length > 0 %}
                                        {% for factureLigne in facture_lignes_pieces %}
                                            <tr class="{{ factureLigne.getProduitFactureAffectation and factureLigne.getProduitFactureAffectation.libelleCourt == 'S' ? 'bg-orange-input' : '' }}">
                                                <td class="text-center">{{ factureLigne.getProduit ? factureLigne.getProduit.code : '' }}</td>
                                                <td class="text-center">{{ factureLigne.getProduit ? factureLigne.getProduit.designation : factureLigne.designation }}</td>
                                                <td class="text-center">{{ factureLigne.getPuHt ? factureLigne.getPuHt|number_format(2, ',', ' ') ~ '€' : '' }}</td>
                                                <td class="text-center">{{ factureLigne.quantite ? factureLigne.quantite : '' }}</td>
                                                <td class="text-center">{{ factureLigne.getPrixTotalHt ? factureLigne.getPrixTotalHt|number_format(2, ',', ' ') ~ '€' : '' }}</td>
                                                <td class="text-center">{{ factureLigne.getTauxTva ? factureLigne.getTauxTva.taux ~ '%' : '' }}</td>
                                                <td class="text-center">{{ factureLigne.getProduitFactureAffectation ? factureLigne.getProduitFactureAffectation.libelleCourt : '' }}</td>
                                            </tr>
                                        {% endfor %}
                                        {% set emptyRows = 3 - facture_lignes_pieces|length %}
                                        {% if emptyRows > 0 %}
                                            {% for i in 1..emptyRows %}
                                                <tr style="height: 25px"><td colspan="9"></td></tr>
                                            {% endfor %}
                                        {% endif %}
                                    {% else %}
                                        <tr style="height: 25px"><td colspan="9"></td></tr>
                                        <tr style="height: 25px"><td colspan="9"></td></tr>
                                        <tr style="height: 25px"><td colspan="9"></td></tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                        <div style="margin-left: 8px;width:273px;margin-top:-5px;">
                            {# Bon de commande en haut à droite #}
                            <div class="d-flex align-items-center mb-1">
                                <label style="width:115px">Bon de commande</label>
                                <div class="d-flex align-items-start">
                                    <input type="text" disabled class="form-control bg-grey" style="width:120px;" value="{{ intervention.numBonCommande ? intervention.numBonCommande : '' }}">
                                    <button type="button" class="btn ms-2 d-flex align-items-center justify-content-center" style="width:28px;height:28px;padding:0;background:white;border:1px solid #0099FF;margin-top:0;" disabled>
                                        {{ source('@public_path'~asset('build/images/file-regular.svg')) }}
                                    </button>
                                </div>
                            </div>
                            <table class="table table-responsive table-sm table-inverse-color-datagrid mb-0" id="tab-recap-taux" style="overflow-y: auto;border: 1px solid #E0E0E0;">
                                <thead align="center" style="vertical-align: middle!important;"><th>Base HT</th><th>Taux</th><th>Montant</th></thead>
                                <tbody style="height: 75px">
                                    {% set tva_totaux = {} %}
                                    {# Calcul des totaux TVA pour les pièces #}
                                    {% for facture in intervention.factures %}
                                        {% for factureLigne in facture.getFactureLignes %}
                                            {% if factureLigne.getProduit and factureLigne.getProduit.getProduitType and factureLigne.getProduit.getProduitType.id == 1 %}
                                                {% if factureLigne.getProduitFactureAffectation and factureLigne.getProduitFactureAffectation.libelleCourt == 'F' %}
                                                    {% set tva = factureLigne.getTauxTva ? factureLigne.getTauxTva.taux : 0 %}
                                                    {% set tva_key = (tva ~ '_tva') %}
                                                    {% set montant = factureLigne.getPrixTotalHt ? factureLigne.getPrixTotalHt : 0 %}
                                                    {% set tva_totaux = tva_totaux|merge({ (tva_key): (tva_totaux[tva_key]|default(0) + montant) }) %}
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                    {# Ajout de la MO si elle existe #}
                                    {% if ligne_mo %}
                                        {% set tva = ligne_mo.getTauxTva ? ligne_mo.getTauxTva.taux : 0 %}
                                        {% set tva_key = (tva ~ '_tva') %}
                                        {% set montant = ligne_mo.getPrixTotalHt ? ligne_mo.getPrixTotalHt : 0 %}
                                        {% set tva_totaux = tva_totaux|merge({ (tva_key): (tva_totaux[tva_key]|default(0) + montant) }) %}
                                    {% endif %}
                                    {# Ajout du déplacement s'il existe #}
                                    {% if ligne_deplacement %}
                                        {% set tva = ligne_deplacement.getTauxTva ? ligne_deplacement.getTauxTva.taux : 0 %}
                                        {% set tva_key = (tva ~ '_tva') %}
                                        {% set montant = ligne_deplacement.getPrixTotalHt ? ligne_deplacement.getPrixTotalHt : 0 %}
                                        {% set tva_totaux = tva_totaux|merge({ (tva_key): (tva_totaux[tva_key]|default(0) + montant) }) %}
                                    {% endif %}
                                    {% if tva_totaux|length > 0 %}
                                        {% set nb_line = 0 %}
                                        {% for tva_key, montant in tva_totaux %}
                                            {% set taux = tva_key|replace({'_tva':''}) %}
                                            {% set nb_line = nb_line + 1 %}
                                            <tr>
                                                <td class="text-center">{{ montant|number_format(2, ',', ' ') }} €</td>
                                                <td class="text-center">{{ taux }}%</td>
                                                <td class="text-center">{{ ((montant * taux)/100)|number_format(2, ',', ' ') }}€</td>
                                            </tr>
                                        {% endfor %}
                                        {% set emptyRows = 3 - nb_line %}
                                        {% if emptyRows > 0 %}
                                            {% for i in 1..emptyRows %}
                                                <tr style="height: 25px"><td colspan="3"></td></tr>
                                            {% endfor %}
                                        {% endif %}
                                    {% else %}
                                        <tr style="height: 25px"><td colspan="3"></td></tr>
                                        <tr style="height: 25px"><td colspan="3"></td></tr>
                                        <tr style="height: 25px"><td colspan="3"></td></tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {# Tableau récap TVA à droite, collé au tableau principal #}
                </div>
                {# Ligne 2 : Sections Déplacement, Main d'œuvre et Pièces alignées horizontalement #}
                <div class="d-flex justify-content-between align-items-center">
                    <div class="d-flex flex-column">
                        <div class="titre-small color-orange">Déplacement</div>
                        <div class="d-flex">
                            <div class="d-flex align-items-center" style="margin-right: 30px;">
                                <label style="width: 33px;">Qté</label>
                                <input type="text" style="width:50px" disabled class="form-control bg-grey" value="{{ ligne_deplacement ? ligne_deplacement.quantite }}">
                            </div>
                            <div class="d-flex align-items-center">
                                <label style="width: 58px;">Prix HT</label>
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ ligne_deplacement and ligne_deplacement.getPrixTotalHt ? ligne_deplacement.getPrixTotalHt|number_format(2, ',', ' ') ~ '€' : '' }}">
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            <div class="d-flex align-items-center" style="margin-right: 30px;">
                                <label style="width: 33px;">TVA</label>
                                <input type="text" style="width:50px" disabled class="form-control bg-grey" value="{{ ligne_deplacement and ligne_deplacement.getTauxTva ? ligne_deplacement.getTauxTva.taux ~ '%' : '' }}">
                            </div>
                            <div class="d-flex align-items-center me-2">
                                <label style="width: 58px;">Prix TTC</label>
                                {% set deplacement_ttc = 0 %}
                                {% if ligne_deplacement %}
                                    {% set tva = ligne_deplacement.getTauxTva ? ligne_deplacement.getTauxTva.taux : 0 %}
                                    {% set montant = ligne_deplacement.getPrixTotalHt ? ligne_deplacement.getPrixTotalHt : 0 %}
                                    {% set deplacement_ttc = montant + (montant*tva)/100 %}
                                {% endif %}
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ deplacement_ttc|number_format(2, ',', ' ') }}€">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column">
                        <div class="titre-small color-orange">Main d'oeuvre</div>
                        <div class="d-flex">
                            <div class="d-flex align-items-center" style="margin-right: 30px;">
                                <label style="width: 33px;">Qté</label>
                                <input type="text" style="width:50px" disabled class="form-control bg-grey" value="{{ ligne_mo ? ligne_mo.quantite }}">
                            </div>
                            <div class="d-flex align-items-center">
                                <label style="width: 58px;">Prix HT</label>
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ ligne_mo and ligne_mo.getPrixTotalHt ? ligne_mo.getPrixTotalHt|number_format(2, ',', ' ') ~ '€' : '' }}">
                            </div>
                        </div>
                        <div class="d-flex mt-2">
                            <div class="d-flex align-items-center" style="margin-right: 30px;">
                                <label style="width: 33px;">TVA</label>
                                <input type="text" style="width:50px" disabled class="form-control bg-grey" value="{{ ligne_mo and ligne_mo.getTauxTva ? ligne_mo.getTauxTva.taux ~ '%' : '' }}">
                            </div>
                            <div class="d-flex align-items-center">
                                <label style="width: 58px;">Prix TTC</label>
                                {% set mo_ttc = 0 %}
                                {% if ligne_mo %}
                                    {% set tva = ligne_mo.getTauxTva ? ligne_mo.getTauxTva.taux : 0 %}
                                    {% set montant = ligne_mo.getPrixTotalHt ? ligne_mo.getPrixTotalHt : 0 %}
                                    {% set mo_ttc = montant + (montant*tva)/100 %}
                                {% endif %}
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ mo_ttc|number_format(2, ',', ' ') }}€">
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-column">
                        <div class="titre-small color-orange">Pièces</div>
                        <div class="d-flex">
                            <div class="d-flex align-items-center" style="margin-right: 20px;">
                                <label style="width: 68px;">Total HT</label>
                                {% set total_ht_pieces = 0 %}
                                {% for facture in intervention.factures %}
                                    {% for factureLigne in facture.getFactureLignes %}
                                        {% if factureLigne.getProduit and factureLigne.getProduit.getProduitType and factureLigne.getProduit.getProduitType.id == 1 %}
                                            {% set total_ht_pieces = total_ht_pieces + (factureLigne.getPrixTotalHt ? factureLigne.getPrixTotalHt : 0) %}
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ total_ht_pieces|number_format(2, ',', ' ') }}€">
                            </div>
                            <div class="d-flex align-items-center" style="margin-right: 20px;">
                                <label style="width: 76px;">Total TVA</label>
                                {% set total_tva_pieces = 0 %}
                                {% for facture in intervention.factures %}
                                    {% for factureLigne in facture.getFactureLignes %}
                                        {% if factureLigne.getProduit and factureLigne.getProduit.getProduitType and factureLigne.getProduit.getProduitType.id == 1 %}
                                            {% set tva = factureLigne.getTauxTva ? factureLigne.getTauxTva.taux : 0 %}
                                            {% set montant = factureLigne.getPrixTotalHt ? factureLigne.getPrixTotalHt : 0 %}
                                            {% set total_tva_pieces = total_tva_pieces + (montant * tva)/100 %}
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ total_tva_pieces|number_format(2, ',', ' ') }}€">
                            </div>
                            <div class="d-flex align-items-center">
                                <label style="width: 75px;">Total TTC</label>
                                {% set total_ttc_pieces = total_ht_pieces + total_tva_pieces %}
                                <input type="text" style="width:80px" disabled class="form-control bg-grey" value="{{ total_ttc_pieces|number_format(2, ',', ' ') }}€">
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                {# Mode validation : Grid DevExtreme #}
                <div
                    class="grid"
                    data-style="tab"
                    style="width:972px;min-height: 122px;max-height: 122px;overflow-y: auto"
                    id="intervention-grid-facturation"
                    data-columns="{{ facturationGrid.columns|json_encode() }}"
                    data-getpath="{{ facturationGrid.get_path is defined ? facturationGrid.get_path : '' }}"
                    data-createpath="{{ facturationGrid.create_path is defined ? facturationGrid.create_path : '' }}"
                    data-editing="{{ type != 'technique' and facturationGrid.editing is defined ? facturationGrid.editing|json_encode() : '{}' }}"
                    data-deletepath="{{ facturationGrid.delete_path is defined ? facturationGrid.delete_path : '' }}"
                    data-patchpath="{{ facturationGrid.patch_path is defined ? facturationGrid.patch_path : '' }}"
                    data-searchpanel='{"visible":false}'
                    data-pagination='{"visible":false}'
                    data-rowclass="function(item) { return item.affectation === 'S' ? 'bg-orange-input' : ''; }"
                    data-tooltip-field="motif_service"
                    data-toolbarinvisible="true"
                ></div>
            {% endif %}
        </div>
        {% if not is_readonly %}
            {# Mode validation : Tableau récap TVA et tableau paiement côte à côte #}
            <div class="d-flex mt-1">
                <div>
                    <table class="table table-responsive table-sm table-inverse-color-datagrid mb-0" id="tab-recap-taux" style="width: 230px;overflow-y: auto;border: 1px solid #E0E0E0;">
                        <thead align="center" style="vertical-align: middle!important;"><th>Base HT</th><th>Taux</th><th>Montant</th></thead>
                        <tbody style="height: 75px">
                            <tr style="height: 25px"><td colspan="3"></td></tr>
                            <tr style="height: 25px"><td colspan="3"></td></tr>
                            <tr style="height: 25px"><td colspan="3"></td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="ms-auto" style="width:570px;overflow-y: auto">
                    <table class="table table-responsive table-bordered table-sm table-inverse-color-datagrid mb-0" style="width: 570px">
                        <thead align="center" style="vertical-align: middle!important;">
                            <th>Date</th>
                            <th>Montant</th>
                            <th>Date prévue enc.</th>
                            <th>Mode paiement</th>
                            <th>Date enc.</th>
                            <th>Perçu</th>
                        </thead>
                        <tbody style="height: 75px;">
                            {% set nb_line = 0 %}
                            {% if liste_paiement|length > 0 %}
                                {% for paiement in liste_paiement %}
                                    {% set nb_line = nb_line + 1 %}
                                    <tr style="height: 25px">
                                        <td>{{ paiement.date|date('d/m/Y') }}</td>
                                        <td>{{ paiement.montantTtc }}€</td>
                                        <td>{{ paiement.datePrevisionnelle ? paiement.datePrevisionnelle|date('d/m/Y') : '' }}</td>
                                        <td>{{ paiement.moyenPaiement ? paiement.moyenPaiement.libelleCourt : '' }}</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                {% endfor %}
                                {% set emptyRows = 3 - nb_line %}
                                {% if emptyRows > 0 %}
                                    {% for i in 1..emptyRows %}
                                        <tr style="height: 25px"><td colspan="6"></td></tr>
                                    {% endfor %}
                                {% endif %}
                            {% else %}
                                <tr style="height: 25px"><td colspan="6"></td></tr>
                                <tr style="height: 25px"><td colspan="6"></td></tr>
                                <tr style="height: 25px"><td colspan="6"></td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        {% endif %}
    </div>
    {% if not is_readonly %}
        {# Mode validation : Sections Déplacement, Main d'œuvre et Pièces à droite #}
        <div class="flex-grow-1">
            <div class="d-flex">
                <div class="d-flex flex-column" style="margin-right:30px;">
                    <div class="titre-small color-orange">Déplacement</div>
                    <div class="d-flex">
                        <div class="d-flex align-items-center" style="margin-right: 30px;">
                            <label style="width: 33px;">Qté</label>
                            <input type="text" style="width:50px" disabled class="form-control" value="{{ ligne_deplacement ? ligne_deplacement.quantite }}">
                        </div>
                        <div class="d-flex align-items-center">
                            <label style="width: 58px;">Prix HT</label>
                            <input type="text" style="width:80px" disabled class="form-control" value="{{ ligne_deplacement ? (ligne_deplacement.getPrixTotalHt ? ligne_deplacement.getPrixTotalHt|number_format(2, ',', ' ') ~ '€' : '') }}">
                        </div>
                    </div>
                    <div class="d-flex mt-2">
                        <div class="d-flex align-items-center" style="margin-right: 30px;">
                            <label style="width: 33px;">TVA</label>
                            <select name="deplacement_tva" style="width:50px" id="deplacement-tva" {{ type == 'technique' ? 'disabled'}} data-group="deplacement" form="form_validation_intervention" class="form-control tva-select">
                                <option value=""></option>
                                {% for taux in tauxTva %}
                                    {% set selected = (ligne_deplacement and ligne_deplacement.getTauxTva ? ligne_deplacement.getTauxTva.id == taux.id) ? 'selected' : '' %}
                                    <option value="{{ taux.id }}" {{ selected }}>{{ taux.taux }}%</option>
                                {% endfor %}
                            </select>
                            <input type="hidden" id="deplacement-prix-ht" value="{{ ligne_deplacement ? ligne_deplacement.getPrixTotalHt : '' }}">
                        </div>
                        <div class="d-flex align-items-center me-2">
                            <label style="width: 58px;">Prix TTC</label>
                            <input type="text" style="width:80px" disabled class="form-control" id="deplacement-intervention-prix-ttc" value="">
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column ms-auto">
                    <div class="titre-small color-orange">Main d'oeuvre</div>
                    <div class="d-flex">
                        <div class="d-flex align-items-center" style="margin-right: 30px;">
                            <label style="width: 33px;">Qté</label>
                            <input type="text" style="width:50px" disabled class="form-control" value="{{ ligne_mo ? ligne_mo.quantite }}">
                        </div>
                        <div class="d-flex align-items-center">
                            <label style="width: 58px;">Prix HT</label>
                            <input type="text" style="width:80px" disabled class="form-control" value="{{ ligne_mo ? (ligne_mo.getPrixTotalHt ? ligne_mo.getPrixTotalHt|number_format(2, ',', ' ') ~ '€' : '') }}">
                        </div>
                    </div>
                    <div class="d-flex mt-2">
                        <div class="d-flex align-items-center" style="margin-right: 30px;">
                            <label style="width: 33px;">TVA</label>
                            <select name="mo_tva" style="width:50px" form="form_validation_intervention" {{ type == 'technique' ? 'disabled'}} class="form-control tva-select" id="mo-tva" data-group="mo">
                                <option value=""></option>
                                {% for taux in tauxTva %}
                                    {% set selected = (ligne_mo and ligne_mo.getTauxTva ? ligne_mo.getTauxTva.id == taux.id) ? 'selected' : '' %}
                                    <option value="{{ taux.id }}" {{ selected }}>{{ taux.taux }}%</option>
                                {% endfor %}
                            </select>
                            <input type="hidden" id="mo-prix-ht" value="{{ ligne_mo ? ligne_mo.getPrixTotalHt : '' }}">
                        </div>
                        <div class="d-flex align-items-center">
                            <label style="width: 58px;">Prix TTC</label>
                            <input type="text" style="width:80px" disabled class="form-control" id="mo-intervention-prix-ttc" value="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-2">
                <div class="titre-small color-orange">Pièces</div>
                <div class="d-flex justify-content-between">
                    <div class="d-flex align-items-center">
                        <label style="width: 68px;">Total HT</label>
                        <input type="text" style="width:80px" disabled class="form-control" id="total-ht-pieces" value="">
                    </div>
                    <div class="d-flex align-items-center">
                        <label style="width: 76px;">Total TVA</label>
                        <input type="text" style="width:80px" disabled class="form-control" id="total-recap-tab-tva" value="">
                    </div>
                    <div class="d-flex align-items-center">
                        <label style="width: 75px;">Total TTC</label>
                        <input type="text" style="width:80px" disabled class="form-control" id="total-ttc-pieces" value="">
                    </div>
                </div>
            </div>
            {# Mode validation : Espacement et totaux avec IDs pour JS #}
            <div class="my-1" style="height: 19.5px"></div>
            <div class="d-flex justify-content-between">
                <div class="d-flex align-items-center">
                    <label style="width:68px;">Total HT</label>
                    <input type="text" style="width:80px" disabled class="form-control" id="montant-ht-recap" value="">
                </div>
                <div class="d-flex align-items-center">
                    <label style="width: 76px;">Total TVA</label>
                    <input type="text" style="width:80px" id="montant-tva-recap" disabled class="form-control" value="">
                </div>
                <div class="d-flex align-items-center">
                    <label style="width: 75px;">Total TTC</label>
                    <input type="text" style="width:80px" id="montant-ttc-recap" disabled class="form-control" value="">
                </div>
            </div>
            <div class="d-flex justify-content-between mt-2">
                <div class="d-flex align-items-center">
                    <label style="width:68px;">Total perçu</label>
                    <input type="text" style="width:80px" {{ type == 'technique' ? 'disabled'}} class="form-control" id="montant-paiement" value="{{ total_paiement }}€">
                </div>
                <div class="d-flex align-items-center">
                    <label style="width: 76px;">Restant dû</label>
                    <input type="text" style="width:80px" {{ type == 'technique' ? 'disabled'}} class="form-control" id="montant-du" value="">
                </div>
                <div class="d-flex align-items-center">
                    <label style="width: 75px;">Ecart</label>
                    <input type="text" style="width:80px" disabled id="montant-ecart" class="form-control" value="">
                </div>
            </div>
        </div>
    {% endif %}
    </div>
</div>