{% extends 'base.html.twig' %}

{% block title %}Hello CompanyController!{% endblock %}

{% block body %}
<!--script src="https://cdn.datatables.net/1.13.7/js/dataTables.semanticui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js"></script-->
</script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Utilisateurs");
        $(".bandeau-img img").attr("src","/assets/icons/icon_user.png");

        /* Datatable de tous les utilisateurs */
        $('#UsersTable').DataTable({
            columnDefs: [
                { 
                    width: '5%', targets: 4
                }],
            fixedColumns: true,
            paging: false,
            scrollCollapse: true,
            scrollX: true,
            responsive: true,
            ajax: {
                type: 'GET',
                url: '/users/ajax-list',
                dataSrc: 'data',
                dataType: 'json',
            },
            ordering: true,
            paging: false,
            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' }
            ]
        });

    })
</script>
<div class="container-page">
    <div class="btn-group" role="group">
        <a class="btn-glossy" href="/user/add" role="button">Ajouter un utilisateur</a>
    </div>
    <br>
    <!-- Your grid container -->
    <table id="UsersTable" class="table hover stripe nowrap" width="100%">
        <thead>
            <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>  
{% endblock %}