{{ form_start(form, {
        'attr': {
            'class': 'form-ajax',
        }
    }) }}
 <div class="row mb-4">
     <div class="col">
         <div class="row mb-3">{{ form_row(form.type) }}</div>
         <div class="row mb-3">{{ form_row(form.nom) }}</div>

         <div class="row">
             <div class="col">
                 <div style="position:relative">
                     <ul class="collection" id="collection-tel" style="padding-right: 4rem;margin-bottom: 1rem;" data-index="{{ form.clientTels|length > 0 ? form.clientTels|last.vars.name + 1 : 0 }}" data-prototype="{{ form_widget(form.clientTels.vars.prototype)|e('html_attr') }}">
                         <li style="position: relative;"><div id="client_clientTels_0">
                                 <div class="form-group">
                                     <input type="text" id="client_clientTels_0_numero" name="client[clientTels][0][numero]" required="required" class="form-control form-control-sm">
                                 </div>
                             </div><a class="add_item_link"><i class="fa fa-trash del-icon" style="bottom: 7px;right: 8px;top:inherit;position:absolute"></i></a>
                         </li>
                     </ul>
                     <a class="add_item_link" data-collection-holder-id="collection-tel"><i class="fa fa-plus add-icon" style="right: 23px;"></i></a>
                 </div>
             </div>
             <div class="col">
                 <div style="position:relative">
                     <ul class="collection" id="collection-email" style="padding-right: 4rem;margin-bottom: 1rem;" data-index="{{ form.clientMails|length > 0 ? form.clientMails|last.vars.name + 1 : 0 }}" data-prototype="{{ form_widget(form.clientMails.vars.prototype)|e('html_attr') }}">
                         <li style="position: relative;">
                             <div id="client_clientMails_0"><div class="form-group">
                                     <input type="text" id="client_clientMails_0_email" name="client[clientMails][0][email]" required="required" class="form-control form-control-sm">
                                 </div>
                             </div><a class="add_item_link"><i class="fa fa-trash del-icon" style="bottom: 7px;right: 8px;top:inherit;position:absolute"></i></a>
                         </li>
                     </ul>
                     <a class="add_item_link" data-collection-holder-id="collection-email"><i class="fa fa-plus add-icon" style="right: 23px;"></i></a>
                 </div>
             </div>
         </div>
     </div>
     <div class="col">
         <div class="d-flex">
             <div  class="me-2" style="width:30px;"> {{ source('@public_path'~asset('build/images/picto-adresse.svg')) }}</div>
             {{ form_row(form.adresse) }}
         </div>
     </div>

 </div>
 <div class="form-group d-flex justify-content-center mt-4">
     <div class="form-actions-row">
         <a  class="btn btn-primary me-3 " data-popup-id="popup-add-equipement" style="color: white;" data-dxpopup="" data-popup-title="Ajouter un équipement" data-popup-width="auto"><i class="fa fa-plus me-3"></i>Ajouter un équipement</a>
         <button  class="btn btn-success me-3 " type="submit">Enregistrer</button>
         <button  class="btn btn-danger btn-close-popupadd"  type="button" >Annuler</button>
     </div>
 </div>
 {{ form_end(form, {render_rest: false}) }}


 <div id="popup-add-equipement" style="display:none" >
     <div id="body-add-equipement">
         <form class="form-ajax" action="" style="font-size: 1rem;">
             <div class="input-group form-group mb-2">
                 <span class="form-check-inline">L'utilisateur de l'équipement est-il le souscripteur ?</span>
                 <div class="form-check form-check-inline">
                     <input class="form-check-input" type="radio" name="souscripteur" id="inlineRadio1" value="oui">
                     <label class="form-check-label" for="inlineRadio1">OUI</label>
                 </div>
                 <div class="form-check form-check-inline">
                     <input class="form-check-input" type="radio" name="souscripteur" id="inlineRadio2" value="non">
                     <label class="form-check-label" for="inlineRadio2">NON</label>
                 </div>
             </div>
             <div class="d-flex justify-content-between" style="border: 1px solid #2c3e50; ">
                 <div class="ms-2" style="width: 64%">
                     <div class="text-end py-2"><b>LOCALISATION EQUIPEMENT</b></div>
                     <div class="d-flex mb-3">
                         <div  class="me-2" style="width:30px;"> {{ source('@public_path'~asset('build/images/picto-adresse.svg')) }}</div>
                         <div class="input-group form-group">
                             <label class="me-2 pt-1 form-label control-label required" for="client_nom">Adresse équipement:</label>
                             <input type="text" id="equipement_adresse" name="equipement_adresse" required="required" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-between mb-3">
                         <div class="input-group form-group me-2">
                             <label class="me-2 form-label control-label" for="equipement_batiment">Bâtiment</label>
                             <input type="text" id="equipement_batiment" name="equipement_batiment"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-2">
                             <label class="me-2 form-label control-label" for="equipement_escalier">Escalier</label>
                             <input type="text" id="equipement_escalier" name="equipement_escalier" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-2">
                             <label class="me-2 form-label control-label " for="equipement_etage">Etage</label>
                             <input type="text" id="equipement_etage" name="equipement_etage" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-2">
                             <label class="me-2 form-label control-label" for="equipement_porte">Porte</label>
                             <input type="text" id="equipement_porte" name="equipement_porte" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group">
                             <label class="me-2 form-label control-label" for="equipement_digicode">Digicode</label>
                             <input type="text" id="equipement_digicode" name="equipement_digicode" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-around mb-3">
                         <div class="input-group form-group me-2">
                             <label class="me-2 form-label control-label" for="equipement_secteur">Secteur</label>
                             <input type="text" id="equipement_secteur" name="equipement_secteur" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group">
                             <label class="me-2 form-label control-label" for="equipement_agent_principal">Agent principal</label>
                             <input type="text" id="equipement_agent_principal" name="equipement_agent_principal" class="form-control-sm form-control">
                         </div>
                     </div>
                 </div>
                 <div style="width: 35%">
                     <div class="px-2 py-2 bg-white w-100 h-100">
                         <iframe
                                 width="100%"
                                 height="170"
                                 style="border:0"
                                 frameborder="0"
                                 loading="lazy"
                                 allowfullscreen
                                 src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBEVoPVdYJBdZTyWO0WZzStpIA29hFbhQU&q=14 bis rue chevalier de la barre, 91330 yerres">
                         </iframe>
                     </div>
                 </div>
             </div>
             <div class="d-flex justify-content-between mt-2">
                 <div class="p-2 w-50 me-2" style="background-color:#f05b41; color: white">
                     <div class="text-center fw-600">EQUIPEMENT</div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_famille">Famille</label>
                             <input type="text" id="equipement_famille" name="equipement_famille"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_type">Type</label>
                             <input type="text" id="equipement_type" name="equipement_type" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-between mb-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_num_int">N° série intérieur</label>
                             <input type="text" id="equipement_num_int" name="equipement_num_int"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_num_ext">N° série extérieur</label>
                             <input type="text" id="equipement_num_ext" name="equipement_num_ext" class="form-control-sm form-control">
                         </div>
                     </div>
                 </div>
                 <div class="p-2 bg-primary w-50" style="color:white">
                     <div class="text-center fw-600">CONTRAT</div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_type">Type</label>
                             <input type="text" id="contrat_type" name="contrat_type"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_date_souscription">Date souscription</label>
                             <input type="text" id="contrat_date_souscription" name="contrat_date_souscription" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_logement_sup_2">Logement > 2 ans</label>
                             <input type="text" id="contrat_logement_sup_2" name="contrat_logement_sup_2"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_categorie">Catégorie</label>
                             <input type="text" id="contrat_categorie" name="contrat_categorie" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_tarif">Tarif Contrat</label>
                             <input type="text" id="contrat_categorie" name="contrat_tarif" class="form-control-sm form-control">
                         </div>
                     </div>
                 </div>
             </div>
             <div class="d-flex justify-content-between mt-2">
                 <div class="p-2 w-50 me-2" style="background-color:#f05b41; color: white">
                     <div class="text-center fw-600">EQUIPEMENT</div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_famille">Famille</label>
                             <input type="text" id="equipement_famille" name="equipement_famille"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_type">Type</label>
                             <input type="text" id="equipement_type" name="equipement_type" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_num_int">N° série intérieur</label>
                             <input type="text" id="equipement_num_int" name="equipement_num_int"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="equipement_num_ext">N° série extérieur</label>
                             <input type="text" id="equipement_num_ext" name="equipement_num_ext" class="form-control-sm form-control">
                         </div>
                     </div>
                 </div>
                 <div class="p-2 w-50 bg-primary" style="color:white">
                     <div class="text-center fw-600">CONTRAT</div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_type">Type</label>
                             <input type="text" id="contrat_type" name="contrat_type"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_date_souscription">Date souscription</label>
                             <input type="text" id="contrat_date_souscription" name="contrat_date_souscription" class="form-control-sm form-control">
                         </div>
                     </div>
                     <div class="d-flex justify-content-between my-2">
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_logement_sup_2">Logement > 2 ans</label>
                             <input type="text" id="contrat_logement_sup_2" name="contrat_logement_sup_2"  class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_categorie">Catégorie</label>
                             <input type="text" id="contrat_categorie" name="contrat_categorie" class="form-control-sm form-control">
                         </div>
                         <div class="input-group form-group me-4">
                             <label class="me-2 white form-label control-label" for="contrat_tarif">Tarif Contrat</label>
                             <input type="text" id="contrat_categorie" name="contrat_tarif" class="form-control-sm form-control">
                         </div>
                     </div>
                 </div>
             </div>
             <div class="form-group d-flex justify-content-center mt-4">
                 <div class="form-actions-row">
                     <button  id="btn-submit-popupadd" class="btn btn-success me-3 " type="submit">Valider</button>
                     <button  class="btn btn-danger btn-close-popup"  data-dxpopup-id="popup-add-equipement" type="button" >Annuler</button>
                 </div>
             </div>
         </form>
     </div>
 </div>