<div class="max-w-7xl mx-auto px-4 md:px-0 m-4">
  <div class="p-4 flex justify-between items-center">
    <div>
      <img src="favicon.png" (click)="gotoMap()" class="cursor-pointer w-24" />
    </div>
    <div class="flex gap-2">
      <div class="relative">
        <p-button icon="pi pi-bell" (click)="toggleInvitations()" text />
        @if(hasPendingInvitations) {<div class="absolute top-1 right-2 size-2 bg-red-400 rounded-full"></div>}
      </div>
      <p-button icon="pi pi-plus" (click)="addTrip()" text />
    </div>
  </div>

  <div class="mt-10 grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    @defer {
    @for (trip of trips; track trip.id) {
    <div class="group relative rounded-lg overflow-hidden shadow-lg cursor-pointer" [class.grayscale]="trip.archived"
      (click)="viewTrip(trip.id)">
      <img class="rounded-lg object-cover transform transition-transform duration-300 ease-in-out group-hover:scale-105"
        [src]="trip.image || 'cover.webp'" />

      <div class="absolute inset-0 bg-black/5 flex flex-col justify-end p-4 text-white">
        <h3 class="text-lg font-semibold line-clamp-2">{{ trip.name }}</h3>

        <div class="flex items-center gap-2 text-sm">
          <p>{{ trip.days || 0 }} {{ trip.days > 1 ? 'days' : 'day'}}</p>
          @if (trip.collaborators.length) {- <p>{{ trip.collaborators.length + 1 }} user{{ trip.collaborators.length > 0
            ? 's'
            : '' }}</p>}
        </div>

        <i
          class="pi pi-arrow-right text-xl absolute right-4 bottom-4 h-4 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300"></i>
      </div>
    </div>
    } @empty {
    <div class="px-4 mx-auto max-w-screen-xl mt-8 col-span-full">
      <div class="py-8 px-4 flex flex-col items-center gap-1">
        <h2 class="mb-0 text-4xl text-center tracking-tight font-extrabold text-gray-900 dark:text-gray-200">
          No Trip.
        </h2>

        <p class="mt-4 font-light text-gray-500 sm:text-xl">
          Add <i>Trip</i> to start organizing !
        </p>

        <p-button styleClass="mt-4" label="Create" icon="pi pi-plus" (click)="addTrip()" text />
      </div>
    </div>
    }
    } @placeholder (minimum 0.4s) {
    @for (_ of [1,2,3]; track _) {
    <div>
      <p-skeleton height="12rem" />
    </div>
    }
    }
  </div>
</div>

<p-dialog header="Invitations" [draggable]="false" [dismissableMask]="true" [modal]="true"
  [(visible)]="invitationsDialogVisible" styleClass="w-[95%] md:w-[40%] lg:w-[30%]">
  <section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
    <div class="divide-y divide-gray-100">
      @for (inv of invitations; track inv.id) {
      <div class="flex items-center justify-between gap-x-6 py-5">
        <div class="flex items-center min-w-0 gap-x-4">
          <img [src]="inv.image" class="w-20 rounded-full object-cover">

          <div class="flex flex-col min-w-0 gap-1">
            <div class="capitalize truncate text-md font-semibold text-gray-900">{{ inv.name }}</div>
            <div class="text-xs md:text-sm text-gray-500">On <i>{{ inv.invited_at | date: 'short'}}</i>, <i>{{
                inv.invited_by
                }}</i> invited you to collaborate </div>

            <div class="flex justify-center md:hidden gap-4">
              <p-button text (click)="acceptInvitation(inv.id)" icon="pi pi-check" severity="success" />
              <p-button text (click)="declineInvitation(inv.id)" icon="pi pi-times" severity="danger" />
            </div>
          </div>
        </div>

        <div class="hidden md:flex gap-4">
          <p-button text (click)="acceptInvitation(inv.id)" icon="pi pi-check" severity="success" />
          <p-button text (click)="declineInvitation(inv.id)" icon="pi pi-times" severity="danger" />
        </div>
      </div>
      } @empty {
      <div class="text-center">
        No invitation
      </div>
      }
    </div>
  </section>
</p-dialog>