{% set utilisateurSites = app.user.getUtilisateurSites %}
<div class="d-flex my-3 ">
    {% if utilisateurSites|length > 1 %}
        <div>
            <div class="d-flex align-items-center me-4">
                <label style="width:40px;" class="me-1">Site </label>
                <select name="site" style="width:auto"  data-formchanged="no" class="form-control bg-grey"  required form="{{ form_nouveau_client }}">
                    {% for utilisateurSite in utilisateurSites %}
                        <option value="{{ utilisateurSite.site.id }}">{{ utilisateurSite.site.nom }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    {% else %}
        <input name="site" type="hidden" value="{{ utilisateurSites[0].getSite.id }}" form="{{ form_nouveau_client }}" >
    {% endif %}
    <div class="d-flex align-items-center me-5">
        <label class="me-2 " style="width: 57px">Type</label>
        <select name="type_client" id="{{ id_type_client }}"  data-formchanged="no" style="width: 150px !important;flex: 0 1 auto;" class="form-control" form="{{ form_nouveau_client }}"
                onchange="if ($(this).val() == '1') {$('.{{ class_infos_entreprise }}').hide();$('.{{ class_infos_client }}').css('display','flex');} else {
                        $('.{{ class_infos_entreprise }}').css('display','flex');$('.{{ class_infos_client }}').hide();}"
        >
            {% for type in typesClient %}
                <option {{ loop.index == 1 ? 'selected' : '' }} value="{{ type.id }}">{{ type.libelle }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="d-flex ms-auto align-items-center border-vert px-1 mt-1" style="height: 38px;border-radius: 18px">
        <span class="me-3 color-grey-dark span_creer_client">Créer ce nouveau client</span>
        <label class="switch">
            <input type="checkbox"  data-formchanged="no"  name="input_creer_client" class="input_creer_client" disabled form="{{ form_nouveau_client }}">
            <span class="slider round" ></span>
        </label>
    </div>
</div>
<div class="d-flex my-3justify-content-between">
    <div class="{{ class_infos_entreprise }} me-5" style="display: none;">
        <div class="d-flex align-items-center">
            <label class="me-2 col-form-label control-label">Catégorie</label>
            <select name="categorie_pro"  data-formchanged="no" class="form-control" style="width: 150px !important;flex: 0 1 auto;" form="{{ form_nouveau_client }}">
                <option value="" selected></option>
                {% for categorie_p in categoriesPro %}
                    <option value="{{ categorie_p.id }}">{{ categorie_p.libelle }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class=" {{ class_infos_entreprise }} " style="display: none;">
        <div class="d-flex align-items-center">
            <label class="me-2" for="client_entreprise">Nom entreprise</label>
            <input type="text"  data-formchanged="no" id="{{ id_client_nom_entreprise }}" name="client_entreprise" class="form-control bg-white" style="width:155px" form="{{ form_nouveau_client }}">
        </div>
    </div>
    <div class="col-2 w-auto me-5 {{ class_infos_client }}">
        <div class="d-flex align-items-center">
            <label class="me-2 " style="width: 59px">Civilité</label>
            <select name="etat_civil"  data-formchanged="no" class="form-control" style="width: 90px !important;flex: 0 1 auto;" form="{{ form_nouveau_client }}">
                {% for civilite in civilites %}
                    <option value="{{ civilite.id }}">{{ civilite.libelleCourt }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="me-5 {{ class_infos_client }}">
        <div class="d-flex align-items-center">
            <label class="me-2 " >Nom</label>
            <input type="text"  data-formchanged="no" name="client_nom" id="{{ id_client_nom }}"  class="form-control bg-white" value="" form="{{ form_nouveau_client }}">
        </div>
    </div>
    <div class="me-5 {{ class_infos_client }}">
        <div class="d-flex align-items-center">
            <label class="me-2 " for="agent_prenom">Prénom</label>
            <input type="text"  data-formchanged="no" name="client_prenom" class="form-control bg-white" value="" form="{{ form_nouveau_client }}">
        </div>
    </div>
    <div class="ms-auto {{ class_infos_client }}">
        <div class="d-flex align-items-center ">
            <label class="me-2 col-form-label control-label" >Email</label>
            <input type="text"  data-formchanged="no" name="email" class="form-control bg-white" value="" form="{{ form_nouveau_client }}" style="width:321px">
        </div>
    </div>
</div>
<div class="border-top-grey-dark mt-3 opacity-40"></div>
<div class="d-flex mt-2">
    <div class="d-flex align-items-center mt-2">
        <label class="me-2" style="width:288px">Recherche d'un client existant par son N°Client</label>
        <input type="text"  data-formchanged="no" name="numero_client"   pattern="[0-9]{2} [0-9]{2} [0-9]{5}" class="form-control bg-white" value=""  style="width:inherit" form="{{ form_nouveau_client }}">
    </div>
    <div class="d-flex ms-auto align-items-center border-vert px-1 mt-1" style="height: 38px;border-radius: 18px">
        <span class="me-3 color-grey-dark span_affecter_equipement">Affecter l'équipement au client sélectionné  ci-dessous</span>
        <label class="switch">
            <input  name="input_affecter_equipement" class="input_affecter_equipement" type="checkbox"  data-formchanged="no" disabled form="{{ form_nouveau_client }}">
            <span class="slider round"></span>
        </label>
    </div>
</div>
<div class="result-souscripteur-client mt-2" ></div>