<app-sidebar></app-sidebar>
<div class="p-4 sm:ml-64">
  <div class="container">
    <div class="card mt-2">
      <div class="card-body">
        <h4 class="card-title">Debiet (m³ per tijd)</h4>
        <canvas
          baseChart
          [data]="salesData"
          [type]="'line'"
          [options]="chartOptions"
        >
        </canvas>
      </div>
      <h1 class="text-3xl">Debiet</h1>

      <table class="table mb-5">
        <thead class="thead-dark">
          <tr>
            <th scope="col">id</th>
            <th scope="col">Tijd</th>
            <th scope="col">Waarde</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let flowrate of flowrate$ | async">
            <tr>
              <td>
                {{ flowrate.id }}
              </td>
              <td>
                {{ flowrate.timestamp | date : "MMMM d,  h:mm " }}
              </td>
              <td>
                {{ flowrate.value }}
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </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>
  </div>
</div>
