Filter worldtravel by subregion

frontend/src/routes/worldtravel/+page.svelte

@@ -10,8 +10,15 @@
 
 	let filteredCountries: Country[] = [];
 	const allCountries: Country[] = data.props?.countries || [];
+	let worldSubregions: string[] = [];
+
+	worldSubregions = [...new Set(allCountries.map((country) => country.subregion))];
+	// remove blank subregions
+	worldSubregions = worldSubregions.filter((subregion) => subregion !== '');
+	console.log(worldSubregions);
 
 	let filterOption: string = 'all';
+	let subRegionOption: string = '';
 
 	$: {
 		if (searchQuery === '') {
@@ -35,6 +42,12 @@
 		} else {
 			filteredCountries = filteredCountries;
 		}
+
+		if (subRegionOption !== '') {
+			filteredCountries = filteredCountries.filter(
+				(country) => country.subregion === subRegionOption
+			);
+		}
 	}
 </script>
 
@@ -43,8 +56,8 @@
 <p class="text-center mb-4">
 	{filteredCountries.length} countries found
 </p>
-
-<div class="join flex items-center justify-center mb-4">
+<div class="flex items-center justify-center mb-4">
+	<div class="join">
 		<input
 			class="join-item btn"
 			type="radio"
@@ -74,6 +87,13 @@
 			aria-label="Not Visited"
 			on:click={() => (filterOption = 'not')}
 		/>
+	</div>
+	<select class="select select-bordered w-full max-w-xs ml-4" bind:value={subRegionOption}>
+		<option value="">All Subregions</option>
+		{#each worldSubregions as subregion}
+			<option value={subregion}>{subregion}</option>
+		{/each}
+	</select>
 </div>
 
 <div class="flex items-center justify-center mb-4">
@@ -98,6 +118,10 @@
 	{/each}
 </div>
 
+{#if filteredCountries.length === 0}
+	<p class="text-center font-bold text-2xl mt-12">No countries found</p>
+{/if}
+
 <svelte:head>
 	<title>Countries | World Travel</title>
 	<meta name="description" content="Explore the world and add countries to your visited list!" />

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -1,31 +1,22 @@
 <script lang="ts">
 	import RegionCard from '$lib/components/RegionCard.svelte';
 	import type { Region, VisitedRegion } from '$lib/types';
-	// import {
-	// 	DefaultMarker,
-	// 	MapEvents,
-	// 	MapLibre,
-	// 	Popup,
-	// 	Marker,
-	// 	GeoJSON,
-	// 	LineLayer,
-	// 	FillLayer,
-	// 	SymbolLayer
-	// } from 'svelte-maplibre';
 	import type { PageData } from './$types';
 	export let data: PageData;
+
 	let regions: Region[] = data.props?.regions || [];
 	let visitedRegions: VisitedRegion[] = data.props?.visitedRegions || [];
+
 	const country = data.props?.country || null;
 	console.log(data);
 
-	let numRegions: number = regions.length;
+	let numRegions: number = country?.num_regions || 0;
+	let numVisitedRegions: number = country?.num_visits || 0;
 
 	visitedRegions = visitedRegions.filter(
 		(visitedRegion, index, self) =>
 			index === self.findIndex((t) => t.region === visitedRegion.region)
 	);
-	let numVisitedRegions: number = visitedRegions.length;
 </script>
 
 <h1 class="text-center font-bold text-4xl mb-4">Regions in {country?.name}</h1>
@@ -58,23 +49,6 @@
 	{/each}
 </div>
 
-<!-- {#if data.props && data.props.regions}
-	<MapLibre
-		style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
-		class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
-		standardControls
-	>
-		{#each data.props.regions as marker}
-			<DefaultMarker lngLat={[marker.longitude, marker.latitude]}>
-				<Popup openOn="click" offset={[0, -10]}>
-					<div class="text-lg text-black font-bold">{marker.name}</div>
-					<p class="font-semibold text-black text-md">{marker.id}</p>
-				</Popup>
-			</DefaultMarker>
-		{/each}
-	</MapLibre>
-{/if} -->
-
 <svelte:head>
 	<title
 		>{data.props && data.props.country ? `Regions in ${data.props.country.name}` : 'Regions'}</title