{#if globalItems.length > 0 || canModify}

{$t('itinerary.trip_context') || 'Trip Context'}

{#if globalItems.length === 0}

{$t('itinerary.no_trip_context_items')}

{:else}

{#each globalItems as item (item.id)} {@const objectType = item.item?.type || ''} {@const resolvedObj = item.resolvedObject}

{#if resolvedObj} {#if canModify}

{/if} {#if objectType === 'location'} moveItemToGlobal(e.detail.type, e.detail.id)} {user} {collection} compact={true} showImage={false} /> {:else if objectType === 'transportation'} moveItemToGlobal(e.detail.type, e.detail.id)} /> {:else if objectType === 'lodging'} moveItemToGlobal(e.detail.type, e.detail.id)} /> {:else if objectType === 'note'} moveItemToGlobal(e.detail.type, e.detail.id)} /> {:else if objectType === 'checklist'} moveItemToGlobal(e.detail.type, e.detail.id)} /> {/if} {:else}

⚠️ {$t('itinerary.item_not_found')} (ID: {item.object_id})

{/if}

{/each}

{/if}

{/if} {#each days as day, dayIndex} {@const dayNumber = dayIndex + 1} {@const totalDays = days.length} {@const weekday = DateTime.fromISO(day.date).toFormat('ccc')} {@const dayOfMonth = DateTime.fromISO(day.date).toFormat('d')} {@const monthAbbrev = DateTime.fromISO(day.date).toFormat('LLL')} {@const preTimelineLodging = day.preTimelineLodging} {@const postTimelineLodging = day.postTimelineLodging} {@const dayTimelineItems = getDayTimelineItems(day)} {@const firstConnectableItem = getFirstConnectableItem(day.items)} {@const lastConnectableItem = getLastConnectableItem(day.items)} {@const noLocationsInDay = !firstConnectableItem && !lastConnectableItem} {@const shouldCollapseBoundaryLodging = noLocationsInDay && preTimelineLodging?.id && postTimelineLodging?.id && preTimelineLodging.id === postTimelineLodging.id} {@const startBoundaryConnector = preTimelineLodging && firstConnectableItem ? getLocationConnector(preTimelineLodging, firstConnectableItem) : null} {@const startBoundaryDirectionsUrl = preTimelineLodging && firstConnectableItem ? buildDirectionsUrl( preTimelineLodging, firstConnectableItem, startBoundaryConnector?.mode || 'walking' ) : null} {@const endBoundaryConnector = postTimelineLodging && lastConnectableItem ? getLocationConnector(lastConnectableItem, postTimelineLodging) : null} {@const endBoundaryDirectionsUrl = postTimelineLodging && lastConnectableItem ? buildDirectionsUrl( lastConnectableItem, postTimelineLodging, endBoundaryConnector?.mode || 'walking' ) : null}

{weekday}

{dayOfMonth}

{monthAbbrev}

{formatDayTemperature(day)}

{day.displayDate}

{#if canModify} {#if day.dayMetadata?.name} { const newName = e.currentTarget.value.trim() || null; if (newName !== day.dayMetadata?.name) { saveDayMetadata(day.date, newName, day.dayMetadata?.description || null); } }} /> {:else} { const newName = e.currentTarget.value.trim() || null; if (newName) { saveDayMetadata(day.date, newName, day.dayMetadata?.description || null); } else { e.currentTarget.classList.add('w-0'); e.currentTarget.classList.remove('w-auto'); } }} on:focus={(e) => { e.currentTarget.classList.remove('w-0'); e.currentTarget.classList.add('w-auto'); }} /> {/if} {:else if day.dayMetadata?.name} — {day.dayMetadata.name} {/if}

{$t('calendar.day')} {dayNumber} {$t('worldtravel.of')} {totalDays} • {day.items.length} {day.items.length === 1 ? $t('checklist.item') : $t('checklist.items')} {#if day.overnightLodging.length > 0} {$t('adventures.overnight')} {/if}

{#if canModify}

{
										const newDesc = e.currentTarget.value.trim() || null;
										if (newDesc !== day.dayMetadata?.description) {
											saveDayMetadata(day.date, day.dayMetadata?.name || null, newDesc);
										}
									}}
								/>
							{:else if day.dayMetadata?.description}
								<p class="text-sm leading-relaxed opacity-80 whitespace-pre-wrap px-2 py-1">
									{day.dayMetadata.description}
								</p>
							{/if}
						</div>

<div class="flex-none ml-3 flex items-start gap-2">
							{#if savingDay === day.date}
								<div>
									<div class="badge badge-neutral-300 gap-2 p-2">
										<span class="loading loading-spinner loading-sm"></span>
										{$t('adventures.saving')}...
									</div>
								</div>
							{/if}

{#if canModify}
								<button
									type="button"
									class="btn btn-sm btn-outline"
									disabled={isSavingOrder}
									title={$t('itinerary.optimize')}
									on:click={() => optimizeDayOrder(dayIndex)}
								>
									{$t('itinerary.optimize')}
								</button>
							{/if}
						</div>
					</div>

<div>
						{#if preTimelineLodging?.resolvedObject}
							<div class="mb-3">
								<LodgingCard
									lodging={preTimelineLodging.resolvedObject}
									{user}
									{collection}
									itineraryItem={preTimelineLodging}
									showImage={false}
									compact={true}
									on:delete={handleItemDelete}
									on:removeFromItinerary={handleRemoveItineraryItem}
									on:edit={handleEditLodging}
									on:moveToGlobal={(e) => moveItemToGlobal(e.detail.type, e.detail.id)}
									on:changeDay={(e) =>
										handleOpenDayPickerForItem(
											e.detail.type,
											e.detail.item,
											e.detail.forcePicker,
											day.date
										)}
								/>
								{#if startBoundaryConnector}
									<div
										class="mt-2 rounded-lg border border-base-300 bg-base-200/60 px-3 py-2 text-xs"
									>
										{#if startBoundaryConnector.unavailable}
											<div class="flex items-center gap-2 flex-wrap text-base-content/80">
												<span class="inline-flex items-center gap-1 font-medium">
													<LocationMarker class="w-3.5 h-3.5" />
													{startBoundaryConnector.durationLabel}
												</span>
												<span class="text-base-content/40">•</span>
												{#if startBoundaryDirectionsUrl}
													<a
														href={startBoundaryDirectionsUrl}
														target="_blank"
														rel="noopener noreferrer"
														class="inline-flex items-center gap-1 text-primary/80 font-medium underline underline-offset-2"
													>
														<LocationMarker class="w-3.5 h-3.5" />
														{getI18nText('itinerary.directions', 'Directions')}
													</a>
												{/if}
											</div>
										{:else}
											<div class="flex items-center gap-2 flex-wrap text-base-content">
												<span class="inline-flex items-center gap-1 font-medium">
													{#if startBoundaryConnector.mode === 'driving'}
														<Car class="w-3.5 h-3.5" />
													{:else}
														<Walk class="w-3.5 h-3.5" />
													{/if}
													{startBoundaryConnector.durationLabel}
												</span>
												<span class="text-base-content/50">•</span>
												<span class="font-medium">{startBoundaryConnector.distanceLabel}</span>
												{#if startBoundaryDirectionsUrl}
													<span class="text-base-content/50">•</span>
													<a
														href={startBoundaryDirectionsUrl}
														target="_blank"
														rel="noopener noreferrer"
														class="inline-flex items-center gap-1 text-primary font-medium underline underline-offset-2"
													>
														<LocationMarker class="w-3.5 h-3.5" />
														{getI18nText('itinerary.directions', 'Directions')}
													</a>
												{/if}
											</div>
										{/if}
									</div>
								{/if}
							</div>
						{/if}

{#if dayTimelineItems.length === 0 && !preTimelineLodging?.resolvedObject && !postTimelineLodging?.resolvedObject}
							<div
								class="card bg-base-100 shadow-sm border border-dashed border-base-300 p-4 text-center"
							>
								<div class="card-body p-2">
									<CalendarBlank class="w-8 h-8 mx-auto mb-2 opacity-40" />
									<p class="opacity-70">{$t('itinerary.no_plans_for_day')}</p>
								</div>
							</div>
						{:else}
							<div
								use:dndzone={{
									items: dayTimelineItems,
									flipDurationMs,
									dropTargetStyle: { outline: 'none', border: 'none' },
									dragDisabled: isSavingOrder || !canModify,
									dropFromOthersDisabled: true
								}}
								on:consider={(e) => handleDndConsider(dayIndex, e)}
								on:finalize={(e) => handleDndFinalize(dayIndex, e)}
								class="space-y-3"
							>
								{#each dayTimelineItems as item, index (item.id)}
									{@const objectType = item.item?.type || ''}
									{@const resolvedObj = item.resolvedObject}
									{@const multiDay = isMultiDay(item)}
									{@const nextConnectableItem = findNextConnectableItem(dayTimelineItems, index)}
									{@const locationConnector = getLocationConnector(item, nextConnectableItem)}
									{@const directionsUrl = buildDirectionsUrl(
										item,
										nextConnectableItem,
										locationConnector?.mode || 'walking'
									)}
									{@const isDraggingShadow = item[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
									{@const timelineNumber = index + 1}

<div
										class="group relative transition-all duration-200 pointer-events-auto {isDraggingShadow
											? 'opacity-40 scale-95'
											: ''}"
										animate:flip={{ duration: flipDurationMs }}
									>
										{#if resolvedObj}
											<div class="flex gap-3">
												<div class="relative flex flex-col items-center shrink-0 pt-1">
													<div
														class="w-7 h-7 rounded-full bg-primary text-primary-content text-xs font-bold flex items-center justify-center"
													>
														{timelineNumber}
													</div>
													{#if index < dayTimelineItems.length - 1}
														<div class="w-px bg-base-300 flex-1 min-h-10 mt-1"></div>
													{/if}
												</div>

<div class="relative flex-1 min-w-0">
													{#if canModify}
														<div
															class="absolute left-0 top-0 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
															title={$t('itinerary.drag_to_reorder')}
														>
															<div
																class="itinerary-drag-handle btn btn-circle btn-xs btn-ghost bg-base-100/80 backdrop-blur-sm shadow-sm hover:bg-base-200 cursor-grab active:cursor-grabbing"
																aria-label={$t('itinerary.drag_to_reorder')}
																role="button"
																tabindex="0"
															>
																<svg
																	xmlns="http://www.w3.org/2000/svg"
																	class="h-3 w-3"
																	fill="none"
																	viewBox="0 0 24 24"
																	stroke="currentColor"
																>
																	<path
																		stroke-linecap="round"
																		stroke-linejoin="round"
																		stroke-width="2"
																		d="M4 8h16M4 16h16"
																	/>
																</svg>
															</div>
														</div>
													{/if}

{#if objectType === 'transportation'}
														<TransportationCard
															transportation={resolvedObj}
															{user}
															{collection}
															itineraryItem={item}
															compact={true}
															showImage={false}
															on:delete={handleItemDelete}
															on:removeFromItinerary={handleRemoveItineraryItem}
															on:edit={handleEditTransportation}
															on:moveToGlobal={(e) => moveItemToGlobal(e.detail.type, e.detail.id)}
															on:changeDay={(e) =>
																handleOpenDayPickerForItem(
																	e.detail.type,
																	e.detail.item,
																	e.detail.forcePicker,
																	day.date
																)}
														/>
													{:else}
														{#if multiDay && objectType === 'lodging'}
															<div class="mb-2">
																<div class="badge badge-info badge-xs gap-1 shadow-sm">
																	<span class="text-xs">{$t('itinerary.multi_day')}</span>
																</div>
															</div>
														{/if}

{#if objectType === 'location'}
															<LocationCard
																adventure={resolvedObj}
																on:edit={handleEditLocation}
																on:delete={handleItemDelete}
																on:duplicate={handleDuplicateLocation}
																itineraryItem={item}
																on:removeFromItinerary={handleRemoveItineraryItem}
																on:moveToGlobal={(e) =>
																	moveItemToGlobal(e.detail.type, e.detail.id)}
																{user}
																{collection}
																compact={true}
																showImage={false}
																on:changeDay={(e) =>
																	handleOpenDayPickerForItem(
																		e.detail.type,
																		e.detail.item,
																		e.detail.forcePicker,
																		day.date
																	)}
															/>
														{:else if objectType === 'lodging'}
															<LodgingCard
																lodging={resolvedObj}
																{user}
																{collection}
																itineraryItem={item}
																showImage={false}
																compact={true}
																on:delete={handleItemDelete}
																on:removeFromItinerary={handleRemoveItineraryItem}
																on:edit={handleEditLodging}
																on:moveToGlobal={(e) =>
																	moveItemToGlobal(e.detail.type, e.detail.id)}
																on:changeDay={(e) =>
																	handleOpenDayPickerForItem(
																		e.detail.type,
																		e.detail.item,
																		e.detail.forcePicker,
																		day.date
																	)}
															/>
														{:else if objectType === 'note'}
															<NoteCard
																note={resolvedObj}
																{user}
																{collection}
																on:delete={handleItemDelete}
																itineraryItem={item}
																on:removeFromItinerary={handleRemoveItineraryItem}
																on:edit={handleEditNote}
																on:moveToGlobal={(e) =>
																	moveItemToGlobal(e.detail.type, e.detail.id)}
																on:changeDay={(e) =>
																	handleOpenDayPickerForItem(
																		e.detail.type,
																		e.detail.item,
																		e.detail.forcePicker,
																		day.date
																	)}
															/>
														{:else if objectType === 'checklist'}
															<ChecklistCard
																checklist={resolvedObj}
																{user}
																{collection}
																on:delete={handleItemDelete}
																itineraryItem={item}
																on:removeFromItinerary={handleRemoveItineraryItem}
																on:edit={handleEditChecklist}
																on:moveToGlobal={(e) =>
																	moveItemToGlobal(e.detail.type, e.detail.id)}
																on:changeDay={(e) =>
																	handleOpenDayPickerForItem(
																		e.detail.type,
																		e.detail.item,
																		e.detail.forcePicker,
																		day.date
																	)}
															/>
														{/if}
													{/if}

{#if locationConnector}
														<div
															class="mt-2 rounded-lg border border-base-300 bg-base-200/60 px-3 py-2 text-xs"
														>
															{#if locationConnector.unavailable}
																<div class="flex items-center gap-2 flex-wrap text-base-content/80">
																	<span class="inline-flex items-center gap-1 font-medium">
																		<LocationMarker class="w-3.5 h-3.5" />
																		{locationConnector.durationLabel}
																	</span>
																	<span class="text-base-content/40">•</span>
																	{#if directionsUrl}
																		<a
																			href={directionsUrl}
																			target="_blank"
																			rel="noopener noreferrer"
																			class="inline-flex items-center gap-1 text-primary/80 font-medium underline underline-offset-2"
																		>
																			<LocationMarker class="w-3.5 h-3.5" />
																			{getI18nText('itinerary.directions', 'Directions')}
																		</a>
																	{:else}
																		<span
																			class="inline-flex items-center gap-1 text-primary/80 font-medium underline underline-offset-2"
																		>
																			<LocationMarker class="w-3.5 h-3.5" />
																			{getI18nText('itinerary.directions', 'Directions')}
																		</span>
																	{/if}
																</div>
															{:else}
																<div class="flex items-center gap-2 flex-wrap text-base-content">
																	<span class="inline-flex items-center gap-1 font-medium">
																		{#if locationConnector.mode === 'driving'}
																			<Car class="w-3.5 h-3.5" />
																		{:else}
																			<Walk class="w-3.5 h-3.5" />
																		{/if}
																		{locationConnector.durationLabel}
																	</span>
																	<span class="text-base-content/50">•</span>
																	<span class="font-medium">{locationConnector.distanceLabel}</span>
																	<span class="text-base-content/50">•</span>
																	{#if directionsUrl}
																		<a
																			href={directionsUrl}
																			target="_blank"
																			rel="noopener noreferrer"
																			class="inline-flex items-center gap-1 text-primary font-medium underline underline-offset-2"
																		>
																			<LocationMarker class="w-3.5 h-3.5" />
																			{getI18nText('itinerary.directions', 'Directions')}
																		</a>
																	{:else}
																		<span
																			class="inline-flex items-center gap-1 text-primary font-medium underline underline-offset-2"
																		>
																			<LocationMarker class="w-3.5 h-3.5" />
																			{getI18nText('itinerary.directions', 'Directions')}
																		</span>
																	{/if}
																</div>
															{/if}
														</div>
													{/if}
												</div>
											</div>
										{:else}
											
											<div class="alert alert-warning">
												<span>⚠️ {$t('itinerary.item_not_found')} (ID: {item.object_id})</span>
											</div>
										{/if}
									</div>
								{/each}
							</div>
						{/if}

{#if postTimelineLodging?.resolvedObject && !shouldCollapseBoundaryLodging}
							<div class="mt-3">
								{#if endBoundaryConnector}
									<div
										class="mb-2 rounded-lg border border-base-300 bg-base-200/60 px-3 py-2 text-xs"
									>
										{#if endBoundaryConnector.unavailable}
											<div class="flex items-center gap-2 flex-wrap text-base-content/80">
												<span class="inline-flex items-center gap-1 font-medium">
													<LocationMarker class="w-3.5 h-3.5" />
													{endBoundaryConnector.durationLabel}
												</span>
												<span class="text-base-content/40">•</span>
												{#if endBoundaryDirectionsUrl}
													<a
														href={endBoundaryDirectionsUrl}
														target="_blank"
														rel="noopener noreferrer"
														class="inline-flex items-center gap-1 text-primary/80 font-medium underline underline-offset-2"
													>
														<LocationMarker class="w-3.5 h-3.5" />
														{getI18nText('itinerary.directions', 'Directions')}
													</a>
												{/if}
											</div>
										{:else}
											<div class="flex items-center gap-2 flex-wrap text-base-content">
												<span class="inline-flex items-center gap-1 font-medium">
													{#if endBoundaryConnector.mode === 'driving'}
														<Car class="w-3.5 h-3.5" />
													{:else}
														<Walk class="w-3.5 h-3.5" />
													{/if}
													{endBoundaryConnector.durationLabel}
												</span>
												<span class="text-base-content/50">•</span>
												<span class="font-medium">{endBoundaryConnector.distanceLabel}</span>
												{#if endBoundaryDirectionsUrl}
													<span class="text-base-content/50">•</span>
													<a
														href={endBoundaryDirectionsUrl}
														target="_blank"
														rel="noopener noreferrer"
														class="inline-flex items-center gap-1 text-primary font-medium underline underline-offset-2"
													>
														<LocationMarker class="w-3.5 h-3.5" />
														{getI18nText('itinerary.directions', 'Directions')}
													</a>
												{/if}
											</div>
										{/if}
									</div>
								{/if}

<LodgingCard
									lodging={postTimelineLodging.resolvedObject}
									{user}
									{collection}
									itineraryItem={postTimelineLodging}
									showImage={false}
									compact={true}
									on:delete={handleItemDelete}
									on:removeFromItinerary={handleRemoveItineraryItem}
									on:edit={handleEditLodging}
									on:moveToGlobal={(e) => moveItemToGlobal(e.detail.type, e.detail.id)}
									on:changeDay={(e) =>
										handleOpenDayPickerForItem(
											e.detail.type,
											e.detail.item,
											e.detail.forcePicker,
											day.date
										)}
								/>
							</div>
						{/if}

{#if canModify}
							<div class="mt-4 pt-4 border-t border-base-300 border-dashed">
								<div class="flex items-center justify-end gap-3 flex-wrap">
									<div class="dropdown dropdown-end z-30">
										<button
											type="button"
											class="btn btn-sm btn-outline"
											aria-haspopup="menu"
											aria-expanded="false"
										>
											<Plus class="w-4 h-4" />
											{$t('adventures.add')}
										</button>
										<ul
											class="dropdown-content menu p-2 shadow bg-base-300 rounded-box w-56"
											role="menu"
										>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														linkModalTargetDate = day.date;
														linkModalDisplayDate = day.displayDate;
														isItineraryLinkModalOpen = true;
													}}
												>
													{$t('itinerary.link_existing_item')}
												</button>
											</li>
											<li class="menu-title">{$t('adventures.create_new')}</li>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														pendingAddDate = day.date;
														locationToEdit = null;
														locationBeingUpdated = null;
														isLocationModalOpen = true;
													}}
												>
													{$t('locations.location')}
												</button>
											</li>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														pendingAddDate = day.date;
														pendingLodgingAddDate = day.date;
														lodgingToEdit = null;
														lodgingBeingUpdated = null;
														isLodgingModalOpen = true;
													}}
												>
													{$t('adventures.lodging')}
												</button>
											</li>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														pendingAddDate = day.date;
														isTransportationModalOpen = true;
													}}
												>
													{$t('adventures.transportation')}
												</button>
											</li>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														pendingAddDate = day.date;
														isNoteModalOpen = true;
													}}
												>
													{$t('adventures.note')}
												</button>
											</li>
											<li>
												<button
													type="button"
													role="menuitem"
													on:click={() => {
														pendingAddDate = day.date;
														isChecklistModalOpen = true;
													}}
												>
													{$t('adventures.checklist')}
												</button>
											</li>
										</ul>
									</div>
								</div>
							</div>
						{/if}
					</div>

{#if shouldShowOvernightSummary(day) || day.globalDatedItems.length > 0}
						<div class="mt-4 pt-4 border-t border-base-300 border-dashed">
							<div class="flex flex-wrap gap-6 items-start">
								{#if shouldShowOvernightSummary(day)}
									<div class="space-y-2 min-w-[240px] flex-1">
										<div class="flex items-center gap-2 mb-1 opacity-70">
											<Bed class="w-4 h-4" />
											<span class="text-sm font-medium">{$t('itinerary.staying_overnight')}</span>
										</div>
										<div class="space-y-2">
											{#each day.overnightLodging as lodging}
												{@const checkOut = lodging.check_out
													? DateTime.fromISO(lodging.check_out.split('T')[0]).toFormat('LLL d')
													: null}
												<div
													class="flex items-center gap-3 bg-base-100 rounded-lg px-4 py-3 border border-base-300"
												>
													<div
														class="flex items-center justify-center w-8 h-8 rounded-full bg-info/20 text-info"
													>
														<Bed class="w-4 h-4" />
													</div>
													<div class="flex-1 min-w-0">
														<a
															href={`/lodging/${lodging.id}`}
															class="hover:text-primary transition-colors duration-200 line-clamp-2 text-md font-semibold"
														>
															{lodging.name}
														</a>
														{#if lodging.location}
															<p class="text-xs opacity-60 truncate">{lodging.location}</p>
														{/if}
													</div>
													{#if checkOut}
														<div class="badge badge-ghost badge-sm">
															{$t('adventures.check_out')}: {checkOut}
														</div>
													{/if}
												</div>
											{/each}
										</div>
									</div>
								{/if}

{#if day.globalDatedItems.length > 0}
									<div class="space-y-2 min-w-[220px] flex-1">
										<div class="flex items-center gap-2 mb-1 opacity-70">
											<Globe class="w-4 h-4" />
											<span class="text-sm font-medium"
												>{$t('itinerary.trip_context') || 'Trip Context'}</span
											>
										</div>
										<div class="space-y-2">
											{#each day.globalDatedItems as globalItem (globalItem.id)}
												{@const type = globalItem.item?.type || ''}
												{@const obj = globalItem.resolvedObject}
												{@const name = obj?.name || globalItem.item?.type || 'Item'}
												{@const secondary =
													type === 'location'
														? obj?.location
														: type === 'transportation'
															? obj?.to_location || obj?.from_location
															: type === 'lodging'
																? obj?.location
																: type === 'note' || type === 'checklist'
																	? obj?.name
																	: null}
												<div
													class="flex items-center gap-3 bg-base-100 rounded-lg px-4 py-3 border border-base-300"
												>
													<div
														class="flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content"
													>
														{#if type === 'lodging'}
															<Bed class="w-4 h-4" />
														{:else if type === 'location'}
															{#if obj?.category?.icon}
																<span class="text-lg">{obj.category.icon}</span>
															{:else}
																<LocationMarker class="w-4 h-4" />
															{/if}
														{:else if type === 'transportation'}
															<Car class="w-4 h-4" />
														{:else}
															<Info class="w-4 h-4" />
														{/if}
													</div>
													<div class="flex-1 min-w-0">
														{#if type === 'location' && obj?.id}
															<a
																href={`/locations/${obj.id}`}
																class="hover:text-primary transition-colors text-md font-semibold line-clamp-2 block"
																>{name}</a
															>
														{:else if type === 'lodging' && obj?.id}
															<a
																href={`/lodging/${obj.id}`}
																class="hover:text-primary transition-colors text-md font-semibold line-clamp-2 block"
																>{name}</a
															>
														{:else if type === 'transportation' && obj?.id}
															<a
																href={`/transportations/${obj.id}`}
																class="hover:text-primary transition-colors text-md font-semibold line-clamp-2 block"
																>{name}</a
															>
														{:else}
															<p class="text-md font-semibold line-clamp-2">{name}</p>
														{/if}
														{#if secondary}
															<p class="text-xs opacity-60 truncate">{secondary}</p>
														{/if}
													</div>
												</div>
											{/each}
										</div>
									</div>
								{/if}
							</div>
						</div>
					{/if}
				</div>
			</div>
		{/each}

{#if unscheduledItems.length > 0}
			<div class="card bg-base-200 shadow-xl border-2 border-dashed border-base-300">
				<div class="card-body">
					
					<div class="flex items-center gap-3 mb-4 pb-4 border-b border-base-300">
						<div class="w-6 h-6 rounded-full border-2 border-dashed border-base-content/30"></div>
						<h3 class="text-xl font-bold opacity-70">{$t('itinerary.unscheduled_items')}</h3>
						<div class="badge badge-ghost ml-auto">
							{unscheduledItems.length}
							{unscheduledItems.length === 1 ? $t('checklist.item') : $t('checklist.items')}
						</div>
					</div>

<p class="text-sm opacity-70 mb-4">
						{$t('itinerary.unscheduled_items_desc')}
					</p>

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
						{#each unscheduledItems as { type, item }}
							<div class="relative group opacity-60 hover:opacity-100 transition-opacity h-full">
								
								{#if canModify}
									<div
										class="absolute left-2 top-2 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
									>
										<div
											class="join bg-base-100/80 rounded-md p-1 shadow-sm backdrop-blur-sm border border-base-300"
										>
											<button
												aria-label={$t('itinerary.add_to_day')}
												class="btn btn-circle btn-xs btn-primary join-item shadow-sm"
												title={$t('itinerary.add_to_day')}
												on:click={() => handleOpenDayPickerForItem(type, item)}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													class="h-4 w-4"
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
												>
													<path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M12 4v16m8-8H4"
													/>
												</svg>
											</button>
											<button
												aria-label={$t('itinerary.add_to_trip_context')}
												class="btn btn-circle btn-xs btn-outline join-item shadow-sm"
												title={$t('itinerary.add_to_trip_context')}
												on:click={() => addGlobalItineraryItemForObject(type, item.id)}
											>
												<svg
													xmlns="http://www.w3.org/2000/svg"
													class="h-4 w-4"
													fill="none"
													viewBox="0 0 24 24"
													stroke="currentColor"
													><path
														stroke-linecap="round"
														stroke-linejoin="round"
														stroke-width="2"
														d="M8 17l4 4 4-4m-4-13v17"
													/></svg
												>
											</button>
										</div>
									</div>
								{/if}

{#if type === 'location'}
									<LocationCard
										adventure={item}
										on:edit={handleEditLocation}
										on:delete={handleItemDelete}
										on:duplicate={handleDuplicateLocation}
										{user}
										{collection}
										compact={true}
										showImage={false}
									/>
								{:else if type === 'transportation'}
									<TransportationCard
										transportation={item}
										{user}
										{collection}
										readOnly={!canModify}
										compact={true}
										showImage={false}
										on:delete={handleItemDelete}
										on:edit={handleEditTransportation}
									/>
								{:else if type === 'lodging'}
									<LodgingCard
										lodging={item}
										{user}
										{collection}
										showImage={false}
										compact={true}
										on:delete={handleItemDelete}
										on:edit={handleEditLodging}
									/>
								{:else if type === 'note'}
									<NoteCard
										note={item}
										{user}
										{collection}
										on:delete={handleItemDelete}
										on:edit={handleEditNote}
									/>
								{:else if type === 'checklist'}
									<ChecklistCard
										checklist={item}
										{user}
										{collection}
										on:delete={handleItemDelete}
										on:edit={handleEditChecklist}
									/>
								{/if}
							</div>
						{/each}
					</div>
				</div>
			</div>
		{/if}
	</div>
{/if}

{$t('itinerary.auto_generate_itinerary')}

{$t('itinerary.no_itinerary_yet')}

{$t('itinerary.trip_context') || 'Trip Context'}

{day.displayDate}