<script lang="ts">
    import { page } from "$app/stores";
</script>

<h1>SYSTEM ERROR</h1>

<div class="error-box">
    <div class="code">Error Code: {$page.status}</div>
    <div class="message">
        Description: {$page.error?.message || "An unknown error occurred."}
    </div>

    <p>
        Please contact your system administrator or check the simulation logs.
    </p>
</div>

<a href="/">&lt;&lt; Return to Main Menu</a>

<style>
    h1 {
        color: red;
        border-bottom: 2px solid red;
        font-size: 24px;
        margin-bottom: 10px;
    }
    .error-box {
        border: 1px solid #000;
        padding: 15px;
        background-color: #f8f8f8;
        margin-bottom: 20px;
        max-width: 600px;
    }
    .code {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 5px;
    }
    .message {
        margin-bottom: 15px;
    }
    a {
        color: #0000ff;
        text-decoration: underline;
    }
    a:visited {
        color: #800080;
    }
</style>
