{% if affectation and affectation.finEffet %}
    <div class="d-flex align-items-start justify-content-end h-100">
        <button class="btn bg-vert-vert w-100 " style="width: 193px !important;margin-right: 0.6rem;"
                data-popup-id="popup-programmer-changement"
                data-poppup-container="body"
                style="width:138px;margin-bottom: 7px"
                data-disable-on-view=""
                data-dxpopup=""
                data-popup-position-at="top"
                data-popup-offset ="0 275"
                data-popup-title="Programmer un changement"
                data-popup-width="1390px">
                Programmer un changement
        </button>
        <div class="d-flex flex-column align-self-end justify-content-center border-left-white h-100" style="width:232px;padding-right: 3.5rem;padding-left: 0.5rem;gap:0.5rem;margin-bottom: 4px;">
            <span class="color-white text-center" style="padding: 0 6px;">l'affectation actuelle prendra fin le {{ affectation.finEffet|date("d/m/Y") }}</span>
            <button class="btn bg-rouge-rouge w-100" data-confirm="1" data-ajax="1" data-target-html="#result-prog-quitter" data-disable-on-view="" data-message="Etes vous sur de vouloir annuler le départ?" data-href="{{ path('agent_cancel_depart', {id: affectation.id}) }}">Annuler le départ</button>
        </div>
    </div>
{% else %}
    <div class="d-flex  {{ agent.getNextAffectation ? 'align-items-start justify-content-end' : 'flex-column align-items-center' }} h-100 " style="gap:0.5rem;">
    {% if not agent.getNextAffectation %}
    <button class="btn bg-vert-vert w-100" style="width: 193px !important;"
            data-popup-id="popup-programmer-changement"
            data-poppup-container="body"
            data-popup-position-at="top"
            data-popup-offset ="0 275"
            style="width:138px;margin-bottom: 7px"
            data-disable-on-view=""
            data-dxpopup=""
            data-popup-title="Programmer un changement"
            data-popup-width="1390px">
            Programmer un changement
    </button>
    {% endif %}
    {%  if affectation  %}
        <button class="btn bg-rouge-rouge w-100"
                style="width:193px !important"
                data-popup-id="popup-quitter-entreprise"
                data-poppup-container="body"
                data-popup-position-at="top"
                data-popup-offset ="0 275"
                data-dxpopup=""
                data-disable-on-view=""
                data-popup-title="Quitter l'entreprise"
                data-popup-width="auto">
           Quitter l'entreprise
        </button>
    {% endif %}
    {% if  agent.getNextAffectation %}
        <div class="d-flex flex-column align-self-end justify-content-center border-left-white h-100" style="width:232px;padding-right: 3.5rem;padding-left: 0.5rem;gap:0.5rem;margin-bottom: 4px;">
            <span class="color-white text-center" style="padding: 0 6px;">changement programmé prévu le {{ agent.getNextAffectation.DebutEffet|date("d/m/Y") }} </span>
            <button class="btn bg-vert-vert w-100"  data-popup-id="popup-programmer-changement"  data-disable-on-view="" data-poppup-container="body" style="width:138px;margin-bottom: 7px" data-dxpopup="" data-popup-title="Programmer un changement"   data-popup-width="1390px" >Afficher le changement</button>
        </div>
    {% endif %}
    </div>
{% endif %}
<div id="popup-programmer-changement" style="display:none" data-turbo ="false" >
    <form ></form>
    {{ include('agent/_popup_prog_affectation.html.twig') }}
</div>