{{ form_start(form) }}
    <div>
        {{ form_errors(form) }}
    </div>

    {{ form_row(form.nom) }} </br />
    <div class="input-group mb-3">
        {{ form_widget(form.respons) }}
        <span class="input-group-text" id="basic-addon1" style="background-color:#D32F2F;color:#FFF;cursor:pointer;" title="Rechercher" data-bs-toggle="modal" data-bs-target="#usersManager"><i class="bi bi-search"></i></span>
    </div><br />

     <div class="input-group mb-3">
        {{ form_widget(form.icone) }}
        <span class="input-group-text" id="basic-addon1" style="background-color:#D32F2F;color:#FFF;cursor:pointer;" title="Rechercher" data-bs-toggle="modal" data-bs-target="#iconManager"><i class="bi bi-search"></i></span>
    </div><br />

    <hr />
    <section class="d-flex justify-content-between">
        <a href="/pole?page={{page}}&pageSize={{pageSize}}&filtre={{filtre}}" class="btn btn-secondary"><i class="bi bi-x-lg"></i> Annuler</a>
        <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> Enregistrer</button>
    </section>
{{ form_end(form) }}
<br/>
<br/>

{# ===================================================================
## == Bloc de recherche des utilisateurs
## ===================================================================
#}
<div class="modal fade" id="usersManager" tabindex="-1" aria-labelledby="exampleModalLabel01" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
        <div class="modal-content container"> 
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel01">Recherche utilisateur</h5>
                <button type="button" id="closeUsersManagerModal" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div> 
            <div class="modal-body">
                <div class="d-flex justify-content-end w-100">
                    <div class="mb-3" style="width:350px;">
                        <div class="input-group mb-3">
                            <input type="text"class="form-control" id="searchUser" placeholder="filtre" >
                            <button class="input-group-text" style="background-color:#2962FF;color:#FFF;cursor:pointer;" title="Rechercher" onclick="rechercerUsers()"><i class="bi bi-search"></i></button>
                        </div>                        
                    </div>
                </div>
                <hr />
                <div class="d-flex justify-content-center align-items-center">
                    <span style="margin-right:8px;"><i class="bi bi-exclamation-triangle"></i> </span>
                    <small><strong><i>Seuls les quinze premiers résultats sont affichés. Veuillez affiner votre recherche, si vous ne trouvez pas la personne souhaitée.</i></strong></small>
                </div>
                <hr /><br/>
                <div id="usersContainer" class="row"></div>
            </div>       
        </div>        
    </div>
</div>   

{# ===================================================================
## == Bloc de recherche d'icon
## ===================================================================
#}
<div class="modal fade" id="iconManager" tabindex="-1" aria-labelledby="exampleModalLabel02" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
        <div class="modal-content eplo-container"> 
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel02">Choix d'icon</h5>
                <button type="button" id="closeIconManagerModal" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div> 
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8 col-sm-12 mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="iconChoice" id="bootstrap-icon" value="bootstrap" onchange="filtreIcon();" checked>
                            <label class="form-check-label" for="bootstrap-icon">Bootstrap</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="iconChoice" id="fa_brand" value="fa_brand" onchange="filtreIcon();">
                            <label class="form-check-label" for="fa_brand">Fontawesome Brands</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="iconChoice" id="fa_regular" value="fa_regular"  onchange="filtreIcon();">
                            <label class="form-check-label" for="fa_regular">Fontawesome Regular</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="iconChoice" id="fa_solid" value="fa_solid" onchange="filtreIcon();">
                            <label class="form-check-label" for="fa_solid">Fontawesome Solid</label>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12 mb-3">
                        <input type="text"class="form-control" id="searchIcon" placeholder="filtre" onkeyup="filtreIcon()" >
                    </div>
                </div>
                <hr />
                <div id="iconContainer"></div>
            </div>       
        </div>        
    </div>
</div>