<head>
  <link
    href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.css"
    rel="stylesheet"
  />
</head>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.js"></script>
<script src="../../../../node_modules/flowbite//dist/flowbite.min.js"></script>

<body>
  <div class="container">
    <div class="row pt-5 pb-5">
      <div class="col-9">
        <img src="../assets/logoHooyberghs.jpg" alt="logoHooyberghs" />
      </div>
      <div class="col-2">
        <a (click)="add()">
          <button class="btn btn-primary" type="button">Nieuwe werf</button>
        </a>
      </div>
      <div *ngIf="auth.user$ | async as user" class="col-1">
        <img
          src="{{ user.picture }}"
          alt="profile picture"
          width="50px"
          class="rounded-full"
        />
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
      <ng-container *ngFor="let wharf of wharf$ | async">
        <div class="col">
          <div
            class="max-w-sm rounded overflow-hiddenx shadow-lg mb-5 hover:shadow-md hover:bg-gray-100"
          >
            <img
              class="w-full"
              src="../../../assets/realisatie_werf_card_picture.png"
              alt="Just a picture"
            />
            <div class="px-6 py-4">
              <div class="font-bold text-xl mb-2">{{ wharf.nameCode }}</div>
              <p class="text-gray-700 text-base">
                <b>Adres: </b><br />
                {{ wharf.streetName }} {{ wharf.streetNumber }} ,
                <ng-container *ngFor="let city of cities$ | async">
                  <div *ngIf="city.id == wharf.cityID">
                    {{ city.postalCode }} - {{ city.name }}
                  </div>
                </ng-container>
                <br />
                <b>StartDate: </b>{{ wharf.startDate | date : "dd/MM/yyyy" }}
                <br />
                <b>EndDate: </b>{{ wharf.endDate | date : "dd/MM/yyyy" }}
              </p>
            </div>

            <div class="px-6 pt-4 pb-4">
              <span
                class="inline-block bg-green-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2"
                *ngIf="
                  currentDate >= parseDate(wharf.startDate) &&
                  currentDate <= parseDate(wharf.endDate)
                "
                >Actief</span
              >

              <span
                class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2"
                *ngIf="currentDate < parseDate(wharf.startDate)"
                >Inactief</span
              >
              <span
                class="inline-block bg-yellow-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2"
                *ngIf="currentDate > parseDate(wharf.endDate)"
                >expired</span
              >
              <span></span>
              <span
                class="inline-block border-2 rounded-full px-3 py-1 mr-2 mb-2 text-sm hover:shadow-md hover:bg-gray-200"
                (click)="edit(wharf.id)"
                ><i class="fa-solid fa-gear"></i>
              </span>
              <span
                class="inline-block border-2 rounded-full px-10 py-1 mr-2 mb-2 text-sm hover:bg-blue-500"
                (click)="details(wharf.id)"
                ><i class="fa-solid fa-arrow-right"></i
              ></span>
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</body>
<app-footer class="sticky w-full bottom-0"></app-footer>
