From 42be74328c8920397084427e6fdc5ee2495ea973 Mon Sep 17 00:00:00 2001
From: default <adithcool.5@gmail.com>
Date: Thu, 5 Mar 2026 20:47:28 +0000
Subject: [PATCH] SAR Search Pattern Update

---
 README.md                                     |    2 +-
 server/routes/simulations.go                  |    5 +-
 src/lib/SimulationSidebar.svelte              |    1 +
 src/lib/SimulationTable.svelte                |  102 +-
 src/lib/simulationState.svelte.ts             |    1 +
 src/routes/simulation/[id]/+page.svelte       | 1062 ++++++++---------
 src/routes/simulation/[id]/print/+page.svelte |  620 +++++-----
 7 files changed, 865 insertions(+), 928 deletions(-)

diff --git a/README.md b/README.md
index c7f4366..803ba51 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ Returns a JSON array of all indexed simulations, including their ID, name, creat
 
 ### `POST /api/simulations/create`
 Creates a new simulation entry.
-- **Request Body:** JSON object containing the combined configurations (e.g., `search`, `uav`, `ugv`). The configuration *must* contain at least one search pattern definition (either `spiral`, `lawnmower`, or `levy`) inside the JSON.
+- **Request Body:** JSON object containing the combined configurations (e.g., `search`, `uav`, `ugv`). The configuration *must* contain at least one search pattern definition (either `spiral`, `lawnmower`, `levy`, or `sar`) inside the JSON.
 - **Behavior:** Checks if an identical config exists. If so, it returns the existing simulation ID/Name for overwriting. If not, it allocates a new `simulation_X` incrementally, inserts it into the database, builds the file directory in `../results`, and returns the new ID/Name. Returns `400 Bad Request` if payload is not valid JSON or lacks a known search pattern.
 - **Response:** JSON object `{"id": <int>, "name": <string>}`
 
diff --git a/server/routes/simulations.go b/server/routes/simulations.go
index a9ca387..ed148e8 100644
--- a/server/routes/simulations.go
+++ b/server/routes/simulations.go
@@ -48,12 +48,15 @@ func (rt *Router) CreateSimulation(w http.ResponseWriter, r *http.Request) {
 				if _, ok := searchMap["levy"]; ok {
 					hasPattern = true
 				}
+				if _, ok := searchMap["sar"]; ok {
+					hasPattern = true
+				}
 			}
 		}
 	}
 
 	if !hasPattern {
-		http.Error(w, "Simulation configuration must include a search pattern (spiral, lawnmower, or levy)", http.StatusBadRequest)
+		http.Error(w, "Simulation configuration must include a search pattern (spiral, lawnmower, levy, or sar)", http.StatusBadRequest)
 		return
 	}
 
diff --git a/src/lib/SimulationSidebar.svelte b/src/lib/SimulationSidebar.svelte
index 83f0709..96410d5 100644
--- a/src/lib/SimulationSidebar.svelte
+++ b/src/lib/SimulationSidebar.svelte
@@ -61,6 +61,7 @@
                 <option value="spiral">Spiral</option>
                 <option value="lawnmower">Lawnmower</option>
                 <option value="levy">Levy</option>
+                <option value="sar">SAR</option>
             </select>
         </div>
     </details>
diff --git a/src/lib/SimulationTable.svelte b/src/lib/SimulationTable.svelte
index fb87a17..2da412e 100644
--- a/src/lib/SimulationTable.svelte
+++ b/src/lib/SimulationTable.svelte
@@ -1,57 +1,59 @@
 <script lang="ts">
-    import {
-        parseConfig,
-        formatDate,
-        type SimulationState,
-    } from "./simulationState.svelte";
-    import { formatTime } from "$lib/ts/utils";
+	import {
+		parseConfig,
+		formatDate,
+		type SimulationState,
+	} from "./simulationState.svelte";
+	import { formatTime } from "$lib/ts/utils";
 
-    let { state }: { state: SimulationState } = $props();
+	let { state }: { state: SimulationState } = $props();
 </script>
 
 <main class="table-content">
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>Sim Name</th>
-                <th>Search Pattern</th>
-                <th>Search Time</th>
-                <th>Total Time</th>
-                <th>Date Run</th>
-                <th>Link</th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each state.paginatedSimulations as sim}
-                <tr>
-                    <td>{sim.id}</td>
-                    <td>{sim.name}</td>
-                    <td style="text-transform: capitalize;"
-                        >{parseConfig(sim.config).pattern || "Unknown"}</td
-                    >
-                    <td>{formatTime(sim.search_time || NaN)}</td>
-                    <td>{formatTime(sim.total_time || NaN)}</td>
-                    <td>{formatDate(sim.created_at)}</td>
-                    <td><a href={`/simulation/${sim.id}`}>View Details</a></td>
-                </tr>
-            {/each}
-        </tbody>
-    </table>
+	<table>
+		<thead>
+			<tr>
+				<th>ID</th>
+				<th>Sim Name</th>
+				<th>Search Pattern</th>
+				<th>Search Time</th>
+				<th>Total Time</th>
+				<th>Date Run</th>
+				<th>Link</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each state.paginatedSimulations as sim}
+				<tr>
+					<td>{sim.id}</td>
+					<td>{sim.name}</td>
+					<td style="text-transform: capitalize;"
+						>{parseConfig(sim.config).pattern === "sar"
+							? "SAR"
+							: parseConfig(sim.config).pattern || "Unknown"}</td
+					>
+					<td>{formatTime(sim.search_time || NaN)}</td>
+					<td>{formatTime(sim.total_time || NaN)}</td>
+					<td>{formatDate(sim.created_at)}</td>
+					<td><a href={`/simulation/${sim.id}`}>View Details</a></td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
 
-    <div class="pagination">
-        <button
-            onclick={() => state.goToPage(state.currentPage - 1)}
-            disabled={state.currentPage === 1}
-        >
-            Previous
-        </button>
-        <span>Page {state.currentPage} of {state.totalPages}</span>
-        <button
-            onclick={() => state.goToPage(state.currentPage + 1)}
-            disabled={state.currentPage === state.totalPages}
-        >
-            Next
-        </button>
-    </div>
+	<div class="pagination">
+		<button
+			onclick={() => state.goToPage(state.currentPage - 1)}
+			disabled={state.currentPage === 1}
+		>
+			Previous
+		</button>
+		<span>Page {state.currentPage} of {state.totalPages}</span>
+		<button
+			onclick={() => state.goToPage(state.currentPage + 1)}
+			disabled={state.currentPage === state.totalPages}
+		>
+			Next
+		</button>
+	</div>
 </main>
diff --git a/src/lib/simulationState.svelte.ts b/src/lib/simulationState.svelte.ts
index 40021e0..4a4126f 100644
--- a/src/lib/simulationState.svelte.ts
+++ b/src/lib/simulationState.svelte.ts
@@ -29,6 +29,7 @@ export function parseConfig(config: string) {
         if (searchObj.spiral) pattern = "spiral";
         else if (searchObj.lawnmower) pattern = "lawnmower";
         else if (searchObj.levy) pattern = "levy";
+        else if (searchObj.sar) pattern = "sar";
 
         return {
             altitude: searchObj.altitude != null ? parseFloat(searchObj.altitude) : null,
diff --git a/src/routes/simulation/[id]/+page.svelte b/src/routes/simulation/[id]/+page.svelte
index 4b3c1ff..768545b 100644
--- a/src/routes/simulation/[id]/+page.svelte
+++ b/src/routes/simulation/[id]/+page.svelte
@@ -1,608 +1,562 @@
 <script lang="ts">
-    import "$lib/css/simulation.css";
+	import "$lib/css/simulation.css";
 
-    import { onMount } from "svelte";
-    import MediaItem from "$lib/MediaItem.svelte";
-    import LogViewer from "$lib/LogViewer.svelte";
-    import ImageCarousel from "$lib/ImageCarousel.svelte";
-    import DualVideoViewer from "$lib/DualVideoViewer.svelte";
-    import { formatDate } from "$lib/simulationState.svelte";
+	import { onMount } from "svelte";
+	import MediaItem from "$lib/MediaItem.svelte";
+	import LogViewer from "$lib/LogViewer.svelte";
+	import ImageCarousel from "$lib/ImageCarousel.svelte";
+	import DualVideoViewer from "$lib/DualVideoViewer.svelte";
+	import { formatDate } from "$lib/simulationState.svelte";
 
-    import {
-        type SimulationDetails,
-        formatBytes,
-        flattenJSON,
-        isImage,
-        isVideo,
-        getResourceUrl,
-        formatTime,
-    } from "$lib/ts/utils";
+	import {
+		type SimulationDetails,
+		formatBytes,
+		flattenJSON,
+		isImage,
+		isVideo,
+		getResourceUrl,
+		formatTime,
+	} from "$lib/ts/utils";
 
-    let { data } = $props();
-    let id = $derived(data.id);
+	let { data } = $props();
+	let id = $derived(data.id);
 
-    let simulation = $state<SimulationDetails | null>(null);
-    let error = $state("");
+	let simulation = $state<SimulationDetails | null>(null);
+	let error = $state("");
 
-    let parsedConfig: { key: string; value: string }[] | null = $derived.by(
-        () => {
-            if (!simulation?.config) return null;
-            try {
-                let cleanedConfig = simulation.config.replace(
-                    /"([^"]+)\.yaml"\s*:/g,
-                    '"$1":',
-                );
-                return flattenJSON(JSON.parse(cleanedConfig));
-            } catch {
-                return null;
-            }
-        },
-    );
+	let parsedConfig: { key: string; value: string }[] | null = $derived.by(
+		() => {
+			if (!simulation?.config) return null;
+			try {
+				let cleanedConfig = simulation.config.replace(
+					/"([^"]+)\.yaml"\s*:/g,
+					'"$1":',
+				);
+				return flattenJSON(JSON.parse(cleanedConfig));
+			} catch {
+				return null;
+			}
+		},
+	);
 
-    let searchConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("search."))
-            .map((c) => ({ ...c, key: c.key.replace("search.", "") })),
-    );
-    let uavConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("uav."))
-            .map((c) => ({ ...c, key: c.key.replace("uav.", "") })),
-    );
-    let ugvConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("ugv."))
-            .map((c) => ({ ...c, key: c.key.replace("ugv.", "") })),
-    );
-    let otherConfig = $derived(
-        parsedConfig?.filter(
-            (c) =>
-                !c.key.startsWith("search.") &&
-                !c.key.startsWith("uav.") &&
-                !c.key.startsWith("ugv."),
-        ),
-    );
+	let searchConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("search."))
+			.map((c) => ({ ...c, key: c.key.replace("search.", "") })),
+	);
+	let uavConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("uav."))
+			.map((c) => ({ ...c, key: c.key.replace("uav.", "") })),
+	);
+	let ugvConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("ugv."))
+			.map((c) => ({ ...c, key: c.key.replace("ugv.", "") })),
+	);
+	let otherConfig = $derived(
+		parsedConfig?.filter(
+			(c) =>
+				!c.key.startsWith("search.") &&
+				!c.key.startsWith("uav.") &&
+				!c.key.startsWith("ugv."),
+		),
+	);
 
-    function groupConfig(data: { key: string; value: string }[] | undefined) {
-        if (!data) return {};
-        const groups: Record<string, { key: string; value: string }[]> = {
-            _general: [],
-        };
-        for (const item of data) {
-            const parts = item.key.split(".");
-            if (parts.length > 1) {
-                const groupName = parts[0];
-                const subKey = parts.slice(1).join(".");
-                if (!groups[groupName]) groups[groupName] = [];
-                groups[groupName].push({ key: subKey, value: item.value });
-            } else {
-                groups["_general"].push(item);
-            }
-        }
-        return groups;
-    }
+	function groupConfig(data: { key: string; value: string }[] | undefined) {
+		if (!data) return {};
+		const groups: Record<string, { key: string; value: string }[]> = {
+			_general: [],
+		};
+		for (const item of data) {
+			const parts = item.key.split(".");
+			if (parts.length > 1) {
+				const groupName = parts[0];
+				const subKey = parts.slice(1).join(".");
+				if (!groups[groupName]) groups[groupName] = [];
+				groups[groupName].push({ key: subKey, value: item.value });
+			} else {
+				groups["_general"].push(item);
+			}
+		}
+		return groups;
+	}
 
-    let flightPathVideo: string | undefined = $derived(
-        simulation && simulation.resources
-            ? simulation.resources.find(
-                  (res: string) => res.includes("flight_path") && isVideo(res),
-              )
-            : undefined,
-    );
+	let flightPathVideo: string | undefined = $derived(
+		simulation && simulation.resources
+			? simulation.resources.find(
+					(res: string) => res.includes("flight_path") && isVideo(res),
+				)
+			: undefined,
+	);
 
-    let gazeboVideo: string | undefined = $derived(
-        simulation && simulation.resources
-            ? simulation.resources.find(
-                  (res: string) => res.includes("gazebo") && isVideo(res),
-              )
-            : undefined,
-    );
+	let gazeboVideo: string | undefined = $derived(
+		simulation && simulation.resources
+			? simulation.resources.find(
+					(res: string) => res.includes("gazebo") && isVideo(res),
+				)
+			: undefined,
+	);
 
-    let uavCamera: string | undefined = $derived(
-        simulation && simulation.resources
-            ? simulation.resources.find(
-                  (res: string) =>
-                      res.includes("camera") &&
-                      !res.includes("ugv") &&
-                      isVideo(res),
-              )
-            : undefined,
-    );
+	let uavCamera: string | undefined = $derived(
+		simulation && simulation.resources
+			? simulation.resources.find(
+					(res: string) =>
+						res.includes("camera") && !res.includes("ugv") && isVideo(res),
+				)
+			: undefined,
+	);
 
-    let ugvCamera: string | undefined = $derived(
-        simulation && simulation.resources
-            ? simulation.resources.find(
-                  (res: string) => res.includes("ugv_camera") && isVideo(res),
-              )
-            : undefined,
-    );
+	let ugvCamera: string | undefined = $derived(
+		simulation && simulation.resources
+			? simulation.resources.find(
+					(res: string) => res.includes("ugv_camera") && isVideo(res),
+				)
+			: undefined,
+	);
 
-    let imagesList = $derived<string[]>(
-        simulation && simulation.resources
-            ? simulation.resources.filter(isImage)
-            : [],
-    );
-    let otherResourcesList = $derived<string[]>(
-        simulation && simulation.resources
-            ? simulation.resources.filter(
-                  (res: string) =>
-                      !isImage(res) &&
-                      res !== "log.txt" &&
-                      res !== flightPathVideo &&
-                      res !== gazeboVideo &&
-                      res !== uavCamera &&
-                      res !== ugvCamera,
-              )
-            : [],
-    );
+	let imagesList = $derived<string[]>(
+		simulation && simulation.resources
+			? simulation.resources.filter(isImage)
+			: [],
+	);
+	let otherResourcesList = $derived<string[]>(
+		simulation && simulation.resources
+			? simulation.resources.filter(
+					(res: string) =>
+						!isImage(res) &&
+						res !== "log.txt" &&
+						res !== flightPathVideo &&
+						res !== gazeboVideo &&
+						res !== uavCamera &&
+						res !== ugvCamera,
+				)
+			: [],
+	);
 
-    onMount(async () => {
-        try {
-            const res = await fetch(`/api/simulations/${id}`);
-            if (!res.ok) throw new Error("Failed to fetch simulation details");
-            simulation = await res.json();
-            newName = simulation!.name;
-            newCPU = simulation!.cpu_info || "";
-            newGPU = simulation!.gpu_info || "";
-            newRAM = simulation!.ram_info || "";
-        } catch (e: any) {
-            error = e.message;
-        }
-    });
+	onMount(async () => {
+		try {
+			const res = await fetch(`/api/simulations/${id}`);
+			if (!res.ok) throw new Error("Failed to fetch simulation details");
+			simulation = await res.json();
+			newName = simulation!.name;
+			newCPU = simulation!.cpu_info || "";
+			newGPU = simulation!.gpu_info || "";
+			newRAM = simulation!.ram_info || "";
+		} catch (e: any) {
+			error = e.message;
+		}
+	});
 
-    let isEditing = $state(false);
-    let newName = $state("");
-    let newCPU = $state("");
-    let newGPU = $state("");
-    let newRAM = $state("");
-    let uploadFiles = $state<FileList | null>(null);
-    let saveError = $state("");
-    let uploadProgress = $state(0);
-    let isUploading = $state(false);
+	let isEditing = $state(false);
+	let newName = $state("");
+	let newCPU = $state("");
+	let newGPU = $state("");
+	let newRAM = $state("");
+	let uploadFiles = $state<FileList | null>(null);
+	let saveError = $state("");
+	let uploadProgress = $state(0);
+	let isUploading = $state(false);
 
-    async function handleSave() {
-        if (!simulation) return;
-        saveError = "";
+	async function handleSave() {
+		if (!simulation) return;
+		saveError = "";
 
-        if (newName.trim() !== simulation.name) {
-            const renameRes = await fetch(`/api/simulations/${id}/rename`, {
-                method: "PUT",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ name: newName }),
-            });
+		if (newName.trim() !== simulation.name) {
+			const renameRes = await fetch(`/api/simulations/${id}/rename`, {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ name: newName }),
+			});
 
-            if (!renameRes.ok) {
-                const text = await renameRes.text();
-                saveError = text || "Failed to rename simulation.";
-                return;
-            }
+			if (!renameRes.ok) {
+				const text = await renameRes.text();
+				saveError = text || "Failed to rename simulation.";
+				return;
+			}
 
-            const renameData = await renameRes.json();
-            simulation.name = renameData.new_name;
-        }
+			const renameData = await renameRes.json();
+			simulation.name = renameData.new_name;
+		}
 
-        if (
-            newCPU !== (simulation.cpu_info || "") ||
-            newGPU !== (simulation.gpu_info || "") ||
-            newRAM !== (simulation.ram_info || "")
-        ) {
-            const hwRes = await fetch(`/api/simulations/${id}/hardware`, {
-                method: "PUT",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    cpu_info: newCPU,
-                    gpu_info: newGPU,
-                    ram_info: newRAM,
-                }),
-            });
+		if (
+			newCPU !== (simulation.cpu_info || "") ||
+			newGPU !== (simulation.gpu_info || "") ||
+			newRAM !== (simulation.ram_info || "")
+		) {
+			const hwRes = await fetch(`/api/simulations/${id}/hardware`, {
+				method: "PUT",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({
+					cpu_info: newCPU,
+					gpu_info: newGPU,
+					ram_info: newRAM,
+				}),
+			});
 
-            if (!hwRes.ok) {
-                const text = await hwRes.text();
-                saveError = text || "Failed to update hardware info.";
-                return;
-            }
+			if (!hwRes.ok) {
+				const text = await hwRes.text();
+				saveError = text || "Failed to update hardware info.";
+				return;
+			}
 
-            simulation.cpu_info = newCPU;
-            simulation.gpu_info = newGPU;
-            simulation.ram_info = newRAM;
-        }
+			simulation.cpu_info = newCPU;
+			simulation.gpu_info = newGPU;
+			simulation.ram_info = newRAM;
+		}
 
-        if (uploadFiles && uploadFiles.length > 0) {
-            isUploading = true;
-            for (let i = 0; i < uploadFiles.length; i++) {
-                const file = uploadFiles[i];
-                uploadProgress = 0;
+		if (uploadFiles && uploadFiles.length > 0) {
+			isUploading = true;
+			for (let i = 0; i < uploadFiles.length; i++) {
+				const file = uploadFiles[i];
+				uploadProgress = 0;
 
-                try {
-                    const upData: any = await new Promise((resolve, reject) => {
-                        const xhr = new XMLHttpRequest();
-                        xhr.open("POST", `/api/simulations/${id}/upload`);
+				try {
+					const upData: any = await new Promise((resolve, reject) => {
+						const xhr = new XMLHttpRequest();
+						xhr.open("POST", `/api/simulations/${id}/upload`);
 
-                        xhr.upload.onprogress = (event) => {
-                            if (event.lengthComputable) {
-                                uploadProgress = Math.round(
-                                    (event.loaded / event.total) * 100,
-                                );
-                            }
-                        };
+						xhr.upload.onprogress = (event) => {
+							if (event.lengthComputable) {
+								uploadProgress = Math.round((event.loaded / event.total) * 100);
+							}
+						};
 
-                        xhr.onload = () => {
-                            if (xhr.status >= 200 && xhr.status < 300) {
-                                resolve(JSON.parse(xhr.responseText));
-                            } else {
-                                reject(
-                                    xhr.responseText ||
-                                        `Failed to upload: ${file.name}`,
-                                );
-                            }
-                        };
+						xhr.onload = () => {
+							if (xhr.status >= 200 && xhr.status < 300) {
+								resolve(JSON.parse(xhr.responseText));
+							} else {
+								reject(xhr.responseText || `Failed to upload: ${file.name}`);
+							}
+						};
 
-                        xhr.onerror = () =>
-                            reject(`Network error uploading: ${file.name}`);
+						xhr.onerror = () => reject(`Network error uploading: ${file.name}`);
 
-                        const formData = new FormData();
-                        formData.append("file", file);
-                        xhr.send(formData);
-                    });
+						const formData = new FormData();
+						formData.append("file", file);
+						xhr.send(formData);
+					});
 
-                    if (!simulation.resources.includes(upData.filename)) {
-                        simulation.resources = [
-                            ...simulation.resources,
-                            upData.filename,
-                        ];
-                    }
-                } catch (err: any) {
-                    saveError = err.toString();
-                    isUploading = false;
-                    return;
-                }
-            }
-        }
+					if (!simulation.resources.includes(upData.filename)) {
+						simulation.resources = [...simulation.resources, upData.filename];
+					}
+				} catch (err: any) {
+					saveError = err.toString();
+					isUploading = false;
+					return;
+				}
+			}
+		}
 
-        isEditing = false;
-        isUploading = false;
-        uploadFiles = null;
-        uploadProgress = 0;
-    }
+		isEditing = false;
+		isUploading = false;
+		uploadFiles = null;
+		uploadProgress = 0;
+	}
 
-    function cancelEdit() {
-        if (simulation) {
-            newName = simulation.name;
-            newCPU = simulation.cpu_info || "";
-            newGPU = simulation.gpu_info || "";
-            newRAM = simulation.ram_info || "";
-        }
-        isEditing = false;
-        saveError = "";
-        uploadFiles = null;
-        uploadProgress = 0;
-        isUploading = false;
-    }
+	function cancelEdit() {
+		if (simulation) {
+			newName = simulation.name;
+			newCPU = simulation.cpu_info || "";
+			newGPU = simulation.gpu_info || "";
+			newRAM = simulation.ram_info || "";
+		}
+		isEditing = false;
+		saveError = "";
+		uploadFiles = null;
+		uploadProgress = 0;
+		isUploading = false;
+	}
 
-    function handleExportPDF() {
-        window.open(`/simulation/${id}/print`, "_blank");
-    }
+	function handleExportPDF() {
+		window.open(`/simulation/${id}/print`, "_blank");
+	}
 
-    async function handleDelete() {
-        if (
-            !confirm(
-                "Are you sure you want to permanently delete this simulation and all its associated media files?",
-            )
-        ) {
-            return;
-        }
-        const res = await fetch(`/api/simulations/${id}`, {
-            method: "DELETE",
-        });
+	async function handleDelete() {
+		if (
+			!confirm(
+				"Are you sure you want to permanently delete this simulation and all its associated media files?",
+			)
+		) {
+			return;
+		}
+		const res = await fetch(`/api/simulations/${id}`, {
+			method: "DELETE",
+		});
 
-        if (res.ok) {
-            window.location.href = "/";
-        } else {
-            const text = await res.text();
-            alert("Failed to delete the simulation: " + text);
-        }
-    }
-    async function handleDeleteResource(resourceName: string) {
-        if (
-            !confirm(
-                `Are you sure you want to permanently delete ${resourceName}?`,
-            )
-        )
-            return;
-        const res = await fetch(
-            `/api/simulations/${id}/resources/${encodeURIComponent(resourceName)}`,
-            {
-                method: "DELETE",
-            },
-        );
-        if (res.ok) {
-            simulation!.resources = simulation!.resources.filter(
-                (r) => r !== resourceName,
-            );
-        } else {
-            const text = await res.text();
-            alert("Failed to delete resource: " + text);
-        }
-    }
+		if (res.ok) {
+			window.location.href = "/";
+		} else {
+			const text = await res.text();
+			alert("Failed to delete the simulation: " + text);
+		}
+	}
+	async function handleDeleteResource(resourceName: string) {
+		if (
+			!confirm(`Are you sure you want to permanently delete ${resourceName}?`)
+		)
+			return;
+		const res = await fetch(
+			`/api/simulations/${id}/resources/${encodeURIComponent(resourceName)}`,
+			{
+				method: "DELETE",
+			},
+		);
+		if (res.ok) {
+			simulation!.resources = simulation!.resources.filter(
+				(r) => r !== resourceName,
+			);
+		} else {
+			const text = await res.text();
+			alert("Failed to delete resource: " + text);
+		}
+	}
 </script>
 
 <a href="/" class="back-link no-print">&lt;&lt; Back to Index</a>
 
 {#if error}
-    <p class="error">Error: {error}</p>
+	<p class="error">Error: {error}</p>
 {:else if !simulation}
-    <p>Loading...</p>
+	<p>Loading...</p>
 {:else}
-    <div class="header-container">
-        {#if !isEditing}
-            <h1>Simulation Detail: {simulation.name}</h1>
-            <div class="header-actions no-print">
-                <button class="export-btn" onclick={handleExportPDF}
-                    >Export PDF</button
-                >
-                <button class="edit-btn" onclick={() => (isEditing = true)}
-                    >Edit</button
-                >
-                <button class="delete-btn" onclick={handleDelete}>Delete</button
-                >
-            </div>
-        {:else}
-            <div class="edit-form">
-                <h2>Edit Simulation</h2>
-                <div class="form-group">
-                    <label for="sim-name">Name:</label>
-                    <input id="sim-name" type="text" bind:value={newName} />
-                </div>
-                <div class="form-group">
-                    <label for="sim-cpu">CPU:</label>
-                    <input
-                        id="sim-cpu"
-                        type="text"
-                        bind:value={newCPU}
-                        placeholder="e.g. Intel Core i9-13900K"
-                    />
-                </div>
-                <div class="form-group">
-                    <label for="sim-gpu">GPU:</label>
-                    <input
-                        id="sim-gpu"
-                        type="text"
-                        bind:value={newGPU}
-                        placeholder="e.g. NVIDIA RTX 4090"
-                    />
-                </div>
-                <div class="form-group">
-                    <label for="sim-ram">RAM:</label>
-                    <input
-                        id="sim-ram"
-                        type="text"
-                        bind:value={newRAM}
-                        placeholder="e.g. 64GB DDR5 6000MHz"
-                    />
-                </div>
-                <div class="form-group">
-                    <label for="sim-files">Upload Media:</label>
-                    <input
-                        id="sim-files"
-                        type="file"
-                        multiple
-                        bind:files={uploadFiles}
-                    />
-                </div>
-                {#if saveError}
-                    <p class="error">{saveError}</p>
-                {/if}
-                {#if isUploading}
-                    <div class="progress-bar-container">
-                        <div
-                            class="progress-bar"
-                            style={`width: ${uploadProgress}%`}
-                        ></div>
-                        <span class="progress-text">{uploadProgress}%</span>
-                    </div>
-                {/if}
-                <div class="form-actions">
-                    <button
-                        class="save-btn"
-                        onclick={handleSave}
-                        disabled={isUploading}>Save</button
-                    >
-                    <button
-                        class="cancel-btn"
-                        onclick={cancelEdit}
-                        disabled={isUploading}>Cancel</button
-                    >
-                </div>
-            </div>
-        {/if}
-    </div>
+	<div class="header-container">
+		{#if !isEditing}
+			<h1>Simulation Detail: {simulation.name}</h1>
+			<div class="header-actions no-print">
+				<button class="export-btn" onclick={handleExportPDF}>Export PDF</button>
+				<button class="edit-btn" onclick={() => (isEditing = true)}>Edit</button
+				>
+				<button class="delete-btn" onclick={handleDelete}>Delete</button>
+			</div>
+		{:else}
+			<div class="edit-form">
+				<h2>Edit Simulation</h2>
+				<div class="form-group">
+					<label for="sim-name">Name:</label>
+					<input id="sim-name" type="text" bind:value={newName} />
+				</div>
+				<div class="form-group">
+					<label for="sim-cpu">CPU:</label>
+					<input
+						id="sim-cpu"
+						type="text"
+						bind:value={newCPU}
+						placeholder="e.g. Intel Core i9-13900K"
+					/>
+				</div>
+				<div class="form-group">
+					<label for="sim-gpu">GPU:</label>
+					<input
+						id="sim-gpu"
+						type="text"
+						bind:value={newGPU}
+						placeholder="e.g. NVIDIA RTX 4090"
+					/>
+				</div>
+				<div class="form-group">
+					<label for="sim-ram">RAM:</label>
+					<input
+						id="sim-ram"
+						type="text"
+						bind:value={newRAM}
+						placeholder="e.g. 64GB DDR5 6000MHz"
+					/>
+				</div>
+				<div class="form-group">
+					<label for="sim-files">Upload Media:</label>
+					<input id="sim-files" type="file" multiple bind:files={uploadFiles} />
+				</div>
+				{#if saveError}
+					<p class="error">{saveError}</p>
+				{/if}
+				{#if isUploading}
+					<div class="progress-bar-container">
+						<div class="progress-bar" style={`width: ${uploadProgress}%`}></div>
+						<span class="progress-text">{uploadProgress}%</span>
+					</div>
+				{/if}
+				<div class="form-actions">
+					<button class="save-btn" onclick={handleSave} disabled={isUploading}
+						>Save</button
+					>
+					<button class="cancel-btn" onclick={cancelEdit} disabled={isUploading}
+						>Cancel</button
+					>
+				</div>
+			</div>
+		{/if}
+	</div>
 
-    <p>
-        <strong>ID:</strong>
-        {simulation.id}
-    </p>
-    <p>
-        <strong>Search Pattern:</strong>
-        <span style="text-transform: capitalize;"
-            >{parsedConfig?.find((c) => c.key === "search.spiral.max_legs")
-                ? "Spiral"
-                : parsedConfig?.find((c) => c.key === "search.lawnmower.width")
-                  ? "Lawnmower"
-                  : parsedConfig?.find((c) => c.key === "search.levy.max_steps")
-                    ? "Levy"
-                    : "Unknown"}</span
-        >
-    </p>
-    <p><strong>Date Code:</strong> {formatDate(simulation.created_at)}</p>
+	<p>
+		<strong>ID:</strong>
+		{simulation.id}
+	</p>
+	<p>
+		<strong>Search Pattern:</strong>
+		<span style="text-transform: capitalize;"
+			>{parsedConfig?.find((c) => c.key === "search.spiral.max_legs")
+				? "Spiral"
+				: parsedConfig?.find((c) => c.key === "search.lawnmower.width")
+					? "Lawnmower"
+					: parsedConfig?.find((c) => c.key === "search.levy.max_steps")
+						? "Levy"
+						: parsedConfig?.find((c) => c.key.startsWith("search.sar"))
+							? "SAR"
+							: "Unknown"}</span
+		>
+	</p>
+	<p><strong>Date Code:</strong> {formatDate(simulation.created_at)}</p>
 
-    {#if simulation.search_time !== null && simulation.total_time !== null}
-        <p>
-            <strong>Search Time:</strong>
-            {formatTime(simulation.search_time)} | <strong>Total Time:</strong>
-            {formatTime(simulation.total_time)}
-        </p>
-    {/if}
-    <p>
-        <strong>Total Media Size:</strong>
-        {formatBytes(simulation.total_size_bytes || 0)}
-    </p>
+	{#if simulation.search_time !== null && simulation.total_time !== null}
+		<p>
+			<strong>Search Time:</strong>
+			{formatTime(simulation.search_time)} | <strong>Total Time:</strong>
+			{formatTime(simulation.total_time)}
+		</p>
+	{/if}
+	<p>
+		<strong>Total Media Size:</strong>
+		{formatBytes(simulation.total_size_bytes || 0)}
+	</p>
 
-    {#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
-        <div class="hardware-box">
-            <h3>Hardware Spec</h3>
-            <p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
-            <p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
-            <p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
-        </div>
-    {/if}
+	{#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
+		<div class="hardware-box">
+			<h3>Hardware Spec</h3>
+			<p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
+			<p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
+			<p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
+		</div>
+	{/if}
 
-    {#if simulation.config}
-        <div class="config-box">
-            <strong>Configuration Options:</strong>
-            {#if parsedConfig}
-                {#snippet ConfigTable(
-                    title: string,
-                    data: { key: string; value: string }[] | undefined,
-                )}
-                    {#if data && data.length > 0}
-                        {@const groups = groupConfig(data)}
-                        <div class="config-category">
-                            <h2>{title}</h2>
-                            <div class="tables-container">
-                                {#if groups["_general"].length > 0}
-                                    <div class="table-wrapper">
-                                        <h3 class="table-label">General</h3>
-                                        <table class="config-table">
-                                            <thead>
-                                                <tr
-                                                    ><th>Parameter</th><th
-                                                        >Value</th
-                                                    ></tr
-                                                >
-                                            </thead>
-                                            <tbody>
-                                                {#each groups["_general"] as item}
-                                                    <tr
-                                                        ><td>{item.key}</td><td
-                                                            >{item.value}</td
-                                                        ></tr
-                                                    >
-                                                {/each}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                {/if}
-                                {#each Object.entries(groups).filter(([k]) => k !== "_general") as [groupName, items]}
-                                    <div class="table-wrapper">
-                                        <h3
-                                            class="table-label"
-                                            style="text-transform: capitalize;"
-                                        >
-                                            {groupName}
-                                        </h3>
-                                        <table class="config-table">
-                                            <thead>
-                                                <tr
-                                                    ><th>Parameter</th><th
-                                                        >Value</th
-                                                    ></tr
-                                                >
-                                            </thead>
-                                            <tbody>
-                                                {#each items as item}
-                                                    <tr
-                                                        ><td>{item.key}</td><td
-                                                            >{item.value}</td
-                                                        ></tr
-                                                    >
-                                                {/each}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                {/each}
-                            </div>
-                        </div>
-                    {/if}
-                {/snippet}
+	{#if simulation.config}
+		<div class="config-box">
+			<strong>Configuration Options:</strong>
+			{#if parsedConfig}
+				{#snippet ConfigTable(
+					title: string,
+					data: { key: string; value: string }[] | undefined,
+				)}
+					{#if data && data.length > 0}
+						{@const groups = groupConfig(data)}
+						<div class="config-category">
+							<h2>{title}</h2>
+							<div class="tables-container">
+								{#if groups["_general"].length > 0}
+									<div class="table-wrapper">
+										<h3 class="table-label">General</h3>
+										<table class="config-table">
+											<thead>
+												<tr><th>Parameter</th><th>Value</th></tr>
+											</thead>
+											<tbody>
+												{#each groups["_general"] as item}
+													<tr><td>{item.key}</td><td>{item.value}</td></tr>
+												{/each}
+											</tbody>
+										</table>
+									</div>
+								{/if}
+								{#each Object.entries(groups).filter(([k]) => k !== "_general") as [groupName, items]}
+									<div class="table-wrapper">
+										<h3 class="table-label" style="text-transform: capitalize;">
+											{groupName}
+										</h3>
+										<table class="config-table">
+											<thead>
+												<tr><th>Parameter</th><th>Value</th></tr>
+											</thead>
+											<tbody>
+												{#each items as item}
+													<tr><td>{item.key}</td><td>{item.value}</td></tr>
+												{/each}
+											</tbody>
+										</table>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				{/snippet}
 
-                <div class="super-container">
-                    {@render ConfigTable("Search", searchConfig)}
-                    {@render ConfigTable("UGV", ugvConfig)}
-                    {@render ConfigTable("UAV", uavConfig)}
-                    {@render ConfigTable("Other", otherConfig)}
-                </div>
-            {:else}
-                <pre>{simulation.config}</pre>
-            {/if}
-        </div>
-    {/if}
+				<div class="super-container">
+					{@render ConfigTable("Search", searchConfig)}
+					{@render ConfigTable("UGV", ugvConfig)}
+					{@render ConfigTable("UAV", uavConfig)}
+					{@render ConfigTable("Other", otherConfig)}
+				</div>
+			{:else}
+				<pre>{simulation.config}</pre>
+			{/if}
+		</div>
+	{/if}
 
-    <hr />
-    <h2>Simulation Logs</h2>
-    {#if simulation.resources && simulation.resources.includes("log.txt")}
-        <LogViewer
-            simName={simulation.name}
-            resourceName="log.txt"
-            {isEditing}
-            onDelete={handleDeleteResource}
-        />
-    {:else}
-        <p>No log.txt file found for this simulation.</p>
-    {/if}
+	<hr />
+	<h2>Simulation Logs</h2>
+	{#if simulation.resources && simulation.resources.includes("log.txt")}
+		<LogViewer
+			simName={simulation.name}
+			resourceName="log.txt"
+			{isEditing}
+			onDelete={handleDeleteResource}
+		/>
+	{:else}
+		<p>No log.txt file found for this simulation.</p>
+	{/if}
 
-    {#if flightPathVideo || gazeboVideo}
-        <hr />
-        <h2>Flight Path & Gazebo</h2>
-        <DualVideoViewer
-            simName={simulation.name}
-            video1={flightPathVideo}
-            video2={gazeboVideo}
-            {getResourceUrl}
-            {isEditing}
-            onDelete={handleDeleteResource}
-        />
-    {/if}
+	{#if flightPathVideo || gazeboVideo}
+		<hr />
+		<h2>Flight Path & Gazebo</h2>
+		<DualVideoViewer
+			simName={simulation.name}
+			video1={flightPathVideo}
+			video2={gazeboVideo}
+			{getResourceUrl}
+			{isEditing}
+			onDelete={handleDeleteResource}
+		/>
+	{/if}
 
-    {#if uavCamera || ugvCamera}
-        <hr />
-        <h2>UAV & UGV Cameras</h2>
-        <DualVideoViewer
-            simName={simulation.name}
-            video1={uavCamera}
-            video2={ugvCamera}
-            {getResourceUrl}
-            {isEditing}
-            onDelete={handleDeleteResource}
-        />
-    {/if}
+	{#if uavCamera || ugvCamera}
+		<hr />
+		<h2>UAV & UGV Cameras</h2>
+		<DualVideoViewer
+			simName={simulation.name}
+			video1={uavCamera}
+			video2={ugvCamera}
+			{getResourceUrl}
+			{isEditing}
+			onDelete={handleDeleteResource}
+		/>
+	{/if}
 
-    <hr />
+	<hr />
 
-    <h2>Media & Results</h2>
-    {#if imagesList.length > 0}
-        <ImageCarousel
-            simName={simulation.name}
-            images={imagesList}
-            {getResourceUrl}
-            {isEditing}
-            onDelete={handleDeleteResource}
-        />
-    {/if}
+	<h2>Media & Results</h2>
+	{#if imagesList.length > 0}
+		<ImageCarousel
+			simName={simulation.name}
+			images={imagesList}
+			{getResourceUrl}
+			{isEditing}
+			onDelete={handleDeleteResource}
+		/>
+	{/if}
 
-    {#if otherResourcesList.length > 0}
-        <div class="media-container">
-            {#each otherResourcesList as res}
-                <MediaItem
-                    simName={simulation.name}
-                    resourceName={res}
-                    {isEditing}
-                    onDelete={handleDeleteResource}
-                />
-            {/each}
-        </div>
-    {/if}
+	{#if otherResourcesList.length > 0}
+		<div class="media-container">
+			{#each otherResourcesList as res}
+				<MediaItem
+					simName={simulation.name}
+					resourceName={res}
+					{isEditing}
+					onDelete={handleDeleteResource}
+				/>
+			{/each}
+		</div>
+	{/if}
 
-    {#if imagesList.length === 0 && otherResourcesList.length === 0}
-        <p>No other media resources found for this simulation.</p>
-    {/if}
+	{#if imagesList.length === 0 && otherResourcesList.length === 0}
+		<p>No other media resources found for this simulation.</p>
+	{/if}
 {/if}
diff --git a/src/routes/simulation/[id]/print/+page.svelte b/src/routes/simulation/[id]/print/+page.svelte
index fa47cf0..2fcc2af 100644
--- a/src/routes/simulation/[id]/print/+page.svelte
+++ b/src/routes/simulation/[id]/print/+page.svelte
@@ -1,364 +1,340 @@
 <script lang="ts">
-    import { onMount } from "svelte";
-    import { formatDate } from "$lib/simulationState.svelte";
+	import { onMount } from "svelte";
+	import { formatDate } from "$lib/simulationState.svelte";
 
-    import {
-        type SimulationDetails,
-        flattenJSON,
-        isImage,
-        getResourceUrl,
-        formatTime,
-    } from "$lib/ts/utils";
+	import {
+		type SimulationDetails,
+		flattenJSON,
+		isImage,
+		getResourceUrl,
+		formatTime,
+	} from "$lib/ts/utils";
 
-    let { data } = $props();
-    let id = $derived(data.id);
+	let { data } = $props();
+	let id = $derived(data.id);
 
-    let simulation = $state<SimulationDetails | null>(null);
+	let simulation = $state<SimulationDetails | null>(null);
 
-    let parsedConfig: { key: string; value: string }[] | null = $derived.by(
-        () => {
-            if (!simulation?.config) return null;
-            try {
-                let cleanedConfig = simulation.config.replace(
-                    /"([^"]+)\.yaml"\s*:/g,
-                    '"$1":',
-                );
-                return flattenJSON(JSON.parse(cleanedConfig));
-            } catch {
-                return null;
-            }
-        },
-    );
+	let parsedConfig: { key: string; value: string }[] | null = $derived.by(
+		() => {
+			if (!simulation?.config) return null;
+			try {
+				let cleanedConfig = simulation.config.replace(
+					/"([^"]+)\.yaml"\s*:/g,
+					'"$1":',
+				);
+				return flattenJSON(JSON.parse(cleanedConfig));
+			} catch {
+				return null;
+			}
+		},
+	);
 
-    let searchConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("search."))
-            .map((c) => ({ ...c, key: c.key.replace("search.", "") })),
-    );
-    let uavConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("uav."))
-            .map((c) => ({ ...c, key: c.key.replace("uav.", "") })),
-    );
-    let ugvConfig = $derived(
-        parsedConfig
-            ?.filter((c) => c.key.startsWith("ugv."))
-            .map((c) => ({ ...c, key: c.key.replace("ugv.", "") })),
-    );
-    let otherConfig = $derived(
-        parsedConfig?.filter(
-            (c) =>
-                !c.key.startsWith("search.") &&
-                !c.key.startsWith("uav.") &&
-                !c.key.startsWith("ugv."),
-        ),
-    );
+	let searchConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("search."))
+			.map((c) => ({ ...c, key: c.key.replace("search.", "") })),
+	);
+	let uavConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("uav."))
+			.map((c) => ({ ...c, key: c.key.replace("uav.", "") })),
+	);
+	let ugvConfig = $derived(
+		parsedConfig
+			?.filter((c) => c.key.startsWith("ugv."))
+			.map((c) => ({ ...c, key: c.key.replace("ugv.", "") })),
+	);
+	let otherConfig = $derived(
+		parsedConfig?.filter(
+			(c) =>
+				!c.key.startsWith("search.") &&
+				!c.key.startsWith("uav.") &&
+				!c.key.startsWith("ugv."),
+		),
+	);
 
-    function groupConfig(data: { key: string; value: string }[] | undefined) {
-        if (!data) return {};
-        const groups: Record<string, { key: string; value: string }[]> = {
-            _general: [],
-        };
-        for (const item of data) {
-            const parts = item.key.split(".");
-            if (parts.length > 1) {
-                const groupName = parts[0];
-                const subKey = parts.slice(1).join(".");
-                if (!groups[groupName]) groups[groupName] = [];
-                groups[groupName].push({ key: subKey, value: item.value });
-            } else {
-                groups["_general"].push(item);
-            }
-        }
-        return groups;
-    }
+	function groupConfig(data: { key: string; value: string }[] | undefined) {
+		if (!data) return {};
+		const groups: Record<string, { key: string; value: string }[]> = {
+			_general: [],
+		};
+		for (const item of data) {
+			const parts = item.key.split(".");
+			if (parts.length > 1) {
+				const groupName = parts[0];
+				const subKey = parts.slice(1).join(".");
+				if (!groups[groupName]) groups[groupName] = [];
+				groups[groupName].push({ key: subKey, value: item.value });
+			} else {
+				groups["_general"].push(item);
+			}
+		}
+		return groups;
+	}
 
-    let imagesList = $derived<string[]>(
-        simulation && simulation.resources
-            ? simulation.resources.filter(isImage)
-            : [],
-    );
+	let imagesList = $derived<string[]>(
+		simulation && simulation.resources
+			? simulation.resources.filter(isImage)
+			: [],
+	);
 
-    onMount(async () => {
-        try {
-            const res = await fetch(`/api/simulations/${id}`);
-            if (res.ok) {
-                simulation = await res.json();
+	onMount(async () => {
+		try {
+			const res = await fetch(`/api/simulations/${id}`);
+			if (res.ok) {
+				simulation = await res.json();
 
-                setTimeout(() => {
-                    window.print();
-                }, 500);
-            }
-        } catch (e: any) {
-            console.error(e);
-        }
-    });
+				setTimeout(() => {
+					window.print();
+				}, 500);
+			}
+		} catch (e: any) {
+			console.error(e);
+		}
+	});
 </script>
 
 {#if simulation}
-    <div class="print-container">
-        <h1>Simulation Report: {simulation.name}</h1>
-        <p><strong>ID:</strong> {simulation.id}</p>
-        <p>
-            <strong>Search Pattern:</strong>
-            <span style="text-transform: capitalize;">
-                {parsedConfig?.find((c) => c.key === "search.spiral.max_legs")
-                    ? "Spiral"
-                    : parsedConfig?.find(
-                            (c) => c.key === "search.lawnmower.width",
-                        )
-                      ? "Lawnmower"
-                      : parsedConfig?.find(
-                              (c) => c.key === "search.levy.max_steps",
-                          )
-                        ? "Levy"
-                        : "Unknown"}
-            </span>
-        </p>
-        <p><strong>Date Code:</strong> {formatDate(simulation.created_at)}</p>
+	<div class="print-container">
+		<h1>Simulation Report: {simulation.name}</h1>
+		<p><strong>ID:</strong> {simulation.id}</p>
+		<p>
+			<strong>Search Pattern:</strong>
+			<span style="text-transform: capitalize;">
+				{parsedConfig?.find((c) => c.key === "search.spiral.max_legs")
+					? "Spiral"
+					: parsedConfig?.find((c) => c.key === "search.lawnmower.width")
+						? "Lawnmower"
+						: parsedConfig?.find((c) => c.key === "search.levy.max_steps")
+							? "Levy"
+							: parsedConfig?.find((c) => c.key.startsWith("search.sar"))
+								? "SAR"
+								: "Unknown"}
+			</span>
+		</p>
+		<p><strong>Date Code:</strong> {formatDate(simulation.created_at)}</p>
 
-        {#if simulation.search_time !== null && simulation.total_time !== null}
-            <p>
-                <strong>Search Time:</strong>
-                {formatTime(simulation.search_time)} |
-                <strong>Total Time:</strong>
-                {formatTime(simulation.total_time)}
-            </p>
-        {/if}
+		{#if simulation.search_time !== null && simulation.total_time !== null}
+			<p>
+				<strong>Search Time:</strong>
+				{formatTime(simulation.search_time)} |
+				<strong>Total Time:</strong>
+				{formatTime(simulation.total_time)}
+			</p>
+		{/if}
 
-        {#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
-            <div
-                class="hardware-box"
-                style="margin-top: 20px; border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; break-inside: avoid;"
-            >
-                <h3>Hardware Spec</h3>
-                <p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
-                <p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
-                <p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
-            </div>
-        {/if}
+		{#if simulation.cpu_info || simulation.gpu_info || simulation.ram_info}
+			<div
+				class="hardware-box"
+				style="margin-top: 20px; border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9; break-inside: avoid;"
+			>
+				<h3>Hardware Spec</h3>
+				<p><strong>CPU:</strong> {simulation.cpu_info || "N/A"}</p>
+				<p><strong>GPU:</strong> {simulation.gpu_info || "N/A"}</p>
+				<p><strong>RAM:</strong> {simulation.ram_info || "N/A"}</p>
+			</div>
+		{/if}
 
-        {#if simulation.config}
-            <div class="config-box">
-                <strong>Configuration Options:</strong>
+		{#if simulation.config}
+			<div class="config-box">
+				<strong>Configuration Options:</strong>
 
-                {#snippet ConfigTable(
-                    title: string,
-                    data: { key: string; value: string }[] | undefined,
-                )}
-                    {#if data && data.length > 0}
-                        {@const groups = groupConfig(data)}
-                        <div class="config-category">
-                            <h2>{title}</h2>
-                            <div class="tables-container">
-                                {#if groups["_general"].length > 0}
-                                    <div class="table-wrapper">
-                                        <h3 class="table-label">General</h3>
-                                        <table class="config-table">
-                                            <thead>
-                                                <tr
-                                                    ><th>Parameter</th><th
-                                                        >Value</th
-                                                    ></tr
-                                                >
-                                            </thead>
-                                            <tbody>
-                                                {#each groups["_general"] as item}
-                                                    <tr
-                                                        ><td>{item.key}</td><td
-                                                            >{item.value}</td
-                                                        ></tr
-                                                    >
-                                                {/each}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                {/if}
-                                {#each Object.entries(groups).filter(([k]) => k !== "_general") as [groupName, items]}
-                                    <div class="table-wrapper">
-                                        <h3
-                                            class="table-label"
-                                            style="text-transform: capitalize;"
-                                        >
-                                            {groupName}
-                                        </h3>
-                                        <table class="config-table">
-                                            <thead>
-                                                <tr
-                                                    ><th>Parameter</th><th
-                                                        >Value</th
-                                                    ></tr
-                                                >
-                                            </thead>
-                                            <tbody>
-                                                {#each items as item}
-                                                    <tr
-                                                        ><td>{item.key}</td><td
-                                                            >{item.value}</td
-                                                        ></tr
-                                                    >
-                                                {/each}
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                {/each}
-                            </div>
-                        </div>
-                    {/if}
-                {/snippet}
+				{#snippet ConfigTable(
+					title: string,
+					data: { key: string; value: string }[] | undefined,
+				)}
+					{#if data && data.length > 0}
+						{@const groups = groupConfig(data)}
+						<div class="config-category">
+							<h2>{title}</h2>
+							<div class="tables-container">
+								{#if groups["_general"].length > 0}
+									<div class="table-wrapper">
+										<h3 class="table-label">General</h3>
+										<table class="config-table">
+											<thead>
+												<tr><th>Parameter</th><th>Value</th></tr>
+											</thead>
+											<tbody>
+												{#each groups["_general"] as item}
+													<tr><td>{item.key}</td><td>{item.value}</td></tr>
+												{/each}
+											</tbody>
+										</table>
+									</div>
+								{/if}
+								{#each Object.entries(groups).filter(([k]) => k !== "_general") as [groupName, items]}
+									<div class="table-wrapper">
+										<h3 class="table-label" style="text-transform: capitalize;">
+											{groupName}
+										</h3>
+										<table class="config-table">
+											<thead>
+												<tr><th>Parameter</th><th>Value</th></tr>
+											</thead>
+											<tbody>
+												{#each items as item}
+													<tr><td>{item.key}</td><td>{item.value}</td></tr>
+												{/each}
+											</tbody>
+										</table>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				{/snippet}
 
-                <div class="super-container">
-                    {@render ConfigTable("Search", searchConfig)}
-                    {@render ConfigTable("UGV", ugvConfig)}
-                    {@render ConfigTable("UAV", uavConfig)}
-                    {@render ConfigTable("Other", otherConfig)}
-                </div>
-            </div>
-        {/if}
+				<div class="super-container">
+					{@render ConfigTable("Search", searchConfig)}
+					{@render ConfigTable("UGV", ugvConfig)}
+					{@render ConfigTable("UAV", uavConfig)}
+					{@render ConfigTable("Other", otherConfig)}
+				</div>
+			</div>
+		{/if}
 
-        <h2>Visuals</h2>
-        {#if imagesList.length > 0}
-            <div class="image-grid">
-                {#each imagesList as image}
-                    <div class="image-wrapper">
-                        <img
-                            src={getResourceUrl(simulation.name, image)}
-                            alt={image}
-                        />
-                        <p class="caption">{image}</p>
-                    </div>
-                {/each}
-            </div>
-        {:else}
-            <p>No images found in this simulation.</p>
-        {/if}
-    </div>
+		<h2>Visuals</h2>
+		{#if imagesList.length > 0}
+			<div class="image-grid">
+				{#each imagesList as image}
+					<div class="image-wrapper">
+						<img src={getResourceUrl(simulation.name, image)} alt={image} />
+						<p class="caption">{image}</p>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<p>No images found in this simulation.</p>
+		{/if}
+	</div>
 {:else}
-    <p>Loading printable report...</p>
+	<p>Loading printable report...</p>
 {/if}
 
 <style>
-    :global(body) {
-        font-family: Arial, sans-serif;
-        color: #000;
-        background: #fff;
-    }
+	:global(body) {
+		font-family: Arial, sans-serif;
+		color: #000;
+		background: #fff;
+	}
 
-    .print-container {
-        max-width: 1000px;
-        margin: 0 auto;
-        padding: 20px;
-    }
+	.print-container {
+		max-width: 1000px;
+		margin: 0 auto;
+		padding: 20px;
+	}
 
-    h1 {
-        border-bottom: 2px solid #000;
-        padding-bottom: 5px;
-        margin-bottom: 20px;
-    }
+	h1 {
+		border-bottom: 2px solid #000;
+		padding-bottom: 5px;
+		margin-bottom: 20px;
+	}
 
-    h2 {
-        margin-top: 30px;
-        border-bottom: 1px solid #ccc;
-    }
+	h2 {
+		margin-top: 30px;
+		border-bottom: 1px solid #ccc;
+	}
 
-    h3 {
-        margin-bottom: 5px;
-    }
+	h3 {
+		margin-bottom: 5px;
+	}
 
-    .config-box {
-        margin-top: 20px;
-        border: 1px solid #ccc;
-        padding: 15px;
-        background-color: #f9f9f9;
-        break-inside: avoid;
-    }
+	.config-box {
+		margin-top: 20px;
+		border: 1px solid #ccc;
+		padding: 15px;
+		background-color: #f9f9f9;
+		break-inside: avoid;
+	}
 
-    .super-container {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        margin-top: 15px;
-    }
+	.super-container {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		margin-top: 15px;
+	}
 
-    .config-category {
-        padding: 15px;
-        background: #ffffff;
-        border: 1px solid #ddd;
-        border-radius: 8px;
-    }
+	.config-category {
+		padding: 15px;
+		background: #ffffff;
+		border: 1px solid #ddd;
+		border-radius: 8px;
+	}
 
-    .config-category h2 {
-        margin-top: 0;
-        margin-bottom: 10px;
-        font-size: 18px;
-        border-bottom: 1px solid #ccc;
-        padding-bottom: 5px;
-    }
+	.config-category h2 {
+		margin-top: 0;
+		margin-bottom: 10px;
+		font-size: 18px;
+		border-bottom: 1px solid #ccc;
+		padding-bottom: 5px;
+	}
 
-    .tables-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 20px;
-        margin-top: 10px;
-    }
+	.tables-container {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20px;
+		margin-top: 10px;
+	}
 
-    .table-wrapper {
-        flex: 1;
-        min-width: 250px;
-    }
+	.table-wrapper {
+		flex: 1;
+		min-width: 250px;
+	}
 
-    .config-table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 14px;
-    }
+	.config-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 14px;
+	}
 
-    .config-table td {
-        border: 1px solid #888;
-        padding: 5px;
-    }
+	.config-table td {
+		border: 1px solid #888;
+		padding: 5px;
+	}
 
-    .config-table tr:nth-child(even) {
-        background-color: #f0f0f0;
-    }
+	.config-table tr:nth-child(even) {
+		background-color: #f0f0f0;
+	}
 
-    .image-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 20px;
-        margin-top: 20px;
-    }
+	.image-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 20px;
+		margin-top: 20px;
+	}
 
-    .image-wrapper {
-        break-inside: avoid;
-        text-align: center;
-        border: 1px solid #ddd;
-        padding: 10px;
-        background: #fafafa;
-    }
+	.image-wrapper {
+		break-inside: avoid;
+		text-align: center;
+		border: 1px solid #ddd;
+		padding: 10px;
+		background: #fafafa;
+	}
 
-    img {
-        max-width: 100%;
-        height: auto;
-        display: block;
-        margin: 0 auto;
-    }
+	img {
+		max-width: 100%;
+		height: auto;
+		display: block;
+		margin: 0 auto;
+	}
 
-    .caption {
-        margin-top: 5px;
-        font-size: 12px;
-        color: #555;
-    }
+	.caption {
+		margin-top: 5px;
+		font-size: 12px;
+		color: #555;
+	}
 
-    @media print {
-        @page {
-            margin: 1cm;
-        }
-        .print-container {
-            width: 100%;
-            max-width: none;
-            padding: 0;
-            margin: 0;
-        }
-    }
+	@media print {
+		@page {
+			margin: 1cm;
+		}
+		.print-container {
+			width: 100%;
+			max-width: none;
+			padding: 0;
+			margin: 0;
+		}
+	}
 </style>