@{
    Layout = "_Layout";
    var errorCode = ViewData["ErrorCode"] as int?;
    var exception = ViewData["Exception"] as Exception;
    var isDebug = System.Diagnostics.Debugger.IsAttached;
}

<style>
    .error-page {
        max-width: 600px;
        margin: 4rem auto;
        padding: 2rem;
        background-color: #1F2C3C;
        color: white;
        border-radius: 16px;
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
        font-family: 'Segoe UI', sans-serif;
    }
    .error-page h1 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        color: #f87171;
    }
    .error-page .code {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: #facc15;
    }
    .error-page pre {
        background-color: #2E3C4F;
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
        margin-top: 1rem;
        color: #fefefe;
        font-size: 0.95rem;
    }
    .error-page details summary {
        cursor: pointer;
        color: #6a0dad;
        margin-top: 1rem;
        font-weight: bold;
    }
    .error-page p {
        margin-top: 0.5rem;
    }
</style>

<div class="error-page">
    <h1>🚨 Något gick fel</h1>
    <a href="/" class="btn-outline">Till startsidan</a>

    @if (errorCode.HasValue)
    {
        <div class="code">Statuskod: <strong>@errorCode</strong></div>
    }

    @if (exception != null)
    {
        <h3>Felmeddelande:</h3>
        <pre>@exception.Message</pre>

        @if (isDebug)
        {
            <details>
                <summary>Visa stacktrace</summary>
                <pre>@exception.StackTrace</pre>
            </details>
        }
    }
    else
    {
        <p>Vi kunde tyvärr inte visa sidan. Det kan bero på ett tillfälligt fel.</p>
    }
</div>
