<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Forgot Password</title>
        <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('css/site.css') }}">
    </head>
    <body class="auth-body">
        <main class="auth-card">
            <a class="brand" href="{{ route('storefront.home') }}">
                @include('partials.brand')
            </a>

            <div>
                <span class="eyebrow">Password help</span>
                <h1>Forgot Password</h1>
            </div>

            <form method="POST" action="{{ route('customer.password.otp') }}" class="auth-form">
                @csrf

                <label>
                    <span>Email</span>
                    <input name="email" type="email" value="{{ old('email') }}" required autofocus>
                </label>

                @if ($errors->any())
                    <p class="form-error">{{ $errors->first() }}</p>
                @endif

                <button class="button primary full" type="submit">Send OTP</button>
                <a class="auth-link" href="{{ route('login') }}">Back to login</a>
            </form>
        </main>
    </body>
</html>
