<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fehler: $errorClass</title>
    <style>
        :root {
            --bg-color: #f8f9fa;
            --text-color: #212529;
            --border-color: #dee2e6;
            --error-color: #dc3545;
            --header-bg: #e9ecef;
            --code-bg: #f5f5f5;
            --link-color: #0d6efd;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-color: #212529;
                --text-color: #f8f9fa;
                --border-color: #495057;
                --error-color: #f8d7da;
                --header-bg: #343a40;
                --code-bg: #2b3035;
                --link-color: #6ea8fe;
            }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background: var(--bg-color);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .error-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .error-header {
            background: var(--header-bg);
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .error-title {
            margin: 0;
            color: var(--error-color);
            font-size: 1.5rem;
        }

        .error-body {
            padding: 20px;
        }

        .error-message {
            font-size: 1.1rem;
            margin-bottom: 20px;
            padding: 15px;
            background: #fff5f5;
            border-left: 4px solid var(--error-color);
            border-radius: 4px;
        }

        .error-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 20px;
        }

        .error-meta span {
            background: var(--header-bg);
            padding: 4px 8px;
            border-radius: 4px;
        }

        .trace-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .trace-header {
            background: var(--header-bg);
            padding: 5px 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .trace-title {
            margin: 0;
            font-size: 1.2rem;
        }

        .trace-body {
            padding: 0;
        }

        .trace-item {
            padding: 2px 4px;
            border-bottom: 1px solid var(--border-color);
        }

        .trace-item:last-child {
            border-bottom: none;
        }

        .trace-location {
            font-family: monospace;
            background: var(--code-bg);
            padding: 4px 8px;
            border-radius: 4px;
            word-break: break-all;
        }

        .trace-call {
            margin-top: 5px;
            font-family: monospace;
            color: #6c757d;
            word-break: break-all;
        }

        .trace-origin {
            background-color: #fff5f5;
        }

        code {
            font-family: monospace;
            background: var(--code-bg);
            padding: 2px 4px;
            border-radius: 3px;
        }

        @media (prefers-color-scheme: dark) {
            .error-container, .trace-container {
                background: #343a40;
            }

            .error-message {
                background: #3a2a2a;
            }

            .trace-origin {
                background-color: #3a2a2a;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="error-container">
        <div class="error-header">
            <h1 class="error-title">{{ errorClass }}</h1>
        </div>

        <div class="error-body">
            <div class="error-message">{{ errorMessage }}</div>

            <div class="error-meta">
                <span>Request ID: {{ requestId }}</span>
                <span>Zeit: {{ timestamp }}</span>
                <span>Level: {{ level }}</span>
                <span>Speicherverbrauch: {{ memory }}</span>
            </div>

            {{ dependencyInfo }}
        </div>
    </div>

    {{ code }}

    <div class="trace-container">
        <div class="trace-header">
            <h2 class="trace-title">Stack Trace</h2>
        </div>

        <div class="trace-body" style="font-size: 0.8rem;">
            <for var="item" in="trace">
                <div class="trace-item {{ item.isExceptionOrigin ? 'trace-origin' : '' }}">
                    <div class="trace-location">
                        {{ item.getRelativeFile() }} <i>Line {{ item.line }}</i>
                    </div>
                    <div class="trace-call" style="font-size: 1.25rem; background-color: #81a5ed; color: black; padding: 0.25em;">
                        {{ item.getCallString() }}
                    </div>
                </div>
            </for>
        </div>
    </div>
</div>
</body>
</html>
