<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<app-sidebar></app-sidebar>
<div class="p-4 sm:ml-64">

  <br />
  <div class="rounded p-4 mb-4 text-lg bg-red-200 text-red-800 border-2 border-red-300" *ngIf="errorMessage">
      {{errorMessage}}
  </div>

  <div class="container">

    <div class="relative 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-6 py-3">Type</th>
            <th scope="col" class="px-6 py-3">Locatie</th>
            <th scope="col" class="px-6 py-3">Batterij %</th>
            <th scope="col" class="px-6 py-3">
              <div class="grid grid-cols-12">
                <div class="col-span-5">Status</div>
                <div class="col-span-3 text-gray-500"
                  data-bs-toggle="modal"
                  data-bs-target="#infoStatus">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
                  </svg>
                </div>
              </div>
            </th>
            <th scope="col" class="px-6 py-3">Pomp gelinkt aan</th>
            <th scope="col" class="px-6 py-3">Uit-/aanzetten (admin only)</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let pump of pumpWithStatus$ | async">
            <tr
              *ngIf="wharfId == pump.wharfID"
              class="bg-white border-b hover:bg-gray-500"
            >
              <td class="px-6 py-3">
                Pomp {{ pump.id }}
              </td>
              <td class="px-6 py-3">
                {{ pump.gridPos }}
              </td>
              <td class="px-6 py-3"></td>
              <td id={{pump.id}}{{pump.gridPos}} class="px-6 py-3">Correct</td>
              <td class="px-6 py-3"></td>
              <td class="px-6 py-3">
                <label
                  class="flex items-center relative w-max cursor-pointer select-none"
                >
                  <input
                    (click)="toggleOnAndOffSwitchPump(pump.id, $event, pump.gridPos)"
                    type="checkbox"
                    class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full bg-red-500"
                    [checked]="pump.isOn"
                  />
                  <span
                    class="absolute font-medium text-xs uppercase right-1 text-white"
                  >
                    OFF
                  </span>
                  <span
                    class="absolute font-medium text-xs uppercase right-8 text-white"
                  >
                    ON
                  </span>
                  <span
                    class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200"
                  ></span>
                </label>
              </td>
            </tr>
          </ng-container>
          <ng-container *ngFor="let sensor of sensorWithStatus$ | async">
            <tr
              *ngIf="wharfId == sensor.wharfID"
              class="bg-white border-b hover:bg-gray-500"
            >
              <td class="px-6 py-3">Sensor {{ sensor.id }}</td>
              <td class="px-6 py-3">
                {{ sensor.gridPos }}
              </td>
              <td class="px-6 py-3">
                {{ sensor.batteryPercentage }}
              </td>
              <td id={{sensor.id}}{{sensor.gridPos}} class="px-6 py-3">Correct</td>
              <td class="px-6 py-3">"linked aan"</td>
              <td class="px-6 py-3">
                <label
                  class="flex items-center relative w-max cursor-pointer select-none"
                >
                  <input
                    (click)="toggleOnAndOffSwitchSensor(sensor.id, $event, sensor.gridPos)"
                    type="checkbox"
                    class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full bg-red-500"
                    [checked]="sensor.isOn"
                  />
                  <span
                    class="absolute font-medium text-xs uppercase right-1 text-white"
                  >
                    OFF
                  </span>
                  <span
                    class="absolute font-medium text-xs uppercase right-8 text-white"
                  >
                    ON
                  </span>
                  <span
                    class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-gray-200"
                  ></span>
                </label>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </div>
  </div>
</div>



<!-- -------------------Info pop up------------------- -->
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="infoStatus" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-modal="true" role="dialog">
  <div class="modal-dialog modal-dialog-centered relative w-auto pointer-events-none">
    <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
      <div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
        <button type="button"
          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
          data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" class="px-6 py-3">Status</th>
            <th scope="col" class="px-6 py-3">Betekenis</th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <td>Pending</td>
            <td>Er wordt nagekeken of de gegeven status toegepast wordt op de werf.</td>
          </tr>
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <td>Correct</td>
            <td>De werf heeft dezelfe status als de status zichtbaar in de applicatie.</td>
          </tr>
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
            <td>Error</td>
            <td>De status op de werf en in de applicatie zijn niet hetzelfde.</td>
          </tr>
        </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>
