<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <title>Startup Error — Application in Degraded Mode</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=outfit:300,400,500,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/css/tabler.min.css">
    <link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --tblr-font-sans-serif: 'Outfit', system-ui, -apple-system, sans-serif;
            --tblr-primary: #7c3aed;
        }
    </style>
</head>
<body class="antialiased">

<div class="page page-center">
    <div class="container py-4" style="max-width: 860px;">

        <div class="text-center mb-4">
            <span class="avatar avatar-xl bg-danger-lt rounded mb-3">
                <i class="ti ti-alert-triangle text-danger" style="font-size: 2rem;"></i>
            </span>
            <h1 class="h2 mb-1">Application in Degraded Mode</h1>
            <p class="text-secondary">A startup error prevented the application from loading correctly.</p>
        </div>

        <div class="card mb-3" style="border-top: 2px solid var(--tblr-danger);">
            <div class="card-header">
                <h3 class="card-title text-danger mb-0">
                    <i class="ti ti-circle-x me-2"></i>Error Details
                </h3>
            </div>
            <div class="card-body">
                <div class="datagrid">
                    <div class="datagrid-item">
                        <div class="datagrid-title">Error Type</div>
                        <div class="datagrid-content">
                            <code>{{ handler.error_type }}</code>
                        </div>
                    </div>
                    <div class="datagrid-item">
                        <div class="datagrid-title">Message</div>
                        <div class="datagrid-content text-danger">{{ handler.error_message }}</div>
                    </div>
                </div>
            </div>
        </div>

        {% if handler.suggestions %}
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="ti ti-bulb text-yellow me-2"></i>Suggestions
                </h3>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    {% for suggestion in handler.suggestions %}
                    <li class="d-flex align-items-start gap-2 mb-2">
                        <i class="ti ti-point-filled text-yellow flex-shrink-0 mt-1" style="font-size: 0.6rem;"></i>
                        <span>{{ suggestion }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}

        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="ti ti-terminal-2 text-muted me-2"></i>Traceback
                </h3>
            </div>
            <div class="card-body p-0">
                <pre class="m-0 p-3 small" style="max-height: 500px; overflow: auto; background: transparent; color: #f87171;">{{ handler.traceback | e }}</pre>
            </div>
        </div>

        <p class="text-center text-muted mt-4 small">
            <i class="ti ti-refresh me-1"></i>
            Address the issues above and restart the application.
        </p>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
</body>
</html>
