Auth

{{--
    Reset password: a card that sets a new password from a reset link and
    posts it to `action` (for Fortify: route('password.update')).
    layout="page" (default) centres the card in its own full-height section;
    layout="card" renders only the card, for a host guest layout.

    Pass the link's `token` (a hidden field) and the account `email` (a
    visible email field, readonly with :email-readonly="true"); a null email
    leaves the field out. The password rules drive the password-strength
    checklist only: validate the same rules on the server. When the host
    refuses the link, pass its message in `error` and a `requestHref` to ask
    for a new link. Field errors come from the shared error bag (`email`,
    `password`, `password_confirmation`). The `botCheck` slot renders just
    above the submit button.
--}}
@props([
    'layout' => 'page',
    'heading' => 'Set a new password',
    'subheading' => 'Your new password must be different from previously used passwords.',
    'headingLevel' => 3,
    'icon' => true,
    'action' => '#',
    'token' => null,
    'email' => null,
    'emailReadonly' => false,
    'emailLabel' => 'Email address',
    'passwordLabel' => 'New password',
    'confirmLabel' => 'Confirm password',
    'minLength' => 8,
    'requireLowercase' => false,
    'requireUppercase' => true,
    'requireNumber' => true,
    'requireSymbol' => false,
    'status' => null,
    'error' => null,
    'requestHref' => null,
    'requestLabel' => 'Request a new link',
    'submitLabel' => 'Reset password',
    'loginHref' => '#',
    'loginLabel' => 'Back to sign in',
    'formId' => null,
])

@php
    $asCard = $layout === 'card';
    $level = in_array((int) $headingLevel, [1, 2, 3], true) ? (int) $headingLevel : 3;
@endphp

@php ob_start(); @endphp
    <x-ui.card @class(['w-full', 'max-w-sm' => ! $asCard]) :attributes="$asCard ? $attributes : new \Illuminate\View\ComponentAttributeBag()">
        <x-ui.card.header @class(['items-center text-center' => $icon])>
            @if ($icon)
                <span class="mb-2 inline-flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary" aria-hidden="true">
                    <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="4" y="10" width="16" height="11" rx="2" />
                        <path d="M8 10V7a4 4 0 0 1 8 0v3" />
                        <path d="M12 14.5v2.5" />
                    </svg>
                </span>
            @endif
            @if ($level === 3)
                <x-ui.card.title class="text-xl">{{ __($heading) }}</x-ui.card.title>
            @else
                <h{{ $level }} data-slot="card-title" class="break-words text-xl font-semibold leading-none tracking-tight">{{ __($heading) }}</h{{ $level }}>
            @endif
            @if (filled($subheading))
                <x-ui.card.description>{{ __($subheading, ['count' => (int) $minLength]) }}</x-ui.card.description>
            @endif
        </x-ui.card.header>

        <x-ui.card.content class="space-y-6">
            @if (filled($error))
                <x-ui.alert variant="destructive">
                    <x-ui.alert.title>{{ __($error) }}</x-ui.alert.title>
                    @if (filled($requestHref))
                        <x-ui.alert.description>
                            <a href="{{ $requestHref }}" class="font-medium text-foreground underline underline-offset-4">{{ __($requestLabel) }}</a>
                        </x-ui.alert.description>
                    @endif
                </x-ui.alert>
            @elseif (filled($status))
                <x-ui.alert variant="success" role="status">
                    <x-ui.alert.title>{{ __($status) }}</x-ui.alert.title>
                </x-ui.alert>
            @endif

            <form method="POST" action="{{ $action }}" class="space-y-6" @if (filled($formId)) id="{{ $formId }}" @endif>
                @csrf

                @if (filled($token))
                    <input type="hidden" name="token" value="{{ $token }}">
                @endif

                @if (! is_null($email))
                    <x-ui.field name="email">
                        <x-ui.label for="reset-email" required>{{ __($emailLabel) }}</x-ui.label>
                        <x-ui.input id="reset-email" type="email" autocomplete="username" required :value="$email" :readonly="(bool) $emailReadonly" />
                    </x-ui.field>
                @endif

                {{-- The strength primitive owns the meter and checklist. Its input is not
                     `required` (the toggle button shares the wrapper), so the server must
                     still validate `password` with the same rules as the props. --}}
                <x-ui.field name="password">
                    <x-ui.label for="reset-password" required>{{ __($passwordLabel) }}</x-ui.label>
                    <x-ui.password-strength
                        id="reset-password"
                        :min-length="(int) $minLength"
                        :require-lowercase="(bool) $requireLowercase"
                        :require-uppercase="(bool) $requireUppercase"
                        :require-number="(bool) $requireNumber"
                        :require-symbol="(bool) $requireSymbol"
                    />
                </x-ui.field>

                <x-ui.field name="password_confirmation">
                    <x-ui.label for="reset-password-confirm" required>{{ __($confirmLabel) }}</x-ui.label>
                    <x-ui.input
                        id="reset-password-confirm"
                        type="password"
                        autocomplete="new-password"
                        required
                    />
                </x-ui.field>

                {{ $botCheck ?? '' }}

                <x-ui.button type="submit" class="w-full">{{ __($submitLabel) }}</x-ui.button>
            </form>
        </x-ui.card.content>

        @if (filled($loginHref))
            <x-ui.card.footer class="justify-center">
                <a href="{{ $loginHref }}" class="inline-flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m12 19-7-7 7-7" />
                        <path d="M19 12H5" />
                    </svg>
                    {{ __($loginLabel) }}
                </a>
            </x-ui.card.footer>
        @endif
    </x-ui.card>
@php $card = new \Illuminate\Support\HtmlString(ob_get_clean()); @endphp

@if ($asCard)
    {{ $card }}
@else
    <x-ui.section space="md" class="flex min-h-svh items-center justify-center px-4" {{ $attributes }}>
        {{ $card }}
    </x-ui.section>
@endif