+ {/* Header */}
+
+
+
+
+
+ {/* Scrollable content */}
+
+
+
+
+
+
+ {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
+
+ {formattedDate && {formattedDate}
}
+
+
+ {/* ── Weather ── */}
+ {day.date && lat && lng && (
+ loading ? (
+
+
+
+
+ ) : weather ? (
+
+ {/* Summary row */}
+
+ ) : (
+
+
+
+ {/* Chips row */}
+
+
+
+
+ {weather.type === 'climate' ? 'Ø ' : ''}{cTemp(weather.temp, isFahrenheit)}{unit}
+
+ {weather.temp_max != null && (
+
+ {cTemp(weather.temp_min, isFahrenheit)}° / {cTemp(weather.temp_max, isFahrenheit)}°
+
+ )}
+ {weather.description && (
+ {weather.description}
+ )}
+
+
+ {weather.precipitation_probability_max != null && (
+
+
+ {/* Hourly scroll */}
+ {weather.hourly?.length > 0 && (
+
+
+ )}
+
+ {weather.type === 'climate' && (
+
+ {weather.hourly.filter((_, i) => i % 2 === 0).map(h => (
+
+ 50 ? 'rgba(59,130,246,0.07)' : 'transparent',
+ }}>
+ {String(h.hour).padStart(2, '0')}
+
+ ))}
+ {t('day.climateHint')}
+ )}
+ {t('day.noWeather')}
+ )
+ )}
+
+ {/* Divider */}
+ {day.date && lat && lng && }
+
+ {/* ── Reservations for this day's assignments ── */}
+ {(() => {
+ const dayAssignments = assignments[String(day.id)] || []
+ const dayReservations = reservations.filter(r => dayAssignments.some(a => a.id === r.assignment_id))
+ if (dayReservations.length === 0) return null
+ return (
+
+
+ )
+ })()}
+
+ {/* Divider before accommodation */}
+
+
+ {/* ── Accommodation ── */}
+ {t('day.reservations')}
+
+ {dayReservations.map(r => {
+ const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
+ const confirmed = r.status === 'confirmed'
+ return (
+
+
+ {(() => { const TIcon = RES_TYPE_ICONS[r.type] || FileText; return
+ )
+ })}
+
+ {r.title}
+ {linkedAssignment?.place && · {linkedAssignment.place.name}}
+
+ {r.reservation_time && (
+
+ {new Date(r.reservation_time).toLocaleTimeString(language === 'de' ? 'de-DE' : 'en-US', { hour: '2-digit', minute: '2-digit', hour12: is12h })}
+
+ )}
+
+
+ {t('day.accommodation')}
+
+ {accommodation ? (
+
+ {/* Hotel header */}
+
+ ) : (
+
+ )}
+
+ {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
+ {showHotelPicker && ReactDOM.createPortal(
+
+
+ {/* Details row */}
+ {/* Details grid */}
+
+ {accommodation.place_image ? (
+ 
+ ) : (
+
+
+
+
+ {accommodation.place_name}
+ {accommodation.place_address && {accommodation.place_address}
}
+
+ {accommodation.check_in && (
+
+
+
+ )}
+ {accommodation.check_out && (
+ {fmtTime(accommodation.check_in)}
+
+
+
+
+ )}
+ {accommodation.confirmation && (
+ {fmtTime(accommodation.check_out)}
+
+
+
+
+ )}
+
+ {accommodation.confirmation}
+
+
+ setShowHotelPicker(false)}>
+
,
+ document.body
+ )}
+ e.stopPropagation()} style={{
+ width: '100%', maxWidth: 900, borderRadius: 16, overflow: 'hidden',
+ background: 'var(--bg-card)', boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
+ ...font,
+ }}>
+ {/* Popup Header */}
+
+
+
+
+ {/* Day Range (hidden in edit mode) */}
+ {showHotelPicker !== 'edit' &&
+
}
+
+ {/* Check-in / Check-out / Confirmation */}
+ {t('day.hotelDayRange')}
+
+
+
+ setHotelDayRange(prev => ({ start: v, end: Math.max(v, prev.end) }))}
+ options={days.map((d, i) => ({
+ value: d.id,
+ label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+ }))}
+ size="sm"
+ />
+
+ →
+
+ setHotelDayRange(prev => ({ start: Math.min(prev.start, v), end: v }))}
+ options={days.map((d, i) => ({
+ value: d.id,
+ label: `${d.title || t('planner.dayN', { n: i + 1 })}${d.date ? ` — ${new Date(d.date + 'T00:00:00').toLocaleDateString(language === 'de' ? 'de-DE' : 'en-US', { day: 'numeric', month: 'short' })}` : ''}`,
+ }))}
+ size="sm"
+ />
+
+
+
+
+
+ {/* Edit mode: save button instead of place list */}
+ {showHotelPicker === 'edit' ? (
+
+
+ setHotelForm(f => ({ ...f, check_in: v }))} placeholder="14:00" />
+
+
+
+ setHotelForm(f => ({ ...f, check_out: v }))} placeholder="11:00" />
+
+
+
+ setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
+ placeholder="ABC-12345" style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit', boxSizing: 'border-box', height: 38 }} />
+
+
+
+
+ ) : <>
+
+ {/* Category Filter */}
+ {categories.length > 0 && (
+
+
+
+ {categories.map(c => (
+
+ ))}
+
+ )}
+
+ {/* Place List */}
+
+ {(() => {
+ const filtered = hotelCategoryFilter ? places.filter(p => p.category_id === hotelCategoryFilter) : places
+ return filtered.length === 0 ? (
+
+ }
+ {t('day.noPlacesForHotel')}
+ ) : filtered.map(p => (
+
+ ))
+ })()}
+