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

    {{ form_row(form.libelle) }} </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>
    {{ form_row(form.code) }}
    {{ form_row(form.lien) }} </br />
    {{ form_row(form.position) }} </br />
    <div>
        <span>{{ form_widget(form.visibility) }}</span>
        <small>{{ form_label(form.visibility) }}</small>
    </div>
    <br />

    <hr />
    <section class="d-flex justify-content-between">
        <a href="/menu/liste/{{ groupeUID }}" 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 d'icon
## ===================================================================
#}
<div class="modal fade" id="iconManager" tabindex="-1" aria-labelledby="exampleModalLabel01" 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="exampleModalLabel01">Choix d'icon</h5>
                <button type="button" 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>