{# Ajout fichier base.html.twig #}
{% extends 'base.html.twig'%}

{# Titre de la page #}
{% block title %}
    Lista de casas
{% endblock %}

{% block head %}
    <!-- Script JS et CSs pour afficher le tableau (DataTables) -->
    <link href="{{ asset("vendor/datatables/dataTables.bootstrap4.min.css") }}" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/v/bs4/jq-3.7.0/dt-1.13.8/b-2.4.2/sp-2.2.0/datatables.js"></script>
{% endblock %}

{# Corps de la page #}
{% block body %}

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Lista de casas</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                {# Definiton des colonnes du tableau #}
                <thead>
                    <tr>
                        <th>ID</th>{# Colonne ID #}
                        <th>Nome</th>{# Colonne Nom Format #}
                        <th>Matricula</th>{# Colonne Cliniques Autorisés #}
                        <th>Marca</th>
                        <th>Utilisadores do camiao</th>
                    </tr>
                </thead>
                
                {# Association des données de la base de donnée avec les colonnes du tableau #}
                <tbody>
                    {# Parcoure les formats #}
                    {% for truck in trucks %}
                    <tr>    
                        <td>{{ truck.id }}</td>{# Colonne ID Format #}
                    
                        <td>{{ truck.truckName }}</td>{# Colonne Nombre FormatsAutorisés #}
                        <td>{{ truck.truckPlate }}</td>{# Colonne Nombre FormatsAutorisés #}
                        <td>{{ truck.truckBrand }}</td>{# Colonne Nombre FormatsAutorisés #}
                        <td>{% for user in truck.users %} {{ user.username }}  {% endfor %} </td>{# Colonne Nombre FormatsAutorisés #}
                    </tr> 
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
    
{% endblock %}


    {# Block Script Javascript de la page #}
    {% block script %}
        <!-- Script Javascript du tableau (DataTables) -->
        <script src="{{ asset("vendor/datatables/jquery.dataTables.min.js") }}"></script>
        <script src="{{ asset("vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>


        <!-- Script pour filter les données du tableau -->
        <script>
            //initialisation le tableau
            $(document).ready(function () {
            var table = $('#dataTable').DataTable({
                // Filtrer choix nombre ligne par page du tableau
                lengthMenu: [[10,25,50,-1],[10,25,50,"Tout"]],
                //Langue du tableau (Francais)
                language:{
                    url:'//cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json',
                }
            })
                table.draw();
            });

        </script>
    {% endblock %}