{% extends 'layout-front.html.twig' %}

{% block extendsstylesheet %}
<link href="/public/assets/vendor/datatables-bs5/css/dataTables.bootstrap5.css" rel="stylesheet">
<link href="/public/assets/vendor/datatables-bs5/css/buttons.bootstrap5.css" rel="stylesheet">
{% endblock %}	

{% block content %}
	<div class="rubrique-header">
		<div class="sub-title">
			<h2>Echanger</h2>
			<div class="title">
				<h1>Annuaire</h1>
				<div class="puce"></div>
			</div>
		</div>
	</div>
	<div class="row">
		
		<div class="hpanel">
            <div class="panel-heading">
                <div class="input-group mb-3">
                <input type="text" id="search_query" name="search_query" class="form-control" placeholder="Rechercher par nom, pénom, structure, profession, secteur d’activité..."/> 
                
                <button class="btn btn-blue" type="button" id="search_submit"><i class="fa-solid fa-magnifying-glass"></i></button>
                <button class="btn btn-blue-c cancel-search" id="search_reset"><i class="fa fa-xmark"></i></button>
                </div>
            </div>
            <div class="panel-body">   
                <div class="row user-list">
                    <div class="col-sm-12">
                        <table id="userList" class="table table-hover dataTables_wrapper" width="100%">
                            <thead>
                                <tr class="dtEntete">                                                    
                                    <th class="text-center">Prénom</th>
                                    <th class="text-center">Nom</th>  
                                    <th class="text-center">Structure</th>        
                                    <th class="text-center">Profession</th>
									<th class="text-center"></th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>                
            </div>
        </div>

	</div>

{% endblock %}

{% block extendsjavascript %}
<!-- BaseLayout : DataTables -->
     <script src="/public/assets/vendor/datatables-bs5/js/dataTables.js"></script>
    <script src="/public/assets/vendor/datatables-bs5/js/dataTables.bootstrap5.js"></script>
    <script src="/public/assets/vendor/datatables-bs5/js/dataTables.buttons.js"></script>
	<script src="/public/assets/vendor/datatables-bs5/js/buttons.bootstrap5.js"></script>
    <script src="/public/assets/vendor/datatables-bs5/lang/french.js"></script>

<script src="{{ assets('js/user/UserList.js') }}"></script>
 <script>        
        _UserList.loggedUserCrypt = "{{loggedUser.crypt}}";
        _UserList.initUserDtList('userList', {'modal': 1, 'filter': 1, 'entete': 1, 'search': 1, 'pagination': 1, 'orderable': true, "admin": false, 'pageLength': 25, 'stateSave': 1});
    </script>
{% endblock %}