<script lang="ts">
    import { onMount } from "svelte";
    import { SimulationState } from "$lib/simulationState.svelte";
    import SimulationSidebar from "$lib/SimulationSidebar.svelte";
    import SimulationTable from "$lib/SimulationTable.svelte";
    import "$lib/dashboard.css";

    let state = new SimulationState();

    onMount(async () => {
        try {
            const res = await fetch("/api/simulations");
            if (!res.ok) throw new Error("Failed to fetch simulations");
            state.simulations = await res.json();
        } catch (e: any) {
            state.error = e.message;
        }
    });
</script>

<h1>Sim-Link Simulation Results</h1>

{#if state.error}
    <p class="error">Error: {state.error}</p>
{/if}

<div class="page-layout">
    <SimulationSidebar {state} />
    <SimulationTable {state} />
</div>
