<!doctype html>
<html lang="en" data-theme="dark">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>goshs {{.GoshsVersion}} — error</title>
        <link rel="stylesheet" href="/css/style.css?static" />
        <style>
            .error-layout {
                display: flex;
                align-items: center;
                justify-content: center;
                height: calc(100vh - var(--topbar-h));
                padding: 24px;
            }
            .error-card {
                background: var(--bg2);
                border: 1px solid var(--border);
                border-radius: var(--r-lg);
                padding: 40px 48px;
                max-width: 560px;
                width: 100%;
                box-shadow: var(--shadow);
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .error-icon {
                width: 40px;
                height: 40px;
                color: var(--danger);
                flex-shrink: 0;
            }
            .error-heading {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .error-title {
                font-size: 18px;
                font-weight: 600;
                color: var(--text0);
                margin: 0;
            }
            .error-body {
                background: var(--danger-dim);
                border: 1px solid var(--danger);
                border-radius: var(--r);
                padding: 14px 16px;
                font-family: var(--mono);
                font-size: 13px;
                color: var(--danger);
                word-break: break-all;
                white-space: pre-wrap;
            }
            .error-footer {
                display: flex;
                gap: 10px;
            }
        </style>
    </head>
    <body>
        <!-- ═══════════ TOPBAR ═══════════ -->
        <header class="topbar">
            <div class="topbar-brand">
                <img
                    id="goshs-logo"
                    src="/images/logo-dark.png?static"
                    alt="goshs-logo"
                    width="24"
                    height="24"
                />
                goshs<span class="slash">/</span>
            </div>
            <div class="topbar-path">
                <span class="path-seg">error</span>
            </div>
            <div class="topbar-actions">
                <button
                    class="ibtn"
                    onclick="toggleTheme()"
                    id="theme-btn"
                    title="Toggle theme"
                >
                    <svg
                        id="theme-icon"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <circle cx="12" cy="12" r="5" />
                        <path
                            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
                        />
                    </svg>
                </button>
            </div>
        </header>

        <div class="error-layout">
            <div class="error-card">
                <div class="error-heading">
                    <svg
                        class="error-icon"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                    >
                        <circle cx="12" cy="12" r="10" />
                        <line x1="12" y1="8" x2="12" y2="12" />
                        <line x1="12" y1="16" x2="12.01" y2="16" />
                    </svg>
                    <h1 class="error-title">Something went wrong</h1>
                </div>
                <div class="error-body">{{.ErrorMessage}}</div>
                <div class="error-footer">
                    <button class="btn" onclick="window.history.back()">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <polyline points="15 18 9 12 15 6" />
                        </svg>
                        Go back
                    </button>
                    <button class="btn" onclick="window.location.href = '/'">
                        <svg
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"
                            />
                            <polyline points="9 22 9 12 15 12 15 22" />
                        </svg>
                        Home
                    </button>
                </div>
            </div>
        </div>

        <script>
            (function () {
                const t = localStorage.getItem("goshs-theme") || "dark";
                document.documentElement.setAttribute("data-theme", t);
                const logo = document.getElementById("goshs-logo");
                if (logo) {
                    if (t === "light") {
                        logo.src = "/images/logo-light.png?static";
                    } else {
                        logo.src = "/images/logo-dark.png?static";
                    }
                }
            })();
            function toggleTheme() {
                const current =
                    document.documentElement.getAttribute("data-theme");
                const next = current === "dark" ? "light" : "dark";
                document.documentElement.setAttribute("data-theme", next);
                localStorage.setItem("goshs-theme", next);
                const logo = document.getElementById("goshs-logo");
                if (logo) {
                    if (next === "light") {
                        logo.src = "/images/logo-light.png?static";
                    } else {
                        logo.src = "/images/logo-dark.png?static";
                    }
                }
            }
        </script>
    </body>
</html>
