{% if type == 'show' and programmation == 'non' %}
    <div class="form-check">
        <input class="form-check-input" disabled style="margin-top:0.6rem;" type="checkbox" {{ affectation and affectation.planifiable ? 'checked' : '' }}>
        <label class="form-check-label me-1 "  style="padding-top: 0.4rem;"> Planifiable</label>
    </div>
{% endif %}
<div class="d-flex">
    <div class="d-flex flex-column">
        {% if programmation == 'oui' %}
        <div class="form-check align-self-center" style="margin-left: 0.9rem;margin-bottom: 5px;">
            <input class="form-check-input" type="checkbox" value="OUI" id="planifiable-{{ type }}" {{ type == 'show' ? 'disabled' : 'name="planifiable"' }} style="margin-top:0.6rem;" {{ (type == 'show' and affectation and affectation.planifiable) or
                                                                                    (type != 'show' and hasNext and agent.nextAffectation.planifiable)
                                                                                    ? 'checked' : '' }}>
            <label class="form-check-label me-1 " for="planifiable-{{ type }}"  style="padding-top: 0.4rem;"> Planifiable</label>
        </div>
        {% else %}
        <div class="d-flex align-items-center" style="margin-right:2rem;margin-bottom: 5px;">
            <label class="me-1" style="width:117px">Date d'embauche</label>
            <input type="date"  style="width:128px"  data-disable-on-view="" name="date_embauche" {{ disabled }} class="form-control bg-grey input-date-custom" value="{{agent.dateEmbauche|date("Y-m-d")|default('') }}" form="form_agent_update">
        </div>
        <div class="d-flex align-items-center" style="margin-right:2rem;margin-bottom: 5px;">
            <label class="me-1" style="width:117px">Date d'affectation</label>
            <input type="date"  style="width:128px"  disabled class="form-control bg-grey input-date-custom" value="{{affectation ? affectation.debutEffet|date("Y-m-d") : '' }}">
        </div>
        {% endif %}
        <div class="d-flex align-items-center me-3 " style="margin-bottom: 5px;">
            <label style="width:{{ programmation == 'oui' ? '110px' :'116px;' }}" class="me-1 {{ classLabel|default('') }}">Type profil</label>
            {% if type == 'show' %}
                <input type="text"  style="width:171px" {{ disabled }} class="form-control" value="{{ affectation ? affectation.utilisateurProfil.libelle : '' }}">
            {% else %}
                <select name="type_profil" style="width:auto" class="form-control bg-grey" id="affectation_type_profil">
                    {% for profil in typesProfil %}
                        {% set selected =  (hasNext and agent.nextAffectation.utilisateurProfil.id == profil.id) ? 'selected' : '' %}
                        <option value="{{ profil.id }}" {{ selected }}>{{ profil.libelle }}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>
        {% if programmation == 'oui' %}
            {{ include('agent/_affectation_temps_travail.html.twig') }}
        {% endif %}
    </div>
    <div class="d-flex flex-column">
        {% if programmation == 'non' %}
            {{ include('agent/_affectation_temps_travail.html.twig') }}
        {% endif %}
        <div class="d-flex align-items-center">
            <label class="me-1 {{ classLabel|default('') }}" style="width: 107px">Groupe</label>
            {% if type == 'show' %}
                <input type="text" {{ disabled }} style="width: 227px" class="form-control" value="{{ agent.getNomResponsable }} ">
            {% else %}
                <select name="utilisateur_responsable" style="width:227px;" class="form-control bg-grey" id="affectation_responsable" required>
                    <option value="">Sélectionnez [...]</option>
                    {% for utilisateur in utilisateursResponsable %}
                        {% set selected =  (hasNext and agent.nextAffectation.getUtilisateurReponsable and agent.nextAffectation.getUtilisateurReponsable.id == utilisateur.id) ? 'selected' : '' %}
                        <option value="{{ utilisateur.id }} " data-idgestionnaire="{{ utilisateur.getActiveUtilisateurAffectation.getUtilisateurPlanning ? utilisateur.getActiveUtilisateurAffectation.getUtilisateurPlanning.id : ''  }}" {{ selected }}>{{ utilisateur.NomComplet}}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>
        <div class="  d-flex align-items-center">
            <label class="me-1 {{ classLabel|default('') }}" style="width: 108px" >Utilisateur<br> gestion planning</label>
            {% if type == 'show' %}
                <input type="text"  {{ disabled }} class="form-control" style="width: 227px;" value="{{ affectation ? affectation.getUtilisateurPlanningIdNom : '' }}">
                &nbsp;<i>{{ affectation ? (affectation.getUtilisateurPlanning
                ?  affectation.getUtilisateurPlanning.getPoleLibelle : '') : ''}}</i>
            {% else %}
                <select name="utilisateur_planning" style="width:227px;" class="form-control bg-grey" id="affectation_utilisateur_planning">
                    <option value="">Sélectionnez [...]</option>
                    {% for utilisateur in utilisateursPlanning %}
                        {% set selected =  (hasNext and agent.nextAffectation.getUtilisateurPlanning and  agent.nextAffectation.getUtilisateurPlanning.id == utilisateur.id) ? 'selected' : '' %}
                        <option value="{{ utilisateur.id }}" {{ selected }}>{{ utilisateur.id ~ ' - ' ~ utilisateur.NomComplet}}</option>
                    {% endfor %}
                </select>
            {% endif %}
        </div>
        {% if type=="edit" or (affectation and affectation.motifTempsPartiel) %}
            <div class=" d-flex align-items-center  {{ type=="edit" ? 'hide' : '' }}" id="affectation_div_motif" style="align-self: end">
                <label class="me-3 {{ classLabel|default('') }}">Motif</label>
                {% if type == 'show' %}
                    <input type="text"  {{ disabled }} class="form-control" style="width:auto;" value="{{ affectation.motifTempsPartiel.libelle }}">
                {% else %}
                    <select name="motif" style="width:227px;" class="form-control bg-grey" id="affectation_motif">
                        {% for motif in motifs %}
                            {% set selected =  (hasNext and agent.nextAffectation.motifTempsPartiel.id == motif.id) ? 'selected' : '' %}
                            <option value="{{ motif.id }}" {{ selected }}>{{ motif.libelle }}</option>
                        {% endfor %}
                    </select>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>