<section class="mt-4">
  <div class="p-4 print:p-0 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <p-button text icon="pi pi-chevron-left" class="print:hidden" (click)="back()" severity="secondary" />
      <div class="flex flex-col max-w-[55vw] md:max-w-full">
        <h1 class="font-medium tracking-tight text-2xl truncate">{{ trip?.name }}</h1>
        <div class="mt-1 flex items-center">
          <span
            class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded min-w-fit dark:bg-gray-400">{{
            trip?.days?.length }} {{ trip?.days!.length > 1 ? 'days' :
            'day'}}</span>
          <span
            class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded min-w-fit dark:bg-gray-400">{{
            (totalPrice | number:'1.0-2') || '-' }} {{ trip?.currency }}</span>
        </div>
      </div>
    </div>

    <div class="hidden print:flex flex-col items-center">
      <img src="favicon.png" class="size-20">
      <div class="flex gap-2 items-center text-xs text-gray-500"><i class="pi pi-github"></i>itskovacs/trip</div>
    </div>
    <div class="flex items-center gap-2 print:hidden">
      @if (!trip?.archived) {
      <div class="flex">
        <p-button (click)="menuTripActions.toggle($event)" severity="secondary" text icon="pi pi-ellipsis-h" />
        <p-menu #menuTripActions [model]="menuTripActionsItems" [popup]="true" />
      </div>
      }
    </div>
  </div>
</section>

@if (trip?.archived) {
<div class="mx-auto p-4 my-4 w-fit max-w-[400px] text-center text-orange-800 rounded-lg bg-orange-50">
  <div class="flex items-center justify-between">
    <div class="font-semibold">Archived</div>
    <p-button text icon="pi pi-box" label="Restore" (click)="toggleArchiveTrip()" [size]="'small'" />
  </div>
  This Trip is archived, you cannot modify it.
</div>
}

<section class="p-4 print:px-1 grid lg:grid-cols-3 gap-4 print:block">
  <div [ngClass]="{ 'lg:col-span-2': !isExpanded, 'lg:col-span-3': isExpanded }"
    class="p-4 shadow self-start rounded-md max-w-screen print:col-span-full">
    <div [class.sticky]="!isMapFullscreen"
      class="top-0 z-10 bg-white p-2 mb-2 flex justify-between items-center dark:bg-surface-900">
      <div>
        <h1 class="font-semibold tracking-tight text-xl">Plans</h1>
        <span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} plans</span>
      </div>

      <div class="flex items-center gap-2 print:hidden">
        <div class="hidden md:flex items-center gap-2">
          <p-button label="Filters" icon="pi pi-filter" (click)="toggleFiltering()" text />
          <p-button label="Expand" pTooltip="Expand table to full width" class="hidden lg:flex" icon="pi pi-arrows-h"
            (click)="isExpanded = !isExpanded" text />
          <p-button [label]="tableExpandableMode ? 'Rowspan' : 'Group'"
            [pTooltip]="tableExpandableMode ? 'Switch table mode' : 'Switch table mode, allow column resizing'"
            [icon]="tableExpandableMode ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center' : 'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
            (click)="tableExpandableMode = !tableExpandableMode" text />
          <p-button label="GMaps" pTooltip="Open Google Maps directions" icon="pi pi-car" (click)="tripToNavigation()"
            text />
          <p-button label="Highlight" pTooltip="Show itinerary on map" icon="pi pi-directions"
            [severity]="tripMapAntLayerDayID == -1 ? 'help' : 'primary'" (click)="toggleTripDaysHighlight()" text />
          <p-button pTooltip="Print Trip" icon="pi pi-print" (click)="printTable()" text />
        </div>

        <div class="flex md:hidden">
          <p-button (click)="menuTripTableActions.toggle($event)" severity="secondary" text icon="pi pi-ellipsis-h" />
          <p-menu #menuTripTableActions [model]="menuTripTableActionsItems" appendTo="body" [popup]="true" />
        </div>
        <p-button icon="pi pi-plus" [disabled]="trip?.archived" (click)="addItem()" text />
      </div>
    </div>

    @if (isFilteringMode) {
    <div class="grid md:grid-cols-2 gap-2 mb-2">
      <p-multiselect display="chip" [options]="tripTableColumns" [(ngModel)]="tripTableSelectedColumns"
        styleClass="capitalize" selectedItemsLabel="{0} columns selected" placeholder="Choose Columns" />

      <input [formControl]="tripTableSearchInput" pInputText placeholder="Search..." />
    </div>
    }

    @defer {
    @if (flattenedTripItems.length) {
    <p-table [value]="flattenedTripItems" class="print-striped-rows" [class.table-colored-resizer]="tableExpandableMode"
      styleClass="max-w-[85vw] md:max-w-full" [rowGroupMode]="tableExpandableMode ? 'subheader': 'rowspan'"
      groupRowsBy="td_label" [resizableColumns]="tableExpandableMode">
      <ng-template #header>
        <tr>
          @if (!tableExpandableMode && tripTableSelectedColumns.includes('day')) {<th class="w-24" pResizableColumn>Day
          </th>}
          @if (tripTableSelectedColumns.includes('time')) {<th class="w-12" pResizableColumn>Time</th>}
          @if (tripTableSelectedColumns.includes('text')) {<th pResizableColumn>Text</th>}
          @if (tripTableSelectedColumns.includes('place')) {<th pResizableColumn>Place</th>}
          @if (tripTableSelectedColumns.includes('comment')) {<th pResizableColumn>Comment</th>}
          @if (tripTableSelectedColumns.includes('LatLng')) {<th class="w-12" pResizableColumn>LatLng</th>}
          @if (tripTableSelectedColumns.includes('price')) {<th class="w-12" pResizableColumn>Price</th>}
          @if (tripTableSelectedColumns.includes('status')) {<th class="w-12" pResizableColumn>Status</th>}
          @if (tripTableSelectedColumns.includes('distance')) {<th pResizableColumn>Distance (km)</th>}
        </tr>
      </ng-template>
      @if (tableExpandableMode) {
      <ng-template #groupheader let-tripitem let-rowIndex="rowIndex" let-expanded="expanded">
        <tr>
          <td colspan="8">
            <div class="flex items-center gap-2 w-full">
              <button type="button" pButton pRipple [pRowToggler]="tripitem" text rounded plain
                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'">
              </button>
              <span class="font-bold w-xs max-w-xs min-w-0 inline-block truncate">{{ tripitem.td_label }}</span>

              <p-button class="ml-2" label="Highlight" pTooltip="Show itinerary on map" text icon="pi pi-directions"
                [severity]="tripMapAntLayerDayID == tripitem.day_id ? 'help' : 'primary'"
                (click)="toggleTripDayHighlight(tripitem.day_id)" />
              <p-button label="GMaps" pTooltip="Open Google Maps directions" text icon="pi pi-car"
                (click)="tripDayToNavigation(tripitem.day_id)" />
            </div>
          </td>
        </tr>
      </ng-template>

      <ng-template #expandedrow let-tripitem>
        <tr class="h-12 cursor-pointer" [class.font-bold]="selectedItem?.id === tripitem.id"
          (click)="onRowClick(tripitem)">
          @if (tripTableSelectedColumns.includes('time')) {<td class="font-mono text-sm">{{ tripitem.time }}</td>}
          @if (tripTableSelectedColumns.includes('text')) {<td class="relative">
            <div class="truncate">
              @if (tripitem.status) {<div class="block absolute top-3 left-1 size-2.5 rounded-full"
                [style.background]="tripitem.status.color"></div>}
              {{ tripitem.text }}
            </div>
          </td>}
          @if (tripTableSelectedColumns.includes('place')) {<td class="relative">
            @if (tripitem.place) {
            <div class="ml-7 print:ml-0 truncate print:whitespace-normal">
              <img [src]="tripitem.place.image || tripitem.place.category.image"
                class="absolute left-0 top-1/2 -translate-y-1/2 w-9 rounded-full object-cover print:hidden" /> {{
              tripitem.place.name }}
            </div>
            } @else {-}
          </td>}
          @if (tripTableSelectedColumns.includes('comment')) {<td class="relative">
            @if (tripitem.image) {
            <div
              class="ml-7 print:ml-0 truncate print:whitespace-normal line-clamp-1 whitespace-pre-line print:line-clamp-none">
              <img [src]="tripitem.image"
                class="absolute left-0 top-1/2 -translate-y-1/2 size-9 rounded-full object-cover print:hidden" /> {{
              tripitem.comment }}
            </div>
            } @else {
            <div class="line-clamp-1 whitespace-pre-line print:line-clamp-none">
              {{ tripitem.comment || '-' }}
            </div>
            }
          </td>}
          @if (tripTableSelectedColumns.includes('LatLng')) {<td class="font-mono text-sm">
            <div class="print:max-w-full truncate">
              @if (tripitem.lat) { {{ tripitem.lat }}, {{ tripitem.lng }} }
              @else {-}
            </div>
          </td>}
          @if (tripTableSelectedColumns.includes('price')) {<td class="truncate">@if (tripitem.price) {<span
              class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded">{{
              tripitem.price }} @if (tripitem.price) { {{ trip?.currency }} }</span>}</td>}
          @if (tripTableSelectedColumns.includes('status')) {<td class="truncate">@if (tripitem.status) {<span
              [style.background]="tripitem.status.color+'1A'" [style.color]="tripitem.status.color"
              class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
              tripitem.status.label }}</span>}</td>}
          @if (tripTableSelectedColumns.includes('distance')) {<td class="text-sm">
            <div class="print:max-w-full truncate">{{ tripitem.distance || '-' }}</div>
          </td>}
        </tr>
      </ng-template>
      }
      @else {
      <ng-template #body let-tripitem let-rowgroup="rowgroup" let-rowspan="rowspan">
        <tr class="h-12 cursor-pointer" [class.font-bold]="selectedItem?.id === tripitem.id"
          (click)="onRowClick(tripitem)">
          @if (tripTableSelectedColumns.includes('day') && rowgroup) {
          <td [attr.rowspan]="rowspan" class="font-normal! max-w-20 truncate cursor-pointer"
            [class.text-blue-500]="tripMapAntLayerDayID == tripitem.day_id"
            (click)="toggleTripDayHighlight(tripitem.day_id); $event.stopPropagation()">
            <div class="truncate">{{tripitem.td_label }}</div>
          </td>
          }
          @if (tripTableSelectedColumns.includes('time')) {<td class="font-mono text-sm">{{ tripitem.time }}</td>}
          @if (tripTableSelectedColumns.includes('text')) {<td class="relative max-w-60">
            <div class="truncate">
              @if (tripitem.status) {<div class="block absolute top-3 left-1 size-2.5 rounded-full"
                [style.background]="tripitem.status.color"></div>}
              {{ tripitem.text }}
            </div>
          </td>}
          @if (tripTableSelectedColumns.includes('place')) {<td class="relative">
            @if (tripitem.place) {
            <div class="ml-7 print:ml-0 max-w-24 truncate print:whitespace-normal">
              <img [src]="tripitem.place.image || tripitem.place.category.image"
                class="absolute left-0 top-1/2 -translate-y-1/2 size-9 rounded-full object-cover print:hidden" /> {{
              tripitem.place.name }}
            </div>
            } @else {-}
          </td>}
          @if (tripTableSelectedColumns.includes('comment')) {<td class="relative">
            @if (tripitem.image) {
            <div
              class="ml-7 print:ml-0 truncate print:whitespace-normal line-clamp-1 whitespace-pre-line print:line-clamp-none">
              <img [src]="tripitem.image"
                class="absolute left-0 top-1/2 -translate-y-1/2 size-9 rounded-full object-cover print:hidden" /> {{
              tripitem.comment }}
            </div>
            } @else {
            <div class="line-clamp-1 whitespace-pre-line print:line-clamp-none">
              {{ tripitem.comment || '-' }}
            </div>
            }
          </td>}
          @if (tripTableSelectedColumns.includes('LatLng')) {<td class="font-mono text-sm">
            <div class="max-w-20 print:max-w-full truncate">
              @if (tripitem.lat) { {{ tripitem.lat }}, {{ tripitem.lng }} }
              @else {-}
            </div>
          </td>}
          @if (tripTableSelectedColumns.includes('price')) {<td class="truncate">@if (tripitem.price) {<span
              class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded">{{
              tripitem.price }} @if (tripitem.price) { {{ trip?.currency }} }</span>}</td>}
          @if (tripTableSelectedColumns.includes('status')) {<td class="truncate">@if (tripitem.status) {<span
              [style.background]="tripitem.status.color+'1A'" [style.color]="tripitem.status.color"
              class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
              tripitem.status.label }}</span>}</td>}
          @if (tripTableSelectedColumns.includes('distance')) {<td class="text-sm">
            <div class="print:max-w-full truncate">{{ tripitem.distance || '-' }}</div>
          </td>}
        </tr>
      </ng-template>
      }
    </p-table>
    } @else {
    <div class="px-4 mx-auto max-w-screen-xl mt-8 col-span-full print:hidden">
      <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>Day</i> to your <i>Trip</i> to start organizing !
        </p>

        <p-button styleClass="mt-4" label="Add" icon="pi pi-plus" [disabled]="trip?.archived" (click)="addDay()" text />
      </div>
    </div>
    <div class="hidden print:block text-center text-sm text-gray-500 mt-4">
      No Trip
    </div>
    }
    } @placeholder (minimum 0.4s) {
    <div class="h-[400px] w-full">
      <p-skeleton height="100%" />
    </div>
    }
  </div>

  <div [ngClass]="{ 'grid col-span-full grid-cols-4': isExpanded, 'flex flex-col sticky': !isExpanded }"
    class="gap-4 top-4 self-start max-w-screen print:hidden min-w-0">
    @if (selectedItem) {
    <div class="p-4 w-full max-w-full min-h-20 rounded-md shadow text-center">
      <div class="flex justify-between items-center mb-3">
        <div class="p-2 flex items-center gap-4 w-full max-w-full">
          @if (selectedItem.place) {
          <img [src]="selectedItem.place.image || selectedItem.place.category.image"
            class="hidden md:flex object-cover rounded-md h-20 w-32" />
          }

          <div class="flex items-center justify-between gap-2 w-full">
            <h1 class="text-start font-semibold mb-0 line-clamp-1 md:text-xl">{{ selectedItem.text }}
            </h1>

            <div class="flex items-center gap-2 flex-none">
              @if (selectedItem.gpx) {
              <p-button icon="pi pi-compass" (click)="downloadItemGPX()" text />
              }
              @if (selectedItem.lat && selectedItem.lng) {
              <p-button icon="pi pi-car" (click)="itemToNavigation()" text />
              }
              <p-button icon="pi pi-trash" [disabled]="trip?.archived" severity="danger"
                (click)="deleteItem(selectedItem)" text />
              <p-button icon="pi pi-pencil" [disabled]="trip?.archived" (click)="editItem(selectedItem)" text />
              <p-button icon="pi pi-times" [disabled]="trip?.archived"
                (click)="selectedItem = undefined; resetPlaceHighlightMarker()" text />
            </div>
          </div>
        </div>
      </div>

      <div class="p-4 px-2 grid md:grid-cols-3 gap-4 overflow-auto w-full">
        <div class="rounded-md shadow p-4 w-full">
          <p class="font-bold mb-1">Time</p>
          <p class="text-sm text-gray-500">{{ selectedItem.time }}</p>
        </div>

        <div class="md:col-span-2 rounded-md shadow p-4">
          <p class="font-bold mb-1">Text</p>
          <p class="text-sm text-gray-500">{{ selectedItem.text }}</p>
        </div>

        @if (selectedItem.place) {
        <div class="relative rounded-md shadow p-4">
          <p class="font-bold mb-1">Place</p>
          <div class="text-sm text-gray-500 truncate">{{ selectedItem.place.name }}</div>
          <div class="absolute top-2 right-2"><p-button severity="help" text icon="pi pi-pencil"
              (click)="editPlace(selectedItem.place)" /></div>
        </div>
        }

        @if (selectedItem.comment) {
        <div class="md:col-span-2 rounded-md shadow p-4">
          <p class="font-bold mb-1">Comment</p>
          <p class="text-sm text-gray-500 whitespace-pre-line" [innerHTML]="selectedItem.comment | linkify"></p>
        </div>
        }

        @if (selectedItem.lat) {
        <div class="rounded-md shadow p-4">
          <p class="font-bold mb-1 truncate">Latitude, Longitude</p>
          <p class="text-sm text-gray-500 truncate cursor-copy"
            [cdkCopyToClipboard]="selectedItem.lat + ',' + selectedItem.lng">{{
            selectedItem.lat }}, {{ selectedItem.lng }}</p>
        </div>
        }

        @if (selectedItem.price) {
        <div class="rounded-md shadow p-4">
          <p class="font-bold mb-1">Price</p>
          <p class="text-sm text-gray-500">{{ selectedItem.price }} @if (selectedItem.price) { {{ trip?.currency }} }
          </p>
        </div>
        }

        @if (selectedItem.status) {
        <div class="rounded-md shadow p-4">
          <p class="font-bold mb-1">Status</p>
          <span [style.background]="selectedItem.status.color+'1A'" [style.color]="selectedItem.status.color"
            class="text-xs font-medium me-2 px-2.5 py-0.5 rounded">{{
            selectedItem.status.label }}</span>
        </div>
        }
      </div>

      @if (selectedItem.image) {
      <div class="p-4 px-2 gap-4 overflow-auto w-full min-h-0 max-h-64">
        <img [src]="selectedItem.image" class="w-full object-cover rounded-md" />
      </div>
      }
    </div>
    }

    <div class="z-10 p-4 shadow rounded-md w-full min-h-20 max-h-full overflow-y-auto">
      <div class="p-2 mb-2 flex justify-between items-center">
        <div>
          <h1 class="font-semibold tracking-tight text-xl">Map</h1>
          <span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} places</span>
        </div>

        <div class="flex gap-2">
          <p-button pTooltip="Fullscreen" tooltipPosition="left" icon="pi pi-window-maximize"
            (click)="toggleMapFullscreen()" text />
          <p-button pTooltip="Reset bounds" tooltipPosition="left" icon="pi pi-refresh" [disabled]="!places.length"
            (click)="resetMapBounds()" text />
        </div>
      </div>

      <div id="map" [class.fullscreen-map]="isMapFullscreen" class="w-full rounded-md min-h-96 h-1/3 max-h-full">
      </div>
    </div>

    @if (!selectedItem) {
    <div class="p-4 shadow rounded-md w-full min-h-20">
      <div class="p-2 mb-2 flex justify-between items-center">
        <div class="group relative">
          <h1 class="font-semibold tracking-tight text-xl">Places</h1>
          <span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} places</span>

          <div
            class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
            <p-button [icon]="collapsedTripPlaces ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
              (click)="collapsedTripPlaces = !collapsedTripPlaces" />
          </div>
        </div>

        <div class="flex items-center">
          @defer {
          <span class="bg-blue-100 text-blue-800 text-sm me-2 px-2.5 py-0.5 rounded-md dark:bg-blue-100/85">{{
            places.length }}</span>
          } @placeholder (minimum 0.4s) {
          <p-skeleton height="1.75rem" width="2.5rem" class="mr-1" />
          }
          <p-button pTooltip="Create Place" tooltipPosition="left" icon="pi pi-plus" [disabled]="trip?.archived"
            (click)="addPlace()" text />
          <p-button pTooltip="Manage associated places" tooltipPosition="left" icon="pi pi-list-check"
            [disabled]="trip?.archived" (click)="manageTripPlaces()" text />
        </div>
      </div>

      @if (!collapsedTripPlaces) {
      <div [class.max-h-64!]="!isExpanded" class="max-h-[340px] overflow-y-auto">
        @defer {
        @for (p of places; track p.id) {
        <div class="flex items-center gap-4 py-2 px-4 hover:bg-gray-50 rounded-md overflow-auto dark:hover:bg-gray-800"
          (mouseenter)="placeHighlightMarker(p)" (mouseleave)="resetPlaceHighlightMarker()">
          <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">
              <span [style.color]="p.category.color" [style.background-color]="p.category.color + '1A'"
                class="text-xs font-medium me-2 px-2.5 py-0.5 rounded flex gap-2 items-center max-w-28"><i
                  class="pi pi-box text-xs"></i> <span class="truncate">{{ p.category.name }}</span></span>

              @if (isPlaceUsed(p.id)) {
              <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-check-square 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-map-marker text-xs"></i></span>
              }

              <span
                class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-100/85">{{
                p.price || '-'
                }} @if (p.price) { {{ trip?.currency }} }</span>

              @if (trip?.collaborators?.length) {
              <span class="bg-gray-100 text-gray-800 text-sm me-2 px-2.5 py-0.5 rounded dark:bg-gray-100/85">{{ p.user
                }}</span>
              }
            </div>
          </div>
        </div>
        } @empty {
        <p-button label="Add" icon="pi pi-plus" [disabled]="trip?.archived" (click)="manageTripPlaces()" text />
        }
        } @placeholder (minimum 0.4s) {
        <div class="flex flex-col gap-4">
          @for (_ of [1,2,3]; track _) {
          <div class="h-16">
            <p-skeleton height="100%" />
          </div>
          }
        </div>
        }
      </div>
      }
    </div>

    <div class="p-4 shadow rounded-md w-full min-h-20">
      <div class="p-2 mb-2 flex justify-between items-center">
        <div class="group relative">
          <h1 class="font-semibold tracking-tight text-xl">Days</h1>
          <span class="text-xs text-gray-500 line-clamp-1">{{ trip?.name }} days</span>

          <div
            class="bg-white rounded py-2 absolute top-1/2 -translate-y-1/2 left-0 hidden group-hover:block slide-x dark:bg-surface-900">
            <p-button [icon]="collapsedTripDays ? 'pi pi-chevron-down' : 'pi pi-chevron-up'" text
              (click)="collapsedTripDays = !collapsedTripDays" />
          </div>
        </div>

        <p-button icon="pi pi-plus" [disabled]="trip?.archived" (click)="addDay()" text />
      </div>

      @if (!collapsedTripDays) {
      <div [class.max-h-64!]="!isExpanded" class="max-h-[340px] overflow-y-auto">
        @defer {
        @for (d of trip?.days; track d.id) {
        <div
          class="group flex items-center gap-4 rounded-md justify-between h-10 px-4 py-2 hover:bg-gray-50 w-full max-w-full dark:hover:bg-gray-800">
          <div class="line-clamp-1 dark:text-surface-300">
            {{ d.label }}
          </div>
          <div class="flex items-center gap-2 flex-none">
            <span
              class="bg-gray-100 text-gray-800 text-sm px-2.5 py-0.5 rounded-md min-w-fit group-hover:hidden dark:bg-gray-100/85">{{
              getDayStats(d).price || '-' }} @if (getDayStats(d).price) { {{ trip?.currency }} }</span>
            <span
              class="bg-blue-100 text-blue-800 text-sm px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-blue-100/85">{{
              getDayStats(d).places }}</span>

            <div class="flex md:hidden">
              <p-button (click)="selectedTripDayForMenu = d; menuTripDayActions.toggle($event)" severity="secondary"
                text icon="pi pi-ellipsis-h" />
            </div>
          </div>

          <div class="hidden group-hover:flex gap-2 items-center flex-none">
            <p-button icon="pi pi-trash" severity="danger" [disabled]="trip?.archived" (click)="deleteDay(d)" text />
            <p-button icon="pi pi-pencil" [disabled]="trip?.archived" (click)="editDay(d)" label="Edit" text />
            <p-button icon="pi pi-plus" [disabled]="trip?.archived" (click)="addItem(d.id)" label="Item" text />
          </div>
        </div>
        } @empty {
        <p-button label="Add" icon="pi pi-plus" [disabled]="trip?.archived" (click)="addDay()" text />
        }
        } @placeholder (minimum 0.4s) {
        <div class="h-16">
          <p-skeleton height="100%" />
        </div>
        }
      </div>
      }
    </div>
    }
  </div>
</section>
<p-menu #menuTripDayActions [model]="menuTripDayActionsItems" appendTo="body" [popup]="true" />

@if (isMapFullscreen) {
<div class="fixed top-2 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
  <p-button (click)="toggleMapFullscreen()" severity="secondary" text icon="pi pi-window-minimize" />
</div>

<div class="fixed top-20 right-2 p-2 bg-white shadow rounded dark:bg-surface-900">
  <p-button (click)="toggleTripDaysHighlight()" text icon="pi pi-directions"
    [severity]="tripMapAntLayerDayID == -1 ? 'help' : 'secondary'" />
</div>

<div
  class="fixed bottom-4 left-2 bg-white shadow rounded dark:bg-surface-900 min-w-32 max-w-48 max-h-96 overflow-y-auto">
  <div class="pr-4 py-4 grid gap-4">
    <h2 class="pl-4 font-semibold text-md">Days</h2>
    @for (day of trip?.days; track day.id) {
    <div (click)="toggleTripDayHighlight(day.id)" class="flex gap-4 items-center cursor-pointer min-w-0 border-l-4 pl-2"
      [ngClass]="{'border-transparent': tripMapAntLayerDayID != day.id, 'border-blue-400': tripMapAntLayerDayID == day.id}">
      <span
        class="w-10 text-center bg-blue-100 text-blue-800 text-sm px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-blue-100/85">{{
        day.items.length }}</span>
      <div class="truncate">
        {{ day.label }}
      </div>
    </div>
    }
  </div>
</div>
}

<p-dialog header="Share" [draggable]="false" [dismissableMask]="true" [modal]="true" [(visible)]="shareDialogVisible"
  [style]="{ width: '25rem' }">
  @if (shareDialogVisible) {
  <ng-container>
    @if (trip?.shared) {
    <div class="flex items-center flex-col gap-2">
      <span>{{ trip?.name }} is shared on this link:</span>

      <div class="flex items-center w-full rounded-xl border border-gray-300 bg-white p-2 pl-3 pr-2 shadow-sm">
        <p-button text icon="pi pi-trash" severity="danger" (click)="unshareTrip()" />
        <span class="text-sm font-semibold text-gray-800 truncate">
          {{ (tripSharedURL$ | async) || '' }}
        </span>
        <p-button text icon="pi pi-copy" [cdkCopyToClipboard]="(tripSharedURL$ | async) || ''" />
      </div>
    </div>
    } @else {
    <div class="flex items-center flex-col gap-2">
      <span>{{ trip?.name }} is not currently shared.</span>
      <p-button (click)="shareTrip()" styleClass="mt-4" text label="Share" icon="pi pi-share-alt" />
    </div>
    }
  </ng-container>
  }
</p-dialog>

<p-dialog header="Packing list" [draggable]="false" [dismissableMask]="true" [modal]="true"
  [(visible)]="packingDialogVisible" styleClass="w-[95%] md:w-[70%] lg:w-[50%]">
  <section class="md:max-w-3/4 md:mx-auto max-h-[80%] md:max-h-[600px]">
    <div class="flex items-center justify-center gap-4">
      <p-button (click)="addPackingItem()" icon="pi pi-plus" label="Add item" text />
      <p-button icon="pi pi-ellipsis-h" text />
    </div>

    <div class="grid gap-2 mt-4 pb-4">
      @for (c of dispPackingList | keyvalue; track c.key) {
      <div class="mt-4 text-md font-semibold capitalize">{{ c.key }}</div>

      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        @for (item of c.value; track item.id) {
        <div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
          <label [for]="item.id" [class.line-through]="item.packed"
            class="flex items-center gap-2 w-full cursor-pointer">
            <p-checkbox (onChange)="onCheckPackingItem($event, item.id)" [binary]="true" [inputId]="item.id.toString()"
              [(ngModel)]="item.packed" />
            <div class="pr-6 md:pr-0 truncate select-none flex-1">
              @if (item.qt) {<span class="text-gray-400 mr-0.5">{{ item.qt }}</span>}
              <span>{{ item.text }}</span>
            </div>
          </label>
          <div
            class="md:opacity-0 absolute right-0 top-1/2 -translate-y-1/2 md:group-hover:opacity-100 bg-white md:bg-gray-100 rounded">
            <p-button size="small" text icon="pi pi-trash" (click)="deletePackingItem(item)" severity="danger" />
          </div>
        </div>
        }
      </div>
      }
    </div>
  </section>
</p-dialog>

<p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true"
  [(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]">
  <section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
    <div class="flex justify-center">
      <p-button (click)="addChecklistItem()" icon="pi pi-plus" label="Add item" text />
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
      @for (item of checklistItems; track item.id) {
      <div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
        <label [for]="item.id" [pTooltip]="item.text" [class.line-through]="item.checked"
          class="flex items-center gap-2 w-full cursor-pointer">
          <p-checkbox (onChange)="onCheckChecklistItem($event, item.id)" [binary]="true" [inputId]="item.id.toString()"
            [(ngModel)]="item.checked" />
          <div class="pr-6 md:pr-0 truncate select-none flex-1">
            <span>{{ item.text }}</span>
          </div>
        </label>
        <div
          class="md:opacity-0 absolute right-0 top-1/2 -translate-y-1/2 md:group-hover:opacity-100 bg-white md:bg-gray-100 rounded">
          <p-button size="small" text icon="pi pi-trash" (click)="deleteChecklistItem(item)" severity="danger" />
        </div>
      </div>
      }
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
      @for (item of getWatchlistData; track item.id) {
      <div class="flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
        <label [for]="item.id" [pTooltip]="item.text" class="flex items-center gap-2 w-full">
          <div class="relative">
            @if (item.status) {<div class="z-50 block absolute top-0 left-3 size-2.5 rounded-full"
              [style.background]="item.status.color"></div>}
            <p-checkbox disabled />
          </div>
          <div class="pr-6 md:pr-0 truncate select-none flex-1">
            <span>{{ item.text }}</span>
          </div>
        </label>
      </div>
      }
    </div>
  </section>
</p-dialog>

<p-dialog header="Members" [draggable]="false" [dismissableMask]="true" [modal]="true"
  [(visible)]="membersDialogVisible" 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="flex justify-center">
      <p-button (click)="addMember()" icon="pi pi-plus" label="Member" text />
    </div>

    <div class="divide-y divide-gray-100 mt-4 pb-4">
      @for (m of tripMembers; track m.user) {
      <div class="flex items-center justify-between gap-x-6 py-5">
        <div class="flex items-center min-w-0 gap-x-4">
          <div class="size-12 flex flex-none rounded-full items-center justify-center" [ngClass]="{
            'bg-red-100': !m.invited_at,
            'bg-gray-50': m.invited_at && !m.joined_at,
            'bg-blue-100': m.invited_at && m.joined_at
            }">
            <i class="pi pi-user"></i>
          </div>

          <div class="flex min-w-0 gap-x-4">
            <span class="capitalize truncate font-semibold text-gray-900">{{ m.user }}</span>
          </div>
        </div>

        <div class="flex items-center gap-2">
          <span
            class="text-center bg-gray-100 text-gray-800 text-xs px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-gray-100/85">-
            {{ trip?.currency }}</span>

          <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
            @if (!m.invited_at) {
            <span
              class="text-center bg-red-100 text-red-800 text-xs px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-red-100/85">Owner</span>
            }

            @if (m.invited_at && !m.joined_at) {
            <span
              class="text-center bg-gray-100 text-gray-800 text-xs px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-gray-100/85">Invited</span>
            }

            @if (m.joined_at) {
            <span
              class="text-center bg-blue-100 text-blue-800 text-xs px-2.5 py-0.5 rounded-md group-hover:hidden dark:bg-blue-100/85">Member</span>
            }
          </div>

          @if (m.invited_at) {
          <p-button text (click)="deleteMember(m.user)" icon="pi pi-trash" severity="danger" />
          }
        </div>
      </div>
      }
    </div>
  </section>
</p-dialog>