<x-app-shell title="Forgot Password" max="max-w-3xl">
    <section class="surface p-5 sm:p-7">
        <p class="eyebrow">Password recovery</p>
        <h1 class="page-title mt-2">Verify your email with an OTP.</h1>
        <p class="body-copy mt-3 max-w-2xl">
            Enter the email connected to your RemoteMatch account. We will send a short-lived OTP before allowing a password reset.
        </p>

        @if ($errors->any())
            <div class="alert-error mt-5">
                <ul class="list-disc space-y-1 pl-5">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}" class="mt-6 space-y-4">
            @csrf
            <label class="block">
                <span class="field-label">Account email</span>
                <input class="field-input" type="email" name="email" value="{{ old('email') }}" autocomplete="email" required autofocus>
            </label>

            <button class="btn-primary w-full" type="submit">
                Send OTP
            </button>

            <a class="btn-secondary w-full" href="{{ route('login') }}">
                Back to login
            </a>
        </form>
    </section>
</x-app-shell>
