@props([
    'toolbar' => true,
])

<div {{ $attributes->merge(['class' => 'auth-canvas']) }} x-data="authTheme()">
    <div class="auth-canvas__bg noise" aria-hidden="true"></div>

    <div class="auth-canvas__webgl" aria-hidden="true">
        <canvas id="login-scene"></canvas>
    </div>

    @if ($toolbar)
        <x-auth.brand-link />

        <div class="auth-canvas__toolbar">
            <x-locale-switcher compact :current-locale="app()->getLocale()" />
            <button
                type="button"
                @click="toggleTheme()"
                class="theme-toggle flex h-10 w-10 items-center justify-center rounded-xl shadow-sm"
                :aria-label="isDark ? @js(__('common.theme_light')) : @js(__('common.theme_dark'))"
            >
                <svg x-show="!isDark" x-cloak class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                </svg>
                <svg x-show="isDark" class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <circle cx="12" cy="12" r="4" />
                    <path stroke-linecap="round" d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
                </svg>
            </button>
        </div>
    @endif

    @isset($copy)
        <div class="auth-canvas__copy">
            {{ $copy }}
        </div>
    @endisset

    <main class="auth-canvas__main">
        {{ $slot }}
    </main>
</div>