<x-app-shell title="Reset Password" max="max-w-3xl">
    <section class="surface p-5 sm:p-7">
        <p class="eyebrow">OTP verification</p>
        <h1 class="page-title mt-2">Enter the OTP and set a new password.</h1>
        <p class="body-copy mt-3 max-w-2xl">
            Your OTP is valid for a short time. Passwords must be at least 8 characters and include mixed case and numbers.
        </p>

        @if (session('status'))
            <div class="alert-success mt-5">{{ session('status') }}</div>
        @endif

        @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.otp.reset') }}" 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="{{ $email }}" autocomplete="email" required>
            </label>

            <label class="block">
                <span class="field-label">Email OTP</span>
                <input class="field-input tracking-[0.35em]" name="otp" inputmode="numeric" maxlength="6" autocomplete="one-time-code" required>
            </label>

            <label class="block">
                <span class="field-label">New password</span>
                <input class="field-input" type="password" name="password" autocomplete="new-password" required>
            </label>

            <label class="block">
                <span class="field-label">Confirm new password</span>
                <input class="field-input" type="password" name="password_confirmation" autocomplete="new-password" required>
            </label>

            <button class="btn-primary w-full" type="submit">
                Reset password
            </button>

            <a class="btn-secondary w-full" href="{{ route('password.request') }}">
                Request a new OTP
            </a>
        </form>
    </section>
</x-app-shell>
