<body>
  <app-sidebar></app-sidebar>
  <div class="p-4 sm:ml-64">
    <div class="container">
      <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table class="w-full text-sm text-left text-gray-500">
          <thead class="text-xs text-gray-700 uppercase bg-gray-100">
            <tr>
              <th scope="col" class="px-4 py-3">tijd</th>
              <th scope="col" class="px-4 py-3">type</th>
              <th scope="col" class="px-4 py-3">beschrijving</th>
            </tr>
          </thead>
          <tbody>
            <ng-container *ngFor="let log of log$ | async">
              <tr
                class="bg-white border-b hover:bg-gray-800"
                *ngIf="wharfId == log.wharfID"
              >

                <td class="px-4 py-3">

                  {{ log.timestamp }}
                </td>
                <td class="px-4 py-3">"type"</td>
                <td class="px-4 py-3">{{ log.description }}</td>
                <!-- <td class="px-6 py-4">{{ log. }}</td> -->
              </tr>
            </ng-container>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
    crossorigin="anonymous"
  ></script>
</body>
