<section>
  <div class="max-w-full overflow-y-auto">
    <div class="mb-4">
      <p-floatlabel variant="in">
        <input id="search" pSize="small" [formControl]="searchInput" pInputText fluid />
        <label for="search">Search...</label>
      </p-floatlabel>
    </div>

    <div class="mt-8 flex justify-between items-center gap-4">
      <div class="flex flex-col">
        <div class="flex items-center gap-2">
          <h1 class="font-semibold tracking-tight text-xl">Selected</h1>
          <span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-blue-100/85"> {{
            selectedPlaces.length }}</span>
        </div>
        <span class="text-xs text-gray-500">Here are your selected place{{ selectedPlaces.length > 1 ? 's' : ''
          }}</span>
      </div>

      <p-button [icon]="showSelectedPlaces ? 'pi pi-chevron-up' : 'pi pi-chevron-down'" text
        (click)="showSelectedPlaces = !showSelectedPlaces" />
    </div>
    @if (showSelectedPlaces) {
    @for (p of selectedPlaces; track p.id) {
    <div
      class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
      (click)="togglePlace(p)">
      <img [src]="p.image || p.category.image" class="w-12 rounded-full object-fit">

      <div class="flex flex-col gap-1 truncate">
        <h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
        <span class="text-xs text-gray-500 truncate">{{ p.place }}</span>

        <div class="flex gap-0.5">
          @if (p.allowdog) {
          <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
          } @else {
          <span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
          }

          @if (p.visited) {
          <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
              class="pi pi-eye text-xs"></i></span>
          } @else {
          <span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
              class="pi pi-eye-slash text-xs"></i></span>
          }

          <span
            class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
              class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
        </div>
      </div>
    </div>
    }
    }

    <div class="mt-8 mb-16">
      <h1 class="font-semibold tracking-tight text-xl">List</h1>
      <span class="text-xs text-gray-500">Available points</span>
      @defer {

      @for (p of displayedPlaces; track p.id) {
      <div
        class="mt-4 flex items-center gap-4 hover:bg-gray-50 rounded-xl cursor-pointer py-2 px-4 dark:hover:bg-gray-800"
        [class.font-bold]="selectedPlacesID.includes(p.id)" (click)="togglePlace(p)">
        <div class="flex flex-col gap-1 truncate">
          <h1 class="tracking-tight truncate dark:text-surface-300">{{ p.name }}</h1>
          <span class="text-xs text-gray-500 truncate">{{ p.place }}</span>

          <div class="flex gap-0.5">
            @if (p.allowdog) {
            <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85">🐶</span>
            } @else {
            <span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85">🐶</span>
            }

            @if (p.visited) {
            <span class="bg-green-100 text-green-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-green-100/85"><i
                class="pi pi-eye text-xs"></i></span>
            } @else {
            <span class="bg-red-100 text-red-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-red-100/85"><i
                class="pi pi-eye-slash text-xs"></i></span>
            }

            <span
              class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center truncate dark:bg-blue-100/85"><i
                class="pi pi-box text-xs"></i>{{ p.category.name }}</span>
          </div>
        </div>
      </div>
      } @empty {
      <div class="text-center">
        <h1 class="tracking-tight">Nothing to see</h1>
      </div>
      }

      <div class="z-50 absolute w-full bg-white shadow p-4 bottom-0 left-0 text-center dark:bg-surface-900">
        <p-button (click)="closeDialog()" label="Confirm" severity="secondary" />
      </div>
      } @placeholder (minimum 0.4s) {
      <div class="my-2">
        <p-skeleton height="4rem" />
      </div>
      }
    </div>
  </div>
</section>