<body>
  <div class="container p-5">
    <h1
      class="flex items-center text-5xl font-extrabold dark:text-white sm:mb-9"
    >
      <a (click)="overzicht()">
        <img src="../../../../assets/logoHooyberghs.jpg" alt="logoHooyberhs" />
      </a>
    </h1>
    <ol
      class="flex items-center w-full p-4 space-x-2 text-sm font-medium text-center sm:mb-6 text-gray-500 bg-white border-b border-gray-500 sm:text-base sm:p-4 sm:space-x-4"
    >
      <li class="flex items-center text-blue-600">
        <span
          class="flex items-center justify-center w-5 h-5 mr-2 text-xs border border-blue-600 rounded-full shrink-0 dark:border-blue-500"
        >
          1
        </span>
        Werf <span class="hidden sm:inline-flex sm:ml-2">Info</span>
        <svg
          aria-hidden="true"
          class="w-4 h-4 ml-2 sm:ml-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 5l7 7-7 7M5 5l7 7-7 7"
          ></path>
        </svg>
      </li>
      <li class="flex items-center text-blue-600">
        <span
          class="flex items-center justify-center w-5 h-5 mr-2 text-xs border border-gray-500 rounded-full shrink-0 dark:border-gray-400"
        >
          2
        </span>
        Pompen/Sensoren
        <span class="hidden sm:inline-flex sm:ml-2">Toevoegen</span>
        <svg
          aria-hidden="true"
          class="w-4 h-4 ml-2 sm:ml-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 5l7 7-7 7M5 5l7 7-7 7"
          ></path>
        </svg>
      </li>
      <li class="flex items-center text-blue-600">
        <span
          class="flex items-center justify-center w-5 h-5 mr-2 text-xs border border-gray-500 rounded-full shrink-0 dark:border-gray-400"
        >
          3
        </span>
        Pompen/Sensoren
        <span class="hidden sm:inline-flex sm:ml-2">Toevoegen</span>
        <svg
          aria-hidden="true"
          class="w-4 h-4 ml-2 sm:ml-4"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 5l7 7-7 7M5 5l7 7-7 7"
          ></path>
        </svg>
      </li>
      <li class="flex items-center text-blue-600">
        <span
          class="flex items-center justify-center w-5 h-5 mr-2 text-xs border border-gray-500 rounded-full shrink-0 dark:border-gray-400"
        >
          4
        </span>
        Afronden
      </li>
    </ol>

    <div class="relative overflow-x-auto">
      <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">Value</th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              WharfCode
            </th>
            <td class="px-6 py-4">{{ wharf.nameCode }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Street
            </th>
            <td class="px-6 py-4">{{ wharf.streetName }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Number
            </th>
            <td class="px-6 py-4">{{ wharf.streetNumber }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              City
            </th>
            <td class="px-6 py-4">
              <ng-container *ngFor="let city of cities$ | async">
                <div *ngIf="city.id == wharf.cityID">
                  {{ city.postalCode }} - {{ city.name }}
                </div>
              </ng-container>
            </td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Pumps
            </th>
            <td class="px-6 py-4">{{ wharf.pumps }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Sensors
            </th>
            <td class="px-6 py-4">{{ wharf.sensors }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Startdate
            </th>
            <td class="px-6 py-4">{{ wharf.startDate }}</td>
          </tr>

          <tr class="bg-white border-b">
            <th
              scope="row"
              class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
            >
              Enddate
            </th>
            <td class="px-6 py-4">{{ wharf.endDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <button
      class="mt-4 bg-gray-50 hover:bg-gray-300 border-2 border-gray-300 hover:border-gray-500 text-gray-500 font-bold py-2 px-3 mr-2 rounded focus:outline-none focus:shadow-outline"
      type="submit"
      (click)="back()"
    >
      &#8592;
    </button>
    <button
      class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="submit"
      (click)="next()"
    >
      Volgende
    </button>
  </div>
</body>
