{% extends 'base.html.twig' %}
{% block body %}
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Utilisateurs");
        $(".bandeau-img img").attr("src","/assets/icons/icon_user.png");

        /* Datatable de tous les utilisateurs */
        var usersTable = $('#UsersTable').DataTable({
            columnDefs: [
                { 
                    width: '5%', targets: 4
                }],
            paging: false,
            /*scrollCollapse: true,
            scrollX: true,*/
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/users/ajax-list',
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            columns: [
                { data: 'userID' },
                { data: 'userPhoto' },
                { data: 'userPseudo' },
                { data: 'userNom' },
                { data: 'userPrenom' },
                { data: 'userFunction' },
                { data: 'userJob' },
                { data: 'userMail' },
                { data: 'userStartDate' },
                { data: 'userEndDate' },
                { data: 'userSalary' },
                { data: 'userBirthDate' },
                { data: 'userComments' }
            ]
        });

        usersTable.columns().flatten().each( function ( colIdx ) {
            // Create the select list and search operation
            var select = $('<select />')
                .appendTo(
                    usersTable.column(colIdx).footer()
                )
            .on( 'change', function () {
                usersTable
                    .column( colIdx )
                    .search( $(this).val() )
                    .draw();
            } );
    
            // Get the search data for the first column and add to the select list
            usersTable
                .column( colIdx )
                .cache( 'search' )
                .sort()
                .unique()
                .each( function ( d ) {
                    select.append( $('<option value="'+d+'">'+d+'</option>') );
                });
        });

    })
</script>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Utilisateurs                                 
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
                <div class="digi-card card-flush">
                    <div class="card-header align-items-center py-5 gap-2 gap-md-5">
                        <!--begin::Card toolbar-->
                        <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                            <!--begin::Add user-->
                            <a href="/user/add" class="btn btn-digi">
                                Ajouter un utilisateur
                            </a>
                            <!--end::Add user-->
                        </div>
                        <!--end::Card toolbar-->
                    </div>
                    <div class="card-body pt-0">
                        <!-- Users Datatable -->
                        <table id="UsersTable" class="dataTable hover stripe nowrap display" width="100%">
                            <thead style="">
                                <tr>
                                    <th>Identifiant</th>
                                    <th>Photo</th>
                                    <th>Nom affiché</th>
                                    <th>Nom</th>
                                    <th>Prénom</th>
                                    <th>Fonction</th>
                                    <th>Poste</th>
                                    <th>Mail</th>
                                    <th>Date d'embauche</th>
                                    <th>Date de fin</th>
                                    <th>Rémunération</th>
                                    <th>Date de naissance</th>
                                    <th>Commentaires postés</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
			</div>
		</div>
	</div>
</div>
<!--end::Row-->  
{% endblock %}