<table mat-table [dataSource]="prets"  class="w-64 whitespace-nowrap">

            <!-- Prêt Column -->
           <div *ngIf="pretsInfosConducteur" class="flex items-center text-gray-600">
             <ng-container matColumnDef="Conducteur">
               <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Conducteur </th>
               <td mat-cell *matCellDef="let pretInfosConducteur" class="p-4 text-left">
                 {{ pretInfosConducteur.Prenom }} {{ pretInfosConducteur.Nom }}
               </td>
              </ng-container>
            </div>



            <!-- Description Column -->
            <ng-container matColumnDef="Nom">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Nom </th>
              <td mat-cell *matCellDef="let pretInfosConducteur" class="p-4 text-left">
                {{ pretInfosConducteur.Nom }}
              </td>
            </ng-container>

            <!-- Montant Column -->
            <ng-container matColumnDef="DateDebut">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> DateDebut </th>
              <td mat-cell *matCellDef="let pret" class="p-4 text-left">
                {{ pret.DateDebut }}
              </td>
            </ng-container>

            <!-- Date Column -->
            <ng-container matColumnDef="DateFin">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> DateFin </th>
              <td mat-cell *matCellDef="let pret" class="p-4 text-left">
                {{ pret.DateFin }}
              </td>
            </ng-container>

            <!-- Statut Column -->
            <ng-container matColumnDef="Statut">

              <th mat-header-cell *matHeaderCellDef class="p-4 text-left ">Statut</th>
              <td mat-cell *matCellDef="let pret" class="p-4 text-left">
                <div class="badge badge-secondary badge-outline"> {{ pret.Statut }}</div>
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="pretsDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: pretsDisplayedColumns;"></tr>

          </table>

          <!-- Pagination -->
          <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons
                         aria-label="Select page of prets" class="mt-4">
          </mat-paginator>
        </div>
    </div>
    <div class="mb-10">
      <h2 class="text-3xl font-medium">Liste des trajets du véhicule</h2>
      <hr class="my-5"/>
      <div class="min-w-full break-words bg-white my-5 shadow rounded-lg p-4 divide-y divide-gray-200">
        <div class="min-h-screen overflow-y-scroll">
          <table mat-table [dataSource]="trajets" class="w-64 whitespace-nowrap">

            <!-- Trajet Column -->
            <ng-container matColumnDef="Adresse_Depart" >
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Adresse de départ </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left"> {{ trajet.Adresse_Depart }}</td>
            </ng-container>

            <!-- Description Column -->
            <ng-container matColumnDef="Adresse_Arrivee">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Adresse d'arrivée </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Adresse_Arrivee }}
              </td>
            </ng-container>

            <ng-container matColumnDef="Km_depart">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Km de départ </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Km_depart }}
              </td>
            </ng-container>

            <!-- Montant Column -->
            <ng-container matColumnDef="Km_arrivee">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Km d'arrivée </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Km_arrivee }}
              </td>
            </ng-container>

            <ng-container matColumnDef="Prix_carburant">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Prix du carburant </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Prix_carburant }}
              </td>
            </ng-container>

            <ng-container matColumnDef="type_carburant">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> type de carburant </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.type_carburant }}
              </td>
            </ng-container>

            <ng-container matColumnDef="Statut">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left ">Statut</th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                <div class="badge badge-secondary badge-outline"> {{ trajet.Statut }}</div>
              </td>
            </ng-container>



            <!-- Date Column -->
            <ng-container matColumnDef="Date_depart">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Date </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Date_depart }}
              </td>
            </ng-container>

            <ng-container matColumnDef="Date_arrivee">
              <th mat-header-cell *matHeaderCellDef class="p-4 text-left"> Date d'arrivée </th>
              <td mat-cell *matCellDef="let trajet" class="p-4 text-left">
                {{ trajet.Date_arrivee }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="trajetsDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: trajetsDisplayedColumns;"></tr>

          </table>

          <!-- Pagination -->
          <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons
                         aria-label="Select page of trajets" class="mt-4">
          </mat-paginator>
        </div>
      </div>
</div>