@props([
    'title',
    'message',
])

@once
    <style>
        .system-error-page {
            min-height: 100dvh;
            padding: clamp(20px, 5vw, 64px) 16px;
            color: #172033;
            background: var(--vz-body-bg, #f5f8fd);
        }

        .system-error-page__shell {
            width: min(100%, 720px);
        }

        .system-error-page__brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
            color: inherit;
        }

        .system-error-page__logo {
            width: 48px;
            height: 48px;
            object-fit: contain;
        }

        .system-error-page__brand-name {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .system-error-page__panel {
            position: relative;
            overflow: hidden;
            padding: clamp(28px, 6vw, 56px);
            border: 1px solid rgba(148, 163, 184, .28);
            border-radius: 24px;
            background: rgba(255, 255, 255, .94);
            box-shadow: 0 24px 70px rgba(30, 41, 59, .12);
        }

        .system-error-page__title {
            margin: 0;
            color: #111827;
            font-size: clamp(1.55rem, 4vw, 2.25rem);
            font-weight: 700;
            line-height: 1.3;
        }

        .system-error-page__message {
            max-width: 590px;
            margin: 14px auto 0;
            color: #64748b;
            font-size: clamp(.94rem, 2.5vw, 1.05rem);
            line-height: 1.75;
        }

        .system-error-page__actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 28px;
        }

        .system-error-page__actions .btn {
            min-height: 44px;
            padding: 10px 18px;
            border-radius: 11px;
            font-size: .9rem;
            font-weight: 600;
        }

        [data-bs-theme="dark"] .system-error-page,
        [data-layout-mode="dark"] .system-error-page {
            color: #e5edf8;
            background: var(--vz-body-bg, #10161d);
        }

        [data-bs-theme="dark"] .system-error-page__panel,
        [data-layout-mode="dark"] .system-error-page__panel {
            border-color: #334155;
            background: rgba(30, 41, 51, .96);
            box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
        }

        [data-bs-theme="dark"] .system-error-page__title,
        [data-layout-mode="dark"] .system-error-page__title {
            color: #f8fafc;
        }

        [data-bs-theme="dark"] .system-error-page__message,
        [data-layout-mode="dark"] .system-error-page__message {
            color: #aebdd0;
        }

        @media (max-width: 480px) {
            .system-error-page__panel {
                border-radius: 18px;
            }

            .system-error-page__actions {
                flex-direction: column;
            }

            .system-error-page__actions .btn {
                width: 100%;
            }
        }
    </style>
@endonce

<main class="system-error-page d-flex align-items-center justify-content-center">
    <div class="system-error-page__shell text-center">
        <section class="system-error-page__panel" aria-labelledby="system-error-title">
            <a href="{{ route('root') }}" class="system-error-page__brand text-decoration-none" aria-label="{{ __('University of Health Sciences') }}">
                <img src="{{ $branding['website_logo']['url'] }}" alt="" class="system-error-page__logo">
                <span class="system-error-page__brand-name">{{ __('University of Health Sciences') }}</span>
            </a>

            <h1 class="system-error-page__title" id="system-error-title">{{ $title }}</h1>
            <p class="system-error-page__message">{{ $message }}</p>

            <div class="system-error-page__actions">
                <a href="{{ route('root') }}" class="btn btn-light" data-error-back>
                    <i class="ri-arrow-left-line me-1" aria-hidden="true"></i>{{ __('Return to previous page') }}
                </a>
                <a href="{{ route('root') }}" class="btn btn-primary">
                    <i class="ri-home-4-line me-1" aria-hidden="true"></i>{{ __('Go to dashboard') }}
                </a>
            </div>
        </section>
    </div>
</main>

@once
    <script>
        document.querySelector('[data-error-back]')?.addEventListener('click', function (event) {
            if (window.history.length > 1) {
                event.preventDefault();
                window.history.back();
            }
        });
    </script>
@endonce