@extends('layouts.guest')

@section('title', $status.' '.$code)

@section('content')
    <section class="py-5">
        <div class="mx-auto text-center" style="max-width: 560px;">
            <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-4"
                 style="width:80px;height:80px;background:var(--dc-brand-primary-soft);color:var(--dc-brand-primary);">
                <x-icon name="alert" size="36" />
            </div>
            <h1 class="display-6 mb-2" style="letter-spacing:-.02em;">{{ $status }}</h1>
            <p class="dc-text-secondary mb-4">{{ $message }}</p>

            <div class="d-flex justify-content-center gap-2 mb-4">
                <x-button as="a" href="{{ url('/') }}" variant="primary" icon="home">
                    {{ __('Back to home') }}
                </x-button>
                <x-button as="a" href="javascript:history.back()" variant="secondary">
                    {{ __('Go back') }}
                </x-button>
            </div>

            <div class="d-inline-flex flex-column gap-1 dc-text-muted small">
                <span>{{ __('Error code') }}: <code>{{ $code }}</code></span>
                <span>{{ __('Trace') }}: <code>{{ $trace_id }}</code></span>
            </div>

            @if (!empty($debug))
                <details class="mt-4 text-start">
                    <summary class="dc-text-muted small">{{ __('Debug details') }}</summary>
                    <pre class="mt-2 p-3 dc-bg-inset dc-radius-md small"><code>{{ json_encode($debug, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</code></pre>
                </details>
            @endif
        </div>
    </section>
@endsection