<section class="form-default">
    <div>
        {{ inputAdvance('SELECT', {
            titre: 'Action' | trad,
            name: 'CONTMEMO',
            listeValue: 
                {
                    '': '',
                    'form-to-comptable': 'Écrire au comptable',
                    'form-dem-avoir': 'Demander un avoir au fournisseur',
                } | merge(user.canCreateAvenant ? {
                    'form-modif-commande': 'Modifier la commande',
                } : {}),
            obligatoire: true,
            inputAttr: {
                onchange: "tabShow('#'+this.value)",
            },
        }) }}
    </div>
    <div class="tab-content">

{#______________________________________________________________________________
    Tab - écrire au comptable #}

<form id="form-to-comptable" method="POST" class="tab-pane"
	action="{{ path('GlobalApplication.Incidents.mailToComptable', {incidId: incidId}) }}"
	onsubmit="return ajaxSubmit(event)"
	data-onsuccess="pageRefresh"
    role="tabpanel" aria-labelledby="form-to-comptable"
>
    {{ inputAdvance('TEXTAREA', {
        titre: 'Message' | trad,
        name : 'message',
        pathValidator: path('Ajax.validator.isStringAvecEspace'),
        paramsValidator: {sizeMin: 1, sizeMax: 3000},
        obligatoire: true,
    }) }}
    <div class="text-right">
        <button type="submit" class="button principal">
            {{- 'Envoyer' | trad -}}
        </button>
    </div>
</form>

{#______________________________________________________________________________
    Tab - Modifier la commande #}

<article id="form-modif-commande" class="tab-pane"
    role="tabpanel" aria-labelledby="form-modif-commande"
>
    <div class="text-right">
        <a class="button principal" href="javascript:{{ ajaxPopup(
                strBuild(
                    'Créer un avenant sur la commande N°@1@' | trad,
                    [incident.NO_CDE]
                ),
                'Commande.GestionCommande.popupCreateAvenant',
                {idCommande: incident.NO_CDE}
            ) | e('html_attr') }}" 
        >{{ 'Modifier la commande' | trad }}</a>
    </div>
</article>

{#______________________________________________________________________________
    Tab - Demander un avoir au fournisseur #}

<form id="form-dem-avoir" method="POST" class="tab-pane"
	action="{{ path('GlobalApplication.Incidents.litigeDemandeAvoir', {incidId: incidId}) }}"
	onsubmit="return ajaxSubmit(event)"
	data-onsuccess="pageRefresh"
    role="tabpanel" aria-labelledby="form-dem-avoir"
>
    {{ inputAdvance('TEXTAREA', {
        titre: 'Cause' | trad,
        name : 'cause',
        pathValidator: path('Ajax.validator.isStringAvecEspace'),
        paramsValidator: {sizeMin: 1, sizeMax: 3000},
        obligatoire: true,
    }) }}
    <div class="text-right">
        <button type="submit" class="button principal">
            {{ 'Envoyer' | trad }}
        </button>
    </div>
</form>

{#____________________________________________________________________________#}
    </div{# class="tab-content"> #}>
</section>
<script>
function tabShow(selector) {
    const el = document.querySelector(selector);
    for (child of el.closest('.tab-content').children) {
        child.classList.remove('active');
    }
    el.classList.add('active');
}
</script>