{{- /* Places overview page body */ -}}
<div class="grid grid-cols-1 lg:grid-cols-7 gap-8">
	{{- /* Main content - Places list */ -}}
	<div class="lg:col-span-5">
		{{- /* Places list */ -}}
		{{ if .model.Places }}
			<div class="bg-white mt-6">
				{{ range $placeID := .model.Sorted }}
					{{ $place := index $.model.Places $placeID }}
					{{ $pieceCount := index $.model.PlacePieceCounts $placeID }}
					{{ $geonames := GetGeonames $place.Geo }}
					{{ $mainPlaceName := "" }}
					{{ if $place.Names }}
						{{ $mainPlaceName = index $place.Names 0 }}
					{{ else }}
						{{ $mainPlaceName = $place.ID }}
					{{ end }}
					{{ $modernName := GetModernPlaceName $place.Geo $mainPlaceName }}
					<place-accordion class="border-b border-slate-100 last:border-b-0" data-place-id="{{ $place.ID }}" data-place-name="{{ $mainPlaceName }}" data-modern-name="{{ $modernName }}">
						<div class="block p-4 hover:bg-slate-50 transition-colors duration-200 cursor-pointer">
							<div class="flex items-start justify-between gap-2">
								<div class="flex-1 min-w-0">
									<h3 class="font-bold text-slate-800 mb-1 truncate">
										{{ if $place.Names }}
											{{ index $place.Names 0 }}
										{{ else }}
											{{ $place.ID }}
										{{ end }}
									</h3>
									{{ if ne $geonames nil }}
										{{ $fullInfo := GetFullPlaceInfo $place.Geo $mainPlaceName }}
										{{ if ne $fullInfo "" }}
											<p class="text-sm text-slate-600 mb-1 truncate">
												<i class="ri-map-pin-line mr-1"></i>{{ $fullInfo }}
											</p>
										{{ end }}
									{{ else if $place.Geo }}
										<p class="text-sm text-slate-600 truncate">
											<i class="ri-map-pin-line mr-1"></i>Geonames verfügbar
										</p>
									{{ end }}
								</div>
								<div class="flex-shrink-0 flex items-center gap-2">
									<!-- External links -->
									{{ if ne $geonames nil }}
										{{ if ne $geonames.WikipediaURL "" }}
											<a href="https://{{ $geonames.WikipediaURL }}" target="_blank" class="hover:opacity-80 transition-opacity no-underline" title="Wikipedia" onclick="event.stopPropagation()">
												<img src="/assets/wikipedia.png" alt="Wikipedia" class="w-5 h-5">
											</a>
										{{ end }}
										{{ if and (ne $geonames.Lat "") (ne $geonames.Lng "") }}
											<a href="https://www.openstreetmap.org/?mlat={{ $geonames.Lat }}&mlon={{ $geonames.Lng }}&zoom=12" target="_blank" class="hover:opacity-80 transition-opacity no-underline" title="OpenStreetMap" onclick="event.stopPropagation()">
												<i class="ri-map-pin-line text-base text-green-600"></i>
											</a>
										{{ end }}
									{{ end }}
									{{ if $place.Geo }}
										<a href="{{ $place.Geo }}" target="_blank" class="hover:opacity-80 transition-opacity no-underline" title="Geonames" onclick="event.stopPropagation()">
											<i class="ri-global-line text-base text-blue-600"></i>
										</a>
									{{ end }}
									<span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-slate-100 text-slate-700 rounded">
										{{ $pieceCount }}
									</span>
								</div>
							</div>
						</div>
					</place-accordion>
				{{ end }}
			</div>
		{{ else }}
			<div class="bg-slate-50 rounded-lg p-8 text-center mt-6">
				<div class="text-slate-500 mb-2">
					<svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
					</svg>
				</div>
				<h3 class="text-lg font-medium text-slate-900 mb-2">Keine Orte gefunden</h3>
				<p class="text-slate-600">Es wurden keine Orte in der Datenbank gefunden.</p>
			</div>
		{{ end }}
	</div>

	{{- /* Sidebar */ -}}
	<div class="lg:col-span-2 sticky top-0 self-start">
		{{- /* Top Section - Title, Description, Search */ -}}
		<div class="bg-slate-50 p-6 border-b border-slate-200 filter-sidebar">
			<h1 class="text-2xl font-bold text-slate-800 mb-2">Orte</h1>
			<p class="text-slate-600 mb-6">
				Verzeichnis aller in der Zeitung erwähnten Orte und Lokalitäten
			</p>

			{{- /* Search Filter */ -}}
			<div class="flex items-center gap-4">
				<div class="flex-1">
					<generic-filter
						placeholder="Ortsnamen eingeben..."
						item-selector="[data-place-name]"
						search-attributes="data-place-name,data-modern-name"
						count-selector="[data-filter-count]"
						item-type="Orte"
						item-type-singular="Ort">
					</generic-filter>
				</div>
				<div class="flex items-center text-sm font-bold text-slate-700 whitespace-nowrap" data-filter-count></div>
			</div>
		</div>

		{{- /* Bottom Section - Map */ -}}
		<div class="bg-white p-6">
			<places-map data-places="{{ .model.PlacesJSON }}" class="w-full"></places-map>
		</div>

	</div>
</div>