@props([
    'code',
    'message',
    'variant' => '404',
    'showRetry' => false,
])

<section class="error-page error-page--{{ $variant }}" aria-labelledby="error-page-title">
    <div class="page-loader-space error-page-space" aria-hidden="true">
        <div class="page-loader-nebula"></div>
        <div class="page-loader-stars"></div>
        <div class="page-loader-horizon"></div>
    </div>

    @if ($variant === '500')
        <div class="page-loader-cog-scene error-page-cog-scene" aria-hidden="true">
            <div class="page-loader-cog-core error-page-cog-core">
                <x-icon-emissive
                    name="settings"
                    size="lg"
                    class="icon-reflective-wrap--spin"
                />
            </div>
            <div class="page-loader-cog-mist"></div>
        </div>
    @else
        <div class="error-page-lost-scene" aria-hidden="true">
            <span class="error-page-lost-ring error-page-lost-ring--one"></span>
            <span class="error-page-lost-ring error-page-lost-ring--two"></span>
            <span class="error-page-lost-ring error-page-lost-ring--three"></span>
            <x-icon-emissive
                name="map-pin"
                size="md"
                class="error-page-lost-icon icon-reflective-wrap--drift"
            />
        </div>
    @endif

    <div class="error-page-caption">
        <p class="error-page-code" id="error-page-title">{{ $code }}</p>
        <p class="error-page-message">{{ $message }}</p>
        <div class="error-page-actions">
            <a class="error-page-link" href="{{ route('home') }}">Back to homepage</a>
            @if ($showRetry)
                <button type="button" class="error-page-link error-page-link--button" onclick="window.location.reload()">
                    Try again
                </button>
            @endif
        </div>
    </div>
</section>