<div class="flex min-h-screen bg-bg">
    <x-auth.brand
        :headline="__('auth.brand_headline')"
        :sub="__('auth.brand_sub')"
        :facts="[
            __('auth.fact_location_term') => __('auth.fact_location'),
            __('auth.fact_backup_term') => __('auth.fact_backup'),
            __('auth.fact_restore_term') => __('auth.fact_restore'),
            __('auth.fact_support_term') => __('auth.fact_support'),
        ]" />

    <main class="flex flex-1 items-center justify-center px-6 py-12">
        <div class="w-full max-w-sm animate-rise">
            <x-ui.brand size="md" class="mb-9 lg:hidden" />

            @if ($done)
                <div class="grid size-11 place-items-center rounded-lg bg-success-bg">
                    <x-ui.icon name="check" class="size-5 text-success" />
                </div>
                <h1 class="mt-5 text-2xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.reset_done_title') }}</h1>
                {{-- Not signed in automatically: a reset link travels by email,
                     and a mailbox somebody else can read would otherwise be a
                     session somebody else gets. --}}
                <p class="mt-3 text-sm leading-relaxed text-muted">{{ __('auth.reset_done_body') }}</p>

                <x-ui.button href="{{ route('login') }}" variant="primary" class="mt-8 w-full">{{ __('auth.sign_in') }}</x-ui.button>
            @else
                <h1 class="text-3xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.reset_title') }}</h1>
                <p class="mt-2 text-sm text-muted">{{ __('auth.reset_subtitle') }}</p>

                <form wire:submit="save" class="mt-8 space-y-5">
                    <x-ui.input name="email" type="email" :label="__('auth.email')" autocomplete="username" wire:model="email" />
                    <x-ui.input name="password" type="password" :label="__('auth.reset_new')" autocomplete="new-password" wire:model="password" />
                    <x-ui.input name="password_confirmation" type="password" :label="__('auth.reset_repeat')" autocomplete="new-password" wire:model="password_confirmation" />
                    <x-ui.button type="submit" variant="primary" size="md" class="w-full"
                                 wire:loading.attr="disabled" wire:target="save">{{ __('auth.reset_save') }}</x-ui.button>
                </form>
            @endif
        </div>
    </main>
</div>
